membuat template dengan bootstrap di blog
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("http://1.bp.blogspot.com/-i6UDnxawM5U/VnxyJuVUXRI/AAAAAAAABQU/8PrVKbwt-jg/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 



Related Posts

Silakan pilih sistem komentar anda ⇛   

29 komentar untuk Cara Membuat Template Menggunakan Bootstrap di Blogger Beserta Gambarnya

Mohon berkomentar dengan bijak. Berkomentar menggunakan link hidup otomatis akan di hapus. Terimakasih

no avatar avatar
susie Ncuss
# 30 January 2019 at 20:42

Baru tau lho ada bootstraps begini.
Jadi ingin kepoin lebih banyak soal bootstraps

Balas Hapus
no avatar avatar
Lidya
# 31 January 2019 at 04:38

wah dapet ilmu nih buat bikin template blogger, save dulu ah mau nyoba2 nanti

Balas Hapus
no avatar avatar
Keke Naima
# 31 January 2019 at 08:16

Waduh, saya harus pelan-pelan membaca ini. Sering gaptek, pengennya tau beres. Tetapi, ada kalanya juga saya pengen belajar hal seperti ini

Balas Hapus
no avatar avatar
Nyi Penengah Dewanti
# 31 January 2019 at 10:00

MasyaAllah mba kamu keren banget bisa kode -kodean begini.
Aku pusing kalo harus setting html hahaha, tapi dengan postingan ini aku jadi melek dan tertantang untk bisa juga lho bikin template dengna bootstrap

Balas Hapus
no avatar avatar
Inda Chakim
# 31 January 2019 at 10:10

Satu kata untukmu mbk, kereeeennnn.
Aku selalu kagum sama yang bisa main coding begini. Ah semoga suatu saat aku bisa coding jg. Doakan daku ya, Mbk.

Balas Hapus
no avatar avatar
Mechta
# 31 January 2019 at 15:19

Waduh teknis banget ni ya.. izin simpan dulu tuk dipelajari lagi saat luang.. TFS ya..

Balas Hapus
no avatar avatar
Rosanna Simanjuntak
# 31 January 2019 at 18:33

Ampun mba... coding, hihihi...
Kalau mau coba-coba, kudu di samping mba nih, biar lebih greget!

Menurutku ini sudah coding tingkat advance, ne!




Balas Hapus
no avatar avatar
Elly Nurul
# 31 January 2019 at 20:28

Apa aku aja yak yang pusing baca skrip skrip gini.. tapi aku salut banget lho sama orang yang paham tentang templete blog dan skrip2 nya.. sepertinya jadi blogger harus paham juga ya dengan isi rumahnya sendiri.. agar bisa lebih cantik dan tentu diperkuat dengan konten yang bagus juga.

Balas Hapus
no avatar avatar
Helena
# 31 January 2019 at 23:10

Wow coding tho. Baiklah ku cerna satu persatu soalnya ku pakai blogspot.

Balas Hapus
no avatar avatar
Indah nuria
# 1 February 2019 at 00:30

AKu baru ngeeeh nih mengenai bootstrap.. thanks untuk tipsnya ya

Balas Hapus
no avatar avatar
kurnia amelia
# 1 February 2019 at 02:47

Kalau template sendiri aku masih bawaan blogspot sih soale ga ngerti coding dan sangat membingungkan hehe.

Balas Hapus
no avatar avatar
Anne
# 1 February 2019 at 06:52

wah mbak, canggih banget ini. saya ngeliatnya keriting, huehehehe. harus kursus privat atau kuliah kayaknya buat paham bahasa program gini

Balas Hapus
no avatar avatar
herva yulyanti
# 1 February 2019 at 07:15

huah mba ini keren abis jujur kemarin ganti template aja kupusing 10 keliling lapangan sepak bola :( sedih ga ngerti yang beginian berarti kudu belajar lagi

Balas Hapus
no avatar avatar
Utie adnu
# 1 February 2019 at 08:33

Mudah ternyata ya mba, next mau ah ganti template udah lama juga nih Blum refresh blogku

Balas Hapus
no avatar avatar
Hidayah Sulistyowati
# 1 February 2019 at 08:45

Waktu ngubah template entah tahun kapan, semua masih aku kerjakan sendiri. Namun tahun kemarin dibantuin teman blogger ubah template yang sekarang. Udah pusing deh utak-atik html kayak umur masih agak muda dulu, wkwkwkk

Balas Hapus
no avatar avatar
Ida Tahmidah
# 1 February 2019 at 13:05

Wah asyik ya kalau bisa membuat template sendiri. Sepertinya cukup mudah tapi sy suka ga telaten ngikutin langkah2nya...hehe.. Kecuali punya motivasi yg besar membuat template sendiri. Masih liat skala prioritas

Balas Hapus
no avatar avatar
Rahmah 'Suka Nulis' Chemist
# 1 February 2019 at 13:58

Cocok banget nih buat user blogspot. Saya sudah lama gak pake blogspot. Dan sepertinya tahun ini bakalan ngutak atik lagi .

Balas Hapus
no avatar avatar
Noorma Fitriana M. Zain
# 1 February 2019 at 14:22

Aku bookmarked dulu ya. Soale ini teknis banget kudu bisa langsung mantengin di.leptip sambil praktek

Balas Hapus
no avatar avatar
Lendy Kurnia Reny
# 1 February 2019 at 14:54

Keren banget, kak tutorialnya.
Dan bahasa coding yang mashaAllah ini sukses membuatku "takut" utak-atik blog sendiri.

Seharusnya,
Punya 1 dummy blog yaa...yang bisa dijadikan ajang berlatih.

Balas Hapus
no avatar avatar
Miyosi Ariefiansyah
# 1 February 2019 at 15:00

Ya ampun mbaa coding2 ini membuatku mumet wkkk
Tapi kalau lihat hasilny jadi sukaa
Nanti kucoba buat blog aku yang baruuu
Tengss mbaa

Balas Hapus
no avatar avatar
April Hamsa
# 1 February 2019 at 16:55

Jd keinget pas ikutan coding mum hehe. Cuma aku jarang berlatih jdnya agak lupa2 inget huhuhu. jd pengen nih ngoding lagi dn utak atik bootsrap :D

Balas Hapus
no avatar avatar
Ira Hamid
# 1 February 2019 at 17:05

Wahh saya gak berani utak-atik gini, Mba. Takut blognya error. Dan masih trauma nih karena setelah ganti template blog, PV blogku malah terjun bebas :(

Balas Hapus
no avatar avatar
Ira
# 1 February 2019 at 17:06

Sampai saat ini saya pilih template yang gampang-gampang aja, Mba. Belum berani utak-atik template sendiri :)

Balas Hapus
no avatar avatar
rani yulianty
# 1 February 2019 at 17:27

Aku pengguna wp, jadi masih bingung dengan tampilannya, tapi artikel ini aku tandain, soalnya penting banget dan ilmu banget kali aja nanti aku dapat hidayah bikin blog di blogspot

Balas Hapus
no avatar avatar
Siti hairul
# 1 February 2019 at 17:35

Wah tutorialnya informatif nih, jujur aku tuh kudet banget kalo udah ketemu html hahahaha.

Balas Hapus
no avatar avatar
duniaqtoy
# 1 February 2019 at 20:09

duh aku masih pusing kalo kaya gini buat template dari awal. Bisanya cuma utak atik aja hehe

Balas Hapus
no avatar avatar
Diah
# 2 February 2019 at 04:20

tutorialnya lengkap banget Mbak, tapi kumasih bingung :D
baru banget nih tahu istilah bootstrap. :D

Balas Hapus
no avatar avatar
Dewi Natalia
# 2 February 2019 at 07:52

bisa juga ya mba, kita buat template sendiri dengan bootstrap. Aku akan segera coba nihh.

Balas Hapus
no avatar avatar
mutie adnu
# 3 February 2019 at 19:07

Belum diubah nih tamplate ku udah lama jd kpikiran mau ganti lg tapi mash takut klo jdnya salah

Balas Hapus