#2 Kerangka Template Bootstrap

Mad Trik - Saatnya melanjutkan edisi membuat template sendiri dengan bootstrap. Dan pada tutorial kali ini adalah bagian yang paling penting dalam membuat template, yaitu membuat kerangkanya. Layakanya membuat sebah bangunan atau rumah yang terlebih dahulu pasti pondasinya bukan ?

Kerangka Template Bootstrap
Kerangka Template Bootstrap.

Nah, tapi pondasi untuk template bootstrap ini bukan berbentuk semen, batu, ataupun pasir (ya iyalah) melainkan barisan kode HTML yang panjangnya dari Sabang sampai Merauke....... gak saya cuman bercanda, nggak sepanjang itu kok kodenya hahaha.

Struktur template dengan Bootstrap mungkin tidak banyak berbeda dengan template yang sering kamu lihat sebelumnya. Makanya sebelum itu lebih baik kamu mempelajari dulu si Bootstrap ini.

Kira-kira strukturnya akan seperti ini, dan struktur template yang ada disini adalah yang sedang saya pakai dalam membuat template dengan bootstrap ini:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<HTML>
  <head>
    <b:include data='blog' name='all-head-content'/>
    <title><data:blog.pageTitle/></title>
 <meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/>
    <meta expr:content='data:blog.metaDescription' name='description'/>
 <link href='//netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.min.css' rel='stylesheet'/>

    <link href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css' rel='stylesheet'/>

<b:skin><![CDATA[/*
Blogger Template Style
Name      : Nama Template Kamu
Created by: Achmad Muharya/Nama Kamu
*/
]]></b:skin>

</head>
  
<body>

<div class='bs-example'> <!-- Blog Navigation Start -->
    <nav class='navbar navbar-default'>
  <div class='container-fluid'>
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class='navbar-header'>
      <button class='navbar-toggle collapsed' data-target='#bs-example-navbar-collapse-1' 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='navbar-brand' href='#'>
        <img alt='Brand' src='/favicon.ico'/>
      </a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class='collapse navbar-collapse' id='bs-example-navbar-collapse-1'>
      <ul class='nav navbar-nav'>
        <li class='active'><a href='#'>Link <span class='sr-only'>(current)</span></a></li>
        <li><a href='#'>Link</a></li>
        <li class='dropdown'>
          <a aria-expanded='false' class='dropdown-toggle' data-toggle='dropdown' href='#' role='button'>Dropdown <span class='caret'/></a>
          <ul class='dropdown-menu' role='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'/>
            <li><a href='#'>Separated link</a></li>
            <li class='divider'/>
            <li><a href='#'>One more separated link</a></li>
          </ul>
        </li>
        <li><a href='/?m=1'>Mobile View</a></li>
      </ul>
      <form class='navbar-form navbar-left' expr:action='data:blog.homepageUrl + &quot;search&quot;' role='search'>
        <div class='form-group'>
              <input class='form-control' name='q' placeholder='Search' type='text'/>
        </div>
        <button class='btn btn-default' type='submit'>Submit</button>
      </form>
      <ul class='nav navbar-nav navbar-right'>
        <li><a href='#'>Link</a></li>
        <li class='dropdown'>
          <a aria-expanded='false' class='dropdown-toggle' data-toggle='dropdown' href='#' role='button'>Dropdown <span class='caret'/></a>
          <ul class='dropdown-menu' role='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'/>
            <li><a href='#'>Separated link</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>
</div> <!-- Blog Navigation End -->

<div class='container outer-wrapper'> <!-- Blog Outer Wrapper Start -->

<div class='blog-header'> <!-- Blog Header Start -->
      <header id='header-wrapper' itemscope='' itemtype='http://schema.org/WPHeader'>
  <b:section class='header' id='header1' maxwidgets='1' showaddelement='no'>
  <b:widget id='Header1' locked='true' title='(Header)' type='Header'/>
  </b:section>
      </header>
</div>

<div class='row'>
<div class='col-md-8 blog-main'> <!-- Blog Main Wrapper Start -->
  <b:section class='main' id='main' showaddelement='no'>
  <b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
  </b:section>
</div>

<aside class='col-xs-4 col-sm-offset-1 blog-sidebar'> <!-- Blog Sidebar Wrapper Start -->
  <b:section class='sidebar' id='sidebar' preferred='yes'>
  <b:widget id='PopularPosts1' locked='false' title='Artikel Populer' type='PopularPosts'/>
  </b:section>
      </aside> <!-- Blog Sidebar Wrapper End -->
  </div> <!-- Blog Row End -->

      <!-- spacer for skins that want sidebar and main to be the same height-->
  <div class='clear'/>

  </div> <!-- Blog Content Wrapper End -->

<footer class='blog-footer'> <!-- Blog Footer Start -->
      <p>Blog template built for <a href='http://getbootstrap.com'>Bootstrap</a> by <a href='https://twitter.com/AchmadMuharya'>@AchmadMuharya</a>.</p>
      <p>
        <a href='#'>Back to top</a>
      </p>
    </footer> <!-- Blog Footer End -->

</body> <!-- End Body -->
</HTML>


