Cara Membuat Template Menggunakan Bootstrap di Blogger Beserta Gambarnya

Konten [Tampil]

Menggunakan boostrap untuk membuat template di blog -  Sudah tahu bootstrap? Bootstrap merupakan Sebuah library framework css  Front-end yang mempermdah untuk membangun sebuah website, dimana sourcenya bisa digunakan melalui situs resminya.  Satu package yag komplit pokoknya menggunakan bootstrap good. 

Banyak cara untuk membuat template dari bootrsap. Kalau mmebuat secara maual bisa menggunakan sublime text, notepad ++, atau juga dreamweaver sebagai editor htmlnya. Jika menggunaka php jangan lupa untuk menggunakan local host seperti XAMPP, Xoop server dan lain-lain. 

Lalu bagaimana menggunakan bootrsap di blogger? Nah sebelumnya saya pun demikian bagaimana caranya agar template di blogger bisa menggunakan framework bootstrap. Setalah browsong-browsing ternyata mudah jgda dan harus telaten. Agar bisa diterpakan di blogger. 

Bagi kalian yang ingin menggunakan bootstrap di blog, sebaiknya menggunakn template bawaan dari blogger. karena quick editnya bisa dimanupulasi sesuka hati, yang terpenting struktur xml di blogger tidak terpengaruh. Oke tanpa basa-basi mari kita praktek saja. 

Membuat Template Bootstrap

Langkah pertama yang harus dilakukan adalah memilih template bawaan blogger. Hal ini fungsinya untuk mempermudah pengeditan dan tanpa merusak struktur blog itu sendiri. Setelah memilih template bawaan blogger, maka kita akan menghapus css beserta tag div variabel yang tidak digunakan. 

Jika bingung, ini salah satu contoh membuat template dengan tema bawaan blogger yaitu travel.

Agar tutorial ini berhasil, pastikan mengikuti langkah-langkahnya jangan sampai terlewat. Untuk mempermudah jalannya tutorial ini pilih tema yang dasarnya putih ya guys. Sekarang langsung eksekusi ke template pilih costumize 

Set template atur template dengan memilih tempalte yang sesederhana mungkin agar bisa memahami apa yang Myanakit tutorialkan. Untuk lebih baik, Sarannya ikuti setiap langkahnya gan dan sis. Pilihlah layout atau tata letak dengan  1 kolom dan 2 baris sedangkan untuk footernya gunakan 1 kolom 3 baris. Biar tidak bingung silahkan lihat gambar dibawah ini. 

Sekarang klik tombol Back to blogger dan pilih tombol edit HTML. Dan Nanti kita akan membuat template boostrap di blogger dengan mudah.

Silahkan cari dengan cara short cut ctrl +F dan cari <b:skin> dan klik hingga ketemu.

Kalau sudah ketemu, perhatikan. Untuk tag ]]</b/skin> usahakan tidak untuk di delete. Karena itu merupakan tag untuk membuat tampilan blogger dan sudah format dari googlenya.

Sekarang kita akan menghapus css bawaan blogger terlebih dahulu. Untuk itu lihat gambar dibawah ini.

Setelah melakukan penghapusan css, jangan lupa untuk di save theme.

selanjutnya, kita akan menghilangkan tags <div> diluar gadget. Gadget nantinya akan dibutuhkan juga.

kunci dari langkah ini adalaha dengan menghapus atau membiarkan elemen-elemen yang ada di blogger. pertama, atur navbar gadget dengan cara tag <header>. untuk pengeksekusian pertama silahkan cari <div class='body-fauxcolumns'>

Setelah  di save, apa yang akan terjadi? pasti scriptnya mengarah ke </div> bukan? jangan khawatir dan jangan panik. setelah ini masih ada beberapa elemen yang perlu di hapus.

Silahkan cari <div class='header-outer'>, </div>,</div> hingga <div class='tabs-outer'>

Kalau bingung lihat sepeti gambar dibawah ini.

Bagaimana tidak error lagi bukan? Langkah pertama telah sukses dan komplit. Langah selanjutnya akan di gunakan untuk boostrap tempplate.

Menambahkan Komponen Bootstrap ke Blogger

Bootrstrap menggunakan utilitas jQuery javascript untuk mengakses fungsi atau perpustakaan javascript itu sendiri. Langkah selanjutnya adalah cara menambahka link library javascript dan bootstrap css ke template. Salah satau biang keladi masalah adalah tumbukan penamaan bootstrap css dengan nama blogger. SO jangan khawatir kawan, kita akan membuat step by step dengan mudah.

Memasang plugin JQuery sebelum tag </body>

