Pengertian Twitter Bootstrap -  Banyak blogger yang mulai tertarik dengan Bootstrap namun mereka masih bertanya apa sih fungsinya sebenarnya. Adakah kelebihannya? Bagaimana instalasinya? Nah, sedikit demi sedikit di blog ini akan mulai di bahas tentang bootstrap, mulai dari pengenalan hingga pemasangannya di Blogger.

Apa itu Bootstrap?
Bootstrap adalah platform baru yang dikembangkan tim twitter. Pertama kali muncul pada ajang hackweek dan kini sudah mulai penyempurnaan. Platform ini hanya menggunakan sedikit coding CSS dan JavaScript namun tetap bisa membuat website yang powerfull mengikuti perkembangan browser. Website yang menggunakan bootstrap akan menjadi website yang fleksibel, nyaman dan tentu saja cepat.

Bootstrap juga memudahkan pengaturan website bagi mereka yang kurang mahir coding atau tidak punya waktu banyak. Sekumpulan javascript dan CSS yang dibutuhkan untuk banyak sekali widget ada dalam satu file yang terus di update oleh pengembang. Pemilik website tidak akan lagi disibukkan dengan pengaturan css atau javascript berlebihan. Mereka hanya perlu menentukan gadget atau elemen apa yang ingin ditampilkan dalam bentuk HTML standart bootstrap yang sangat simple.

Misalkan dulu untuk menambahkan menubar di blogspot, maka Anda perlu menyisipkan file CSS, HTML bahkan JavaScript untuk effect tertentu. Kemudian ketika Anda ingin menambahkan dropdown menu, maka per widget, paling tidak Anda butuh menambahkan CSS dan HTML lagi. Belum lagi jika ingin lebih menarik akan dibutuhkan javascript tambahan. Begitu seterusnya setiap penambahan widget selalu dibutuhkan banyak kode. Tapi setelah instalasi bootstrap, Anda hanya perlu menambahkan kode HTML nya saja.


Tapi...  Penggunaan bootstrap kadang membuat kita jadi kurang kreatif, Coding yang sudah di buatkan oleh pengembang membuat desain web kita terbatas. Sebenarnya kita masih bisa tambahkan CSS manual pada elemen-elemen bootstrap untuk mempercantiknya, tapi jelas ini membuat web kita nanggung. Menambahkan CSS manual sama saja kembali ke cara lama.

Jadi, pilihan Anda apakah akan mengikuti perkembangan jaman bersama bootstrap, editing dan kelola website secara instan. Atau lebih suka oprek template sendiri berkutat dengan kode CSS yang Anda susun-susun sendiri.

Jawabannya, tentu sesuai kebutuhan dan kepuasan Anda.

Item info: Pengertian Apa Itu Bootstrap

Memasang Awesome Font/Icon di Samping Judul Gadget - Pagi ini full membahas Awesome Icon. Seklaian daripada lupa mending post beberapa sekaligus. Hari ini berurutan mulai post:
- Menggunakan Awesome Font di Blogspot
- Daftar Lengkap Awesome Icon Untuk Blog
- Custom CSS Untuk Awersome Icon/Font

Nah, kali ini untuk menjawab pertanyaan teman-teman yang ingin meletakkan awesome font tersebut di judul gadget sidebar ataupun di menubar.


Pemasangan Di Samping Judul Gadget
1. Login Blogger
2. Edit HTML
3. Kemudian cari kode gadget Anda, misalkan:

<b:widget id='HTML1' locked='false' title='Artikel Terkait' type='HTML'>
            <b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>

  <b:include name='quickedit'/>
</b:includable>
          </b:widget>

*yang di stabilo merahungu adalah judul gadget Anda
*perhatikan yang berwarna merah adalah baris yang harus Anda rubah dan sisipkan kode.

Kode awal:
<h2 class='title'><data:title/></h2>

menjadi:

 <h2 class='title'><i class="icon-facebook"> <data:title/></h2>

*yang berwarna biru ganti dengan kode icon sesuai keinginan Anda. Kode icon bisa dilihat di: Daftar Lengkap Awesome Icon Untuk Blog
*Untuk mengatur icon di samping judul gadget agar posisinya bagus, bisa dengan CSS tambahan sesuai dengan artikel: Custom CSS Untuk Awersome Icon/Font


Pemasangan Pada Menubar
Untuk pemasangan pada menubar, maka posisi awesome icon seperti pada kode di bawah ini:
<li><i class="icon-facebook icon-2x"></i>  <a href="#">Pemula</a></li>

Sesuaikan dengan CSS agar terlihat bagus pada menubar.
Semoga bermanfaat. Blogging is Sharing... Kadang-kadang monetizing hehe

Item Review: Memasang Awesome Icon di Judul Gadget Blog