Kira-kira begitulah contoh kerangkanya. Dan jika kamu teliti, jelas tidak ada perbedaan yang begitu mencolok bukan dengan kerangka template lainnya. Hanya saja untuk mengikuti apa yang ada di dalam rangka bootstrap ini, mau tidak mau ada beberapa elemen yang harus dibungkus dengan apa yang disuruh sama om @mdo dan om @fat.

Untuk hasilnya nanti kira-kira akan jadi seperti gambar ini:

Contoh kolom-kolom yang dihasilkan.
Hasil akhirnya kira-kira akan seperti ini. (Mohon maaf logo 'MT' nya agak keluar)

Yang perlu diperhatikan adalah bagian col-sm... karena tiap kelas punya berbagai macam lebar. Dan maksimalnya adalah sampai angka 12.

  • col-xs-... : Untuk "Ponsel yang ukurannya (<768px)"
  • col-sm-... : Untuk "Tablet yang ukurannya (=768px)"
  • col-md-... : Untuk "Desktop yang ukurannya (=992px)"
  • col-lg-... : Untuk "Desktop yang ukurannya (=1200px)"

Dan untuk angka-angka tadi yang saya bilang, sebenarnya itu bisa digunakan dimana saja untuk menentukan lebar dari sebuah kolom atau yang lainnya. Jadi pastikan kalau kamu mau menambahkan sebuah kolom baru, selalu kasih ...-5 sesudah kelasnya tadi.

Untuk mengetahui informasi yang lebih jelasnya kamu bisa lihat ke halaman resminya Bootstrap di Get Bootstrap: Grid.

Cuman dibagian inilah rasa "Wow !", kesel, dan bingung bercampur jadi satu. Karena lebarnya itu sudah ditentukan oleh Bootstrap jadi untuk memasang iklan di bagian sidebar yang umumnya mempunyai lebar sekitar 300x250px jadi tidak cocok disini, tapi itu semua bisa diatur lagi kalau kamu pintar memainkan CSS-nya.

Sekian dulu edisi kedua kali ini tentang membuat template dengan rangka Bootstrap. Tunggu saja edisi lainnya di Mad Trik dan mungkin cuman di Mad Trik saja hahaha *apa sih*. Dan jangan lupa sebelum bertanya di komentar bawah, alangkah baiknya kamu baca dulu dokumentasi yang ada di Bootstrap, karena disanalah cumber dari segala sumber.

Salam super dari saya, moga artikel ini bisa bermanfaat bagi semua yang penasaran cara bikin template Blogger sendiri.

14 comments

  1. rumit juga ya gan kode kode nya template, ane terus terang kagak bisa bikin template sendiri haha

    ReplyDelete
    Replies
    1. Gak ada kata gak bisa om kalo belum dicoba :D

      Seklias sih memang keliatan ribet, tapi kalo diteliti lagi paling cuman nambahin beberapa kode aja kedalam templatenya :)

      Delete
  2. Makasih banyak kerangkanya sobat! oh ya blog anda sudah saya follow, tolong follow juga blog saya ya :)

    ReplyDelete
    Replies
    1. Sama-sama om :)

      Sip, makasih udah mengikuti blog ini, tunggu aja folbeknya nanti :)

      Delete
  3. Terima kasih mas. artikelnya membantu saya.

    ReplyDelete
  4. sudah diteliti master, tetapi kalau dilihat versi rangaka diatas menggunakan element data versi 1.0, padahal dalam struktur kode sudah menggunakan utf-8, <aside>. masih menggunakan versi default blogger theme Template, belum bisa masuk dalam data canvas,PHP dan js.UI.

    tetapi cukup bagus juga sih tampilan rangkanya.

    ReplyDelete
    Replies
    1. Aduh jangan panggil master ahh saya masih belajar disini :p.

      Ini memang ditujukan buat blogger mba, makanya dibuat gitu :D

      Delete
    2. benar buat blogger, yang jadi masalah disana tertulis utf-8 tetapi kenapa masih menggunakan <aside> begitu maksud saya, soalnya rangka element utf-b sudah mendukung HTML-5 validasi, termasuk penggunaan canvas, dan flat UI

      Delete
    3. Wah kirain ngomongin masalah yang PHP dan JS itu, ternyata salah ya :D. Kalau yang itu memang bawaan dari template ini mba :), belum saya edit lagi. Makasih ya ralatnya.

      Diganti dengan kode ini kan mba <div>, apakah <header> dan <article> harus diganti juga kan ?

      Delete
  5. Ga sanggup liat kode-kode sebanyak itu, mata saya muter-muter nih x___x

    ReplyDelete
  6. keren tutornya sob, uda ane coba. mau tanya ni sob biar halaman posting menjadi autoreadmore + tampilan thumnail gimana ya sob..thanks.

    ReplyDelete
    Replies
    1. Ada di artikel terbaru #6

      http://madtrik.blogspot.com/2015/04/download-template-blogger-shinpuru-strap.html

      Delete

Perlu diingat saya juga manusia, yang kadang punya salah, jika ada kesalahan pada artikel yang dibuat kamu bisa membantu saya untuk memperbaiki artikel tersebut. Dan kadang saya juga tidak bisa manjawab pertanyaan kamu.