/

Cara Membuat Template Menggunakan Bootstrap di Blogger Beserta Gambarnya

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 



Berlangganan update artikel terbaru via email:

29 Responses to "Cara Membuat Template Menggunakan Bootstrap di Blogger Beserta Gambarnya"

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

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

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

    ReplyDelete
  4. 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

    ReplyDelete
  5. 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.

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

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

    Menurutku ini sudah coding tingkat advance, ne!




    ReplyDelete
  8. 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.

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

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

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

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

    ReplyDelete
  13. 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

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

    ReplyDelete
  15. 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

    ReplyDelete
  16. 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

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

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

    ReplyDelete
  19. 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.

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

    ReplyDelete
  21. 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

    ReplyDelete
  22. 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 :(

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

    ReplyDelete
  24. 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

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

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

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

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

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

    ReplyDelete

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

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel