Cara praktis Membuat Daftar Isi Blog Manual

Membuat Daftar Isi Blog Manual

Kalian pasti sudah melihat Daftar isi yang terpampang jelas di blog saya ini... yang ada icon bintang kerlap-kerlip itu... baiklah akan saya bahas di postingan kali ini... karena juga ada yang tanya lagi "Gimana Bang cara bikin daftar isi kayak di blognya ini..? " .. oke brooo... simak artikel ini.. bagi blogger senior ya silahkan ditambahkan jika masih kurang jelas....

Sebenarnya daftar isi ini mudah membuatnya.. hanya tergantung dari kreatifitas kita saja memanfaatkan widget-widget yang sudah ada di blog kita.. Asal mula Widget Daftar Isi Manual yaitu dari Widget BlogRoll Manual.. kenapa dikatakan Manual ? karena kita sendiri yang harus mengisi daftar isinya..

Tapi ada juga Widget Daftar isi Otomatis yang disertai dengan gambar & komentar yang ada pada postingan itu.. lalu kenapa dikatakan Otomatis ? karena widget itu sendiri yang akan scanning postingan artikel di blog kita dan akan ditampilkan menjadi daftar isi yang keren... tapi Daftar isi otomatis ini menggunakan java scripts (.js) jadi akan sedikit memperlambat loading blog kita..

Jadi terserah kalian mau menggunakan Daftar isi yang mana..

Kali ini saya hanya akan membahas Daftar Isi Manual saja... oke kita langsung saja yaa.. ikuti langkah-langkahnya sebagai berikut :

• Loginlah dulu di Blogger > > Tata letak > Elemen Halaman.. Klik tambah Gadget > HTML/Java Scripts.. Buatlah Namanya Gadget-nya misalnya Daftar isi Blog.

• Copy-paste kode dibawah ini ke dalam gadget tadi.

<div style="border: 0px solid rgb(153, 153, 153);
overflow: auto;
width: 210px;
height: 150px;
text-align: left; ">

<img src="http://i466.photobucket.com/albums/rr22/wong284/star_Blink.gif" /><a href="http://www.gratizs.co.cc/2010/06/kumpulan-kata-bijak.html"> Kumpulan Kata Bijak</a>
<br />
<img src="http://i466.photobucket.com/albums/rr22/wong284/star_Blink.gif" /><a href="http://www.gratizs.co.cc/2010/06/ppc-pay-per-click.html"> PPC (Pay Per Klick)</a>
<br />
<img src="http://i466.photobucket.com/albums/rr22/wong284/star_Blink.gif" /><a href="http://www.gratizs.co.cc/2010/06/keuntungan-dari-ziddu.html"> Keuntungan dari Ziddu</a>
<br />
</div>
Widget By: [<a href="http://www.gratizs.co.cc">Rahim</a>]

• Dari kode itu.. gantilah kode scripts yang berwarna :

Merah = Gantilah dengan URL HTML Code Gambar Icon kamu..
Biru = Gantilah dengan Direct URL ke postingan Artikel kamu..
Hijau = Gantilah dengan Judul Artikel kamu..

• Ulangilah langkah diatas ini sampai semua postingan artikelmu terdaftar semua..

Lainnya :

- <br/> = Seperti spasi yang memberikan jarak antar text....
- style="border: 0px = Gantilah angka border-nya dengan 1px atau 2px atau biarkan saja 0px..
- width: 500px; = Sesuaikan dengan lebar kolom di blog kamu.. atau aturlah sesukamu
- height: 150px; = Sesuaikan dengan tinggi kolom di blog kamu.. bisa 100px atau 200 / 250 px..
- text-align: left; "&gt; = Mengatur posisi text widget ini / daftar isi ..ganti dengan Center jika mau di tengah-tengah..

• Jika selesai semua kamu membuat daftarnya dan mengeditnya.. silahkan di simpan widget daftar isi-nya dan tempatkan di tempat yang strategis..

Selamat mencoba dan semoga sukses...!!!

Share