hari ini saya akan share cara menambahkan bootstrap di blogger.
Bootstrap yaitu kumpulan rangka HTML, CSS, dan Javascript yang paling popular sering digunakan developer untuk membuat blog responsive, dan mobile friendly.
Templateku juga menggunakan bootstrap versi 3 untuk membuat blog responsive dan full fitur yang disediakan bootstrap seperti jumbotron, well, progress, alert, pagination, button, dropdown, navigasi, dan lupa lagi.
Apa itu Bootstrap?
- Bootstrap adalah kerangka front-end gratis untuk pengembangan web lebih cepat dan lebih mudah
- Bootstrap menyediakan desain HTML dan CSS untuk typography, form, button, tabel, navigasi, pop up, slider dan lainnya
- Bootstrap juga memudahkan adnda untuk membuat blog responsif
Catatan : Jika kamu menggunakan template yang saya desain, maka kamu tidak perlu ikuti tutorial ini karena template saya sudah menggunakan bootstrap
Menambahkan CSS Bootstrap di blog
- Pergi ke Blogger > Blogmu > Template > Edit HTML > Cari kode <head> (CTRL + F di editor)
- Taruh kode dibawah ini sesudah kode <head>
<!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/> <!-- jika meta tag viewport sudah ada di blogmu maka ganti sama kode dibawah ini --> <meta name="viewport" content="width=device-width, initial-scale=1"/>
- Save Template
jika kamu mau membuat navigasi dropdown, tab, scrollspy, tombol spoiler, slider, kotak pop up, kotak info atau kotak peringatanda, dan tombol efek maka kamu harus menambahkan javascript bootstrap di blogmu, namun jika kamu hanya ingin membuat blogmu responsive maka kamu tidak perlu menambahkan javascript ini.
- Pergi ke blogger > Blogmu > Template > Edit HTML > Cari kode </head> (CTRL + F in editor)
- Put the code below before </head>
<!-- jQuery library (Opsional - jika blogmu udah ada jquery jangan kocy js script dibawah ini) --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> <!-- Latest compiled JavaScript --> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
- Save Template
Cara Menambahkan Kontainer Bootstrap di blog
- Pergi ke Blogger > Blogmu > Template > Edit HTML > Cari kode <div id='outer-wrapper'> (CTRL + F di editor)
- lalu tambahkan kode class='container' di <div id='outer-wrapper'> maka hasilnya seperti dibawah ini
<div class='container' id='outer-wrapper'>
- Lalu save template
dalam Sistem Grid Bootstrap yaitu hanya memperbolehkan 12 kolom. contohnya
<div class='container' id='content'>
<div class='col-xs-12 col-sm-8 col-md-8' id='main'>
</div>
<div class='col-xs-12 col-sm-4 col-md-4' id='side'>
</div>
</div>
element id='main' dan elemen id='side' harus totalnya berjumlah 12 tidak boleh lewat. 8 + 4 = 12semoga paham, untuk col-xs-12 yaitu kolom akan 100% pada saat di mobile. silahkan cek di situsnya untuk info lebih lanjut
- Pergi ke Blogger > Blogmu > Template > Edit HTML > Cari kode <div id='main-wrapper'>
(CTRL + F di editor)
Jika tidak ketemu kode <div id='main-wrapper'> Silahkan cari kode ini <div id='main-wrapper' itemscope='itemscope' itemtype='http://schema.org/Blog' role='main'>
- Jika sudah ketemu lalu ganti dengan html dibawah ini
<div class='col-xs-12 col-sm-8 col-md-8 clearfix' id='main-wrapper' itemscope='itemscope' itemtype='http://schema.org/Blog' role='main'>
- Cari <div id='sidebar-wrapper'> (CTRL + F di editor)
Jika tidak ketemu kode <div id='sidebar-wrapper'> Silahkan cari kode ini <div id='sidebar-wrapper' itemprop='mainEntity' itemscope='itemscope' itemtype='http://schema.org/WPSideBar' role='complementary'> atau <div id='sidebar-wrapper' itemscope='itemscope' itemtype='http://schema.org/WPSideBar'>
- Jika sudah ketemu lalu ganti dengan html dibawah ini
<div class='col-xs-12 col-sm-4 col-md-4 clearfix' id='sidebar-wrapper' itemprop='mainEntity' itemscope='itemscope' itemtype='http://schema.org/WPSideBar' role='complementary'>
- Cari kode <div id='content-wrapper'> (CTRL + F di editor)
- jika ketmeu kode diatas lalu ganti denga kode dibawah ini <div class='row' id='content-wrapper'>
- Save Template
bagi yang ingin membuat post bergaya grid silahkan ikut tutorial dibawah ini
- Cari kode HTML <div class='blog-posts hfeed'> CTRL + F in editor)
- Lalu ganti dengan kode ini <div class='blog-posts hfeed row'>
- Cari kode HTML <b:include data='post' name='post'/> (CTRL + F in editor)
- Lalu ganti dengan kode ini
<b:if cond='data:blog.pageType != "static_page"'><b:if cond='data:blog.pageType != "item"'> <div class='_grid col-xs-6 col-sm-4 col-md-4'><b:include data='post' name='post'/><div/> <b:else/> <b:include data='post' name='post'/> </b:if></b:if>
- Terus Save Template
terima kasih
1 komentar:
tes
Posting Komentar