Bootstrap Metro Blogger Template

Bootstrap Framework

Bootstrap adalah sebuah teknologi framework terbaru yang diciptakan secara khusus untuk membuat atau mengembangkan suatu web atau situs menjadi lebih responsive yang dilengkapi dengan komponen yang tergolong sangat lengkap dalam membuat sebuah konsep atau desain website modern.

Di setiap project pembuatan sebuah website tentu dibutuhkan berbagai macam aplikasi atau widget sesuai dengan kebutuhan desainer, semua modul tersebut sudah tersedia dalam bootstrap yang telah menyediakan basic modul yang berupa: Grid , Tipografi , Tabel , Formulir, Buttons dan Responsiveness . Selain itu, ada juga beberapa modul modern seperti dropdown menu , navigasi , modal , Typehead , Pagination , Carousal , Breadcrumb , Tab , Thumbnail , judul dll Dengan adanya semua komponen ini Anda dapat membuat sebuah proyek website yang responsive cepat dan mudah .

Bootstrap Blogger Template

yang menjadi pertanyaan, Bisakah Bootstrap di integrasikan ke template blogger? tentu saja bisa! caranya kita harus menghilangkan dulu kode css bawaan blogspot lalu ganti dengan css bootstrap yang bisa anda download secara gratis di official websitenya selanjutnya anda tinggal menambahkan komponen atau modul yang anda inginkan tutorial lengkap mengenai penambahan komponen ini bisa anda lihat di link ini
Ada beberapa macam desain bootstrap yang sudah beredar di internet seperti: Flaty, Cerulean, Cosmo, Cupid, Cyborg, Slate, Journal, Simplex, Space lab, Super Hero dll semua bisa di download di Bootstrapwatch atau kunjungi link ini untuk download , diantara desain bootstrap yang paling populer dimasa sekarang adalah Metro dan Flaty seperti halnya di website ini saya pun menggunakan bootstrap metro dibawah ini adalah sedikit tutorial dan contoh beberapa komponen yang terkandung dalam bootstrap metro

Label Button:

Default Primary Success Info Warning Danger

Kode Label Button:

<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>

Single Button

Kodenya:

<button class="btn btn-default" type="button">Default</button>
<button class="btn btn-primary" type="button">Primary</button>
<button class="btn btn-success" type="button">Success</button>
<button class="btn btn-info" type="button">Info</button>
<button class="btn btn-warning" type="button">Warning</button>
<button class="btn btn-danger" type="button">Danger</button>

Jumbotron

This is a simple Jumbotron Metro Bootstrap unit, a simple jumbotron-style component for calling extra attention to featured content or information.

Kode Jumbotron Metro Bootstrap:

<div class="jumbotron" style="background: #000;">
<h4>Jumbotron</h4>
This is a simple Jumbotron Metro Bootstrap unit, a simple jumbotron-style component for calling extra attention to featured content or information.<br />
<button class="btn btn-danger" type="button">Learn More</button></div>

Panel Heading

Basic panel

Panel heading

Panel content

Panel footer

Panel primary

Panel content

Panel success

Panel content

Panel warning

Panel content

Panel danger

Panel content

Panel info

Panel content

Kodenya HTML:

<div class="row" style="width: 550px;">
<div class="col-lg-4">
<div class="panel panel-default">
<div class="panel-body" style="background: #282b37;">
Basic panel
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
Panel heading</div>
<div class="panel-body" style="background: #282b37;">
Panel content
</div>
</div>
<div class="panel panel-default">
<div class="panel-body" style="background: #282b37;">
Panel content
</div>
<div class="panel-footer">
Panel footer</div>
</div>
</div>
<div class="col-lg-4">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title" style="color: white;">
Panel primary</h3>
</div>
<div class="panel-body" style="background: #282b37;">
Panel content
</div>
</div>
<div class="panel panel-success">
<div class="panel-heading">
<h3 class="panel-title" style="color: white;">
Panel success</h3>
</div>
<div class="panel-body" style="background: #282b37;">
Panel content
</div>
</div>
<div class="panel panel-warning">
<div class="panel-heading">
<h3 class="panel-title" style="color: white;">
Panel warning</h3>
</div>
<div class="panel-body" style="background: #282b37;">
Panel content
</div>
</div>
</div>
<div class="col-lg-4">
<div class="panel panel-danger">
<div class="panel-heading">
<h3 class="panel-title" style="color: white;">
Panel danger</h3>
</div>
<div class="panel-body" style="background: #282b37;">
Panel content
</div>
</div>
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title" style="color: white;">
Panel info</h3>
</div>
<div class="panel-body" style="background: #282b37;">
Panel content
</div>
</div>
</div>
</div>

Untuk melihat Bootstrap Metro style bisa dilihat di blog yang saya buat di bootstrap blogger template