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 bagi blogger pemula silahkan simak artikel ini.. bagi blogger senior ya silahkan ditambahkan jika masih kurang jelas..
...Bagi Blogger pemula saya sangat sarankan belajar Tutorial Blogging di Blognya Kang Rohman .. di situ juga banyak Blogger-blogger Senior yang OnLine di Shoutmix-nya.. kamu bisa bertanya langsung disana (komunikasi 2 arah yang aktif menurut saya)..
Baiklah kembali ke topik semula... 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.. Paham ya .. Daftar isi yang saya buat ini terinspirasi dari Daftar isi yang ada di blognya Kang Rohman..
...Bagi Blogger pemula saya sangat sarankan belajar Tutorial Blogging di Blognya Kang Rohman .. di situ juga banyak Blogger-blogger Senior yang OnLine di Shoutmix-nya.. kamu bisa bertanya langsung disana (komunikasi 2 arah yang aktif menurut saya)..
Baiklah kembali ke topik semula... 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.. Paham ya .. Daftar isi yang saya buat ini terinspirasi dari Daftar isi yang ada di blognya Kang Rohman..
..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.. Paham ya.. ini Contoh Daftar isi Otomatis -> www.bloggertricks.com .. ini pernah saya lihat di tempat sahabat Mas Doyok..
..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 :
1. Loginlah dulu di Blogger > > Tata letak > Elemen Halaman.. Klik tambah Gadget > HTML/Java Scripts.. Buatlah Namanya Gadget-nya misalnya Daftar isi Blog..
2. Copy-paste kode dibawah ini ke dalam gadget tadi..
..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 :
1. Loginlah dulu di Blogger > > Tata letak > Elemen Halaman.. Klik tambah Gadget > HTML/Java Scripts.. Buatlah Namanya Gadget-nya misalnya Daftar isi Blog..
2. Copy-paste kode dibawah ini ke dalam gadget tadi..
<div style="border: 0px solid rgb(153, 153, 153);
overflow: auto;
width: 500px;
height: 150px;
text-align: left; ">
<img src="http://i466.photobucket.com/albums/rr22/wong284/star_Blink.gif"/><a href="http://ecaknyo.blogspot.com/2009/09/linkwithin-widget-mini-yang-praktis.html"> LinkWithin...WidGet Mini yang Praktis MenampiLkan Cuplikan Postingan!!!</a>
<br/>
<img src="http://i466.photobucket.com/albums/rr22/wong284/star_Blink.gif"/><a href="http://ecaknyo.blogspot.com/2009/09/ganti-emo-box-shoutmix-di-blog-simple.html"> GanTi eMO box Shoutmix di BLoG.. SimPLe Bgt</a>
<br/>
<img src="http://i466.photobucket.com/albums/rr22/wong284/star_Blink.gif"/><a href="http://ecaknyo.blogspot.com/2009/10/cara-membuat-blogroll-scrolling_04.html"> Cara MemBuaT BLogRoLL ScroLLing Otomatis dan yang ManuaL...</a>
<br/>
<img src="http://i466.photobucket.com/albums/rr22/wong284/star_Blink.gif"/><a href="http://ecaknyo.blogspot.com/2009/10/bagi-sobat2-blogger-yang-blognya-ber.html"> Cara PaSanG JaM & KaLenDeR iSLaMi aL-HaBib di BLoG</a>
<br/>
</div>
overflow: auto;
width: 500px;
height: 150px;
text-align: left; ">
<img src="http://i466.photobucket.com/albums/rr22/wong284/star_Blink.gif"/><a href="http://ecaknyo.blogspot.com/2009/09/linkwithin-widget-mini-yang-praktis.html"> LinkWithin...WidGet Mini yang Praktis MenampiLkan Cuplikan Postingan!!!</a>
<br/>
<img src="http://i466.photobucket.com/albums/rr22/wong284/star_Blink.gif"/><a href="http://ecaknyo.blogspot.com/2009/09/ganti-emo-box-shoutmix-di-blog-simple.html"> GanTi eMO box Shoutmix di BLoG.. SimPLe Bgt</a>
<br/>
<img src="http://i466.photobucket.com/albums/rr22/wong284/star_Blink.gif"/><a href="http://ecaknyo.blogspot.com/2009/10/cara-membuat-blogroll-scrolling_04.html"> Cara MemBuaT BLogRoLL ScroLLing Otomatis dan yang ManuaL...</a>
<br/>
<img src="http://i466.photobucket.com/albums/rr22/wong284/star_Blink.gif"/><a href="http://ecaknyo.blogspot.com/2009/10/bagi-sobat2-blogger-yang-blognya-ber.html"> Cara PaSanG JaM & KaLenDeR iSLaMi aL-HaBib di BLoG</a>
<br/>
</div>
3. Dari kode itu.. gantilah kode scripts berikut ini ;
- <img src="http://i466.photobucket.com/albums/rr22/wong284/star_Blink.gif"/><a href="http://ecaknyo.blogspot.com/2009/09/linkwithin-widget-mini-yang-praktis.html"> LinkWithin...WidGet Mini yang Praktis MenampiLkan Cuplikan Postingan!!!</a>
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; "> = Mengatur posisi text widget ini / daftar isi ..ganti dengan Center jika mau di tengah-tengah..
4. Jika selesai semua kamu membuat daftarnya dan mengeditnya.. silahkan di simpan widget daftar isi-nya dan tempatkan di tempat yang strategis..
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; "> = Mengatur posisi text widget ini / daftar isi ..ganti dengan Center jika mau di tengah-tengah..
4. Jika selesai semua kamu membuat daftarnya dan mengeditnya.. silahkan di simpan widget daftar isi-nya dan tempatkan di tempat yang strategis..
Tidak ada komentar:
Posting Komentar