Cara Gampang Memakai Bootstrap Pada Template Blog

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

Apa itu boostrap ?? 

Boostrap ialah sebuah kerangka HTML, CSS dan Javascript yang paling terkenal untuk mengembangkan web responsif

Yah, untuk menciptakan kerangka template yang responsive boostrap sangat berperan penting .

Kenapa ? alasannya ialah fungsi boostrap disebut sebagai franework CSS pengembangan dari sekumpulan komponen antarmuka web yang memang dirancang untuk dipakai secara bersama,Hal lainnya boostrap juga mememberikan sarana pengembangan layout halaman yang sanggup diakses secara gampang dan tentu lebih rapi serta ringan. 

Pengembangan boostrap untuk web sangat baik sebagai pengganti icon penanda pada sebuah web . dulu kalau tanda yang dipakai ialah sebuah icon kecil kini dengan adanya boostrap sebagai pengganti membawa ranah gres dalam mengembangkan sebuah website yang responsive dan tentu perubahan yang sangat besar adanya kecepatan loading sebuah web atau blog ketimbang memakai icon atau file gambar.

Para pengembang web profesional niscaya mengenal penerapan boostrap ini , para web designer yang profesional niscaya memakai boostrap sebagai komponen tambahan untuk memodifikasi sebuah halaman web berbasis HTML maka dari itu saya akan membuatkan sedikit pengalaman ihwal 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 bab atas kolom pencarian isi dengan instruksi </head> kemudian tekan enter
6. setelah instruksi </head> muncul langkah selanjutnya ialah menambahkan script dibawah dan tempatkan pas diatas instruksi </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 kini save template.

Sekarang script pemanggil css boostrap sudah terpasang dalam template blog kau , jadi langkah selanjutnya ialah menambahkan perintah perintah instruksi boostrap . sebagai pola beberapa instruksi yang sanggup 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>

Advertiser

Ada begitu banyak jenis2 instruksi boostrap yang sanggup kau dapatkan , berhubung alasannya ialah artikel ini hanya untuk menjelaskan bagaimana cara memakai boostrap pada blog jadi kiasan yang saya beri sebatas bagaimana cara menggunakannya saja

Saya akad artikel-artikel berikutnya akan membagikan beberapa jenis code boostrap lainnya jadi kalau kau butuh tetap selalu kunjungi blognya om alasannya ialah akan aneka macam ilmu yang bakal saya bagikan.

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