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. |
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 + "search"' 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:
 |
| 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.
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.
ADS HERE !!!