Little boy questioned his mother, he asked what he can be in the future..with a sad smile, she tells him he can be anything he wants to be.... Boy said he’d become (an) astronaut and fly out into space crews around the universe he wanted to see the stars and also see other planets in outer space------------- "Why don’t we just keep dreaming, let’s keep our mind with dream and faith, as long as we wish we can make it come true, how old you are never forget your dream and keep dreaming "

Sunday 22 May 2016

Memasang bootstrap pada template Blogspot


Selamat Malam..
Beralih sedikit dari networking, kali ini saya posting tentang bagaimana  memasang bootstrap pda template blogspot. Enjoy

Bootstrap (http://getbootstrap.com/)

Designed for everyone, everywhere.

"Bootstrap makes front-end web development faster and easier. It's made for folks of all skill levels, devices of all shapes, and projects of all sizes."

Yap, bootstrap.. Udah pada tahu bootstrap kan ?! wen developer atau terutama front-end designer pasti udah ga asing dengan framework yang satu ini.. udah makanan sehari hari kali ya..

Bagi yang masih asing inilah fungsi dan kegunaan bootstrap :
Bootstrap adalah front-end framework yang solek, bagus dan luar biasa yang mengedapankan tampilan untuk mobile device (Handphone, smartphone dll.) guna mempercepat dan mempermudah pengembangan website. Bootstrap menyediakan HTML, CSS dan Javascript siap pakai dan mudah untuk dikembangkan.
Bootstrap merupakan framework untuk membangun desain web secara responsif. Artinya, tampilan web yang dibuat oleh bootstrap akan menyesuaikan ukuran layar dari browser yang kita gunakan baik di desktop, tablet ataupun mobile device. Fitur ini bisa diaktifkan ataupun dinon-aktifkan sesuai dengan keinginan kita sendiri. Sehingga, kita bisa membuat web untuk tampilan desktop saja dan apabila dirender oleh mobile browser maka tampilan dari web yang kita buat tidak bisa beradaptasi sesuai layar. Dengan bootstrap kita juga bisa membangun web dinamis ataupun statis.
Wih asik kan? 
sekarang saya akan menjelaskan bagaimana cara nya memasang bootstrap ini pada template blogspot, agar fungsi fungsi nya dapat kita gunakan untuk mempercantik blog kita :

1. Menyiapkan Bootstrap
Disini kita akan menginstal bootstrap dengan menggunakan bootstrap CDN, pertama buka web official dari bootstrap > getting started. http://getbootstrap.com/getting-started/
Kemudian pada bagian Boostrap CDN terdapat link CDN dari css, theme dan javascript dari bootstrap.
Inilah yang akan kita install pada template blogspot, Next

2. Install Bootstrap
Login ke akun blogger anda, lilih Blog yang akan kita diinstall, pilih menu Template dan klik edit html.
Kemudian, copy link dari website bootstrap tadi, dan tempelkan diantara bagian  <head>.....</head> template.
Simpan template, dan bootstrap berhasil diinstal di blogspot, semua fungsinya (css,theme dan javascript) dapat digunakan untuk mempercantik tampilan blog dan posting.

Update!!
3. Install Jquery
Untuk dapat mengoptimalkan semua fungsi dan fitur dari bootstrap diperlukan jquery. pertama buka website JQuery (https://code.jquery.com/), dan pilih versi JQuery 1.x dan klik versi minified maka akan muncul jendela link JQuery.


Klik icon copy to clipboard untuk mengcopy script Jquery yang akan kita install. dan untuk meng installnya lakukan cara yang sama untuk menginstall bootstrap yaitu memasukannya ke dalam file html template dari blogspot, paste didalam tag <head>.....</head> . Simpan...selesai

Troubleshooting :
Jika muncul error dibawah ini ketika menyimpan template, tambahkan end-tag </link> pada link CSS dan theme bootstrap.

Selesai.. Sekian semoga bermanfaat ^^

No comments:

Post a Comment