2016/11/06

cara mudah menggunakan bootstrap pada template blog

Tags
Sebelum lebih jauh membahas cara manambahkan boostrap ke template blog sebaiknya kita mengenal dulu secuil pengertian apa yang dimaksud boostrap ini .

cara mudah menggunakan bootstrap pada template blog

Apa itu boostrap ?? 

Boostrap adalah sebuah kerangka HTML, CSS dan Javascript yang paling populer untuk mengembangkan web responsif

Yah, untuk membuat kerangka template yang responsive boostrap sangat berperan penting .
Kenapa ? karena fungsi boostrap disebut sebagai franework CSS pengembangan dari sekumpulan komponen antarmuka web yang memang dirancang untuk digunakan secara bersama,Hal lainnya boostrap juga mememberikan sarana pengembangan layout halaman yang bisa diakses secara mudah dan tentu lebih rapi serta ringan. 

Pengembangan boostrap untuk web sangat baik sebagai pengganti icon penanda pada sebuah web . dulu jika tanda yang digunakan adalah sebuah icon kecil kini dengan adanya boostrap sebagai pengganti membawa ranah baru dalam mengembangkan sebuah website yang responsive dan tentu perubahan yang sangat besar adanya kecepatan loading sebuah web atau blog ketimbang menggunakan icon atau file gambar.

Para pengembang web profesional pasti mengenal penerapan boostrap ini , para web designer yang profesional pasti menggunakan boostrap sebagai komponen pelengkap untuk memodifikasi sebuah halaman web berbasis HTML maka dari itu saya akan berbagi sedikit pengalaman tentang bagaimana menambahkan boostrap ke template kamu

Langkah-langkah menambahkan boostrap pada template blog

  1. Login terlebih dahulu ke blogger
  2. pada dashboard blogger klik template
  3. kemudian klik edit html
  4. Lakukan pencarian dalam template dengan menekan ctrl+f
  5. pada sisi kanan bagian atas kolom pencarian isi dengan kode </head> kemudian tekan enter
  6. setelah kode </head> muncul langkah selanjutnya adalah menambahkan script dibawah dan tempatkan pas diatas kode </head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css" rel="stylesheet"/>
Jika sudah sekarang save template.

Sekarang script pemanggil css boostrap sudah terpasang dalam template blog kamu , jadi langkah selanjutnya adalah menambahkan perintah perintah kode boostrap . sebagai contoh beberapa kode yang bisa saya bagikan bawah ini :

<!-- Standard button -->

<button type="button" class="btn btn-default">Default</button>



<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->

<button type="button" class="btn btn-primary">Primary</button>



<!-- Indicates a successful or positive action -->

<button type="button" class="btn btn-success">Success</button>



<!-- Contextual button for informational alert messages -->

<button type="button" class="btn btn-info">Info</button>



<!-- Indicates caution should be taken with this action -->

<button type="button" class="btn btn-warning">Warning</button>



<!-- Indicates a dangerous or potentially negative action -->

<button type="button" class="btn btn-danger">Danger</button>



<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->

<button type="button" class="btn btn-link">Link</button>



<p>

  <button type="button" class="btn btn-primary btn-lg">Large button</button>

  <button type="button" class="btn btn-default btn-lg">Large button</button>

</p>

<p>

  <button type="button" class="btn btn-primary">Default button</button>

  <button type="button" class="btn btn-default">Default button</button>

</p>

<p>

  <button type="button" class="btn btn-primary btn-sm">Small button</button>

  <button type="button" class="btn btn-default btn-sm">Small button</button>

</p>

<p>

  <button type="button" class="btn btn-primary btn-xs">Extra small button</button>

  <button type="button" class="btn btn-default btn-xs">Extra small button</button>

</p>



<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>

<button type="button" class="btn btn-default btn-lg btn-block">Block level button</button>


Ada begitu banyak jenis2 kode boostrap yang bisa kamu dapatkan , berhubung karena artikel ini hanya untuk menjelaskan bagaimana cara menggunakan boostrap pada blog jadi kiasan yang saya beri sebatas bagaimana cara menggunakannya saja

Saya janji artikel-artikel berikutnya akan membagikan beberapa jenis code boostrap lainnya jadi jika kamu butuh tetap selalu kunjungi blognya om karena akan banyak sekali ilmu yang bakal saya bagikan.

sekian artikel mengenai menggunakan boostrap pada blog , terima kasih sudah berkunjung dan...

Silahkan berkomentar yang baik dan menarik sesuai dengan isi konten.
Komentar yang tidak diperbolehkan :

1. Berbau penghinaan SARA & PXXN
2. Komentar dengan Link hidup ( akan dianggap spam )
3. Komentar tidak nyambung dengan isi postingan

EmoticonEmoticon