Membuat Sidebar Berbentuk Kotak-kotak

Para blogger pasti sering lihat artikel seperti ini bukan ? Dan yang pasti langkah-langkah pembuatannya pun hampir semuanya serupa, yaitu melalui edit html pada kolom Tata Letak. Tapi kali ini saya ingin membuatnya dengan bantuan pihak ketiga alias Gadget Gadget yang dipakai kali ini adalah html/javascript. Berikut langkah-langkahnya :

1. Log in blogger

2. Klik Tata Letak (Layout)

3. Klik Tambah Gadget (add gadget). anda bisa memilih lokasi sidebar sesuai keinginan masing-masing

4. Pilih Gadget HTML/Javascript

5. Copy kode dibawah ini pada kolom kosong gadget tersebut (kali ini saya ingin memberi contoh sidebar yang berisikan Daftar Isi)

<div style="overflow:auto;width:307px;height:150px;padding:10px;border:1px solid #000000 ">

001.<a href="http://iam-bahtiar.blogspot.com/2009/12/pernak-pernik-navigasi-bar-1.html" target="new"> <span style="color: rgb(255, 255, 255);"> </span>Pernak-pernik Navigasi Bar(1) </a><br/>

002.<a href="http://iam-bahtiar.blogspot.com/2009/12/pernak-pernik-navbar-2_05.html" target="new"> <span style="color: rgb(255, 255, 255);"> </span>Pernak-pernik Navigasi Bar(2) </a><br/>

003.<a href="http://iam-bahtiar.blogspot.com/2009/12/membuat-text-berkedip.html" target="new"> <span style="color: rgb(255, 255, 255);"> </span> Cara membuat Text Berkedip </a><br/>

004.<a href="http://iam-bahtiar.blogspot.com/2009/12/buku-tamu-tersembunyi.html" target="new"> <span style="color: rgb(255, 255, 255);"></span> Cara membuat Buku Tamu Tersembunyi </a><br/>

005.<a href="http://iam-bahtiar.blogspot.com/2009/12/judul-postingan-bergerak.html"> <span style="color: rgb(255, 255, 255);"></span> Cara membuat judul postingan bergerak </a><br/></div>

Catatan : kode warna merah adalah ukuran dan warna sidebar tersebut. Anda bisa mengganti dengan warna pilihan sendiri. (belum tahu kode warna html ? click disini)
- width = lebar
- height = tinggi
- px = jarak tulisan dengan batas garis
- border = ketebalan garis
- solid = warna garis

kode warna biru adalah url dan judul url yang akan tampil didalam kolom sidebar. Ganti sesuai dengan url dan judul url sesuai yang akan anda buat.

6. Simpan

Sebenarnya sidebar ini bisa untuk bermacam-macam fungsi, seperti banner, daftar link, label, dan masih banyak lagi. Tergantung minat dari pembaca sekalian. Selamat Mencoba