!-- jQuery (necessary for Bootstrap's JavaScript plugins) --><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"><!-- Include all compiled plugins (below), or include individual files as needed --> <script crossorigin='anonymous' integrity='sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS' src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js'/>

seperti ini

 <meta charset='utf-8'/>    <meta content='IE=edge' http-equiv='X-UA-Compatible'/>    <meta content='width=device-width, initial-scale=1' name='viewport'/>    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->

--------------------------------------------------------------------------------------

<!-- Bootstrap -->    <!-- <link crossorigin='anonymous' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css' integrity='sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7' rel='stylesheet'/> -->    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->    <!--[if lt IE 9]>      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>    <![endif]-->

Seperti ini

Perlu di ketahui, agar tidak terjadi tabrakan atau duplikasi data maka, untuk penamaan yang ada di bootstrap css sebaiknya ganti 

Cara memodifikasi Bootstrap css di blogger 

langsung saja klik bootstrap css  Setalah di klik linkny, maka nanti akan tampil seperti ini. 

Dalam gambar diatas, terdapat css bootstrap. Dalam blogger penamaan Navbar adalah navbar. Untuk menghindari duplikasi, sebaiknya semua nama bootstrap css ganti navbar menjadi navbar2 semuanya itu harus wajib agar tidak error. 

Untuk menggantinya cukup mudah silahkan pilih salah satu editor seperti notepa atau sublime. Meskipun mmeutuhkan waktu yang sangat panjang dan sangat lama jika di penuhi kegigigan nanti juga bakal selesai. 

Setelah melakukan pergantian nama navbar menjadi navbar2, selanjutnya cari <b:skin>

dan bootrstrap yang tadi telah diganti copykan dibagian sini

Menambahkan Navbar Bootstrap dan Jumbotron di Blogger

Sudah menambahkan Bootstrap css tapi tampilannya masih blank dan tidak berubah kenapa? Mungkin dari Kamu masih bertanya-tanya kok tidak efek sama sekali? Jawabannya karena html dasarnya belum di implementasika di blogger. Nah sekarang akan di praktekan untuk menambahkan html bootstrap di blogger.

Salah satu manfaat menggunakan Bootrstrap, karena navbarnya yang responsif  yang dapat menyesuaikan  sesuai dengan perangkat yang di gunakan. Misalnya di Smartphone maka akan menyesuaikan atau bahkan di PC dan di ipad. Selain itu menggunakan navar Bootstrap flesibel dan tidak membuat lambat loading.

Sekarang kita akan menambahkan nabar dan jumbotron.Ikuti step by stepnya.

   <!-- Bootstrap navbar -->      <nav class='navbar2 navbar2-default'>        <div class='container-fluid'>          <div class='navbar2-header'>            <button aria-controls='navbar2' aria-expanded='false' class='navbar2-toggle collapsed' data-target='#navbar2' data-toggle='collapse' type='button'>              <span class='sr-only'>Toggle navigation</span>              <span class='icon-bar'/>              <span class='icon-bar'/>              <span class='icon-bar'/>            </button>            <a class='navbar2-brand' href='#'>Project name</a>          </div>          <div class='navbar2-collapse collapse' id='navbar2'>            <ul class='nav navbar2-nav'>              <li class='active'><a href='#'>Home</a></li>              <li><a href='#'>About</a></li>              <li><a href='#'>Contact</a></li>              <li class='dropdown'>                <a aria-expanded='false' aria-haspopup='true' class='dropdown-toggle' data-toggle='dropdown' href='#' role='button'>Dropdown <span class='caret'/></a>                <ul class='dropdown-menu'>                  <li><a href='#'>Action</a></li>                  <li><a href='#'>Another action</a></li>                  <li><a href='#'>Something else here</a></li>                  <li class='divider' role='separator'/>                  <li class='dropdown-header'>Nav header</li>                  <li><a href='#'>Separated link</a></li>                  <li><a href='#'>One more separated link</a></li>                </ul>              </li>            </ul>            <ul class='nav navbar2-nav navbar2-right'>              <li class='active'><a href='./'>Default <span class='sr-only'>(current)</span></a></li>              <li><a href='../navbar-static-top/'>Static top</a></li>              <li><a href='../navbar-fixed-top/'>Fixed top</a></li>            </ul>          </div><!--/.nav-collapse -->        </div><!--/.container-fluid -->      </nav>

Perhatikan bahwa  mengubah referensi Bootstrap dari kata 'navbar' untuk 'navbar2' dalam kode ini - (Lihat bagian yang sudah kotak di bawah ini untuk melihat mana yang harus menyisipkan kode navbar di bawah):

Setelah di save templatenya, Maka tampil seperti ini. Bagiamana penampilannya? Sungguh berbeda bukan dengan template blogger sebelumnya. Terlihat lebih keren dan cool kawan

Setelah berhasil membuat navbar menggunakan boottrap, sekarang kita akan mengubah jumbotron bawaaan blogger menjadi jumbotron bootstrap. Copy script dibawah ini setelah tag <header> dan tag sebelum <b:section class="header"> di blogger seperti ini :

<header>

    <!-- Main jumbotron for a primary marketing message or call to action -->    <div class='jumbotron'>      <div class='container'>        <h1>Hello, world!</h1>        <p>This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.</p>        <p><a class='btn btn-primary btn-lg' href='#' role='button'>Learn more</a></p>      </div>    </div>
      <b:section class='header' id='header' maxwidgets='1' name='Header' showaddelement='no'>

lanjut sekarang save templatenya dan akan menambahkan jumbotron bootstrap di blogger.
Pastekan script ini di <b:template skin>

.jumbotron {    position: relative;    background: #000 url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpzRg-fCoVj9uTQzPy7LsCFoxtIKje7Uog7Kmy6I6YMZZGW0WunUsqo5z9qMmtKUi_ZI7so0HkiXStKKTEy-eNexMQ2LzRXplG6ywTareWEOll05pLHXxW9NwT30hsoLQQS0Vyy5B5YSuN/s1600/NPineMain.jpg") center center;    width: 100%;    height: 100%;    background-size: cover;    overflow: hidden;    color: #fff;}

lalu save template. Dan untuk yang terakhir kita akan menambhkan di bagain <header> </header>

untuk melihat hasilnya silahkan di Membuat Navbar Bootstrap di blogger 

Share this post