Untuk membuat daftar isi per label dengan scroll box di sidebar blog, kita dapat menggunakan dua cara. Cara yang pertama adalah dengan membuatnya secara manual. Sedangkan cara yang kedua kita bisa menggunakan sebuah script. Setiap cara memiliki kelebihan dan kekurangannya masing-masing.
Bila kita membuat daftar isi secara manual, maka kita harus memasukkan link dari judul-judul posting satu per satu. Hal ini akan membutuhkan banyak waktu untuk mengerjakannya jika link judul posting yang harus dimasukkan sudah cukup banyak. Namun, dengan cara manual ini tidak begitu memperlambat loading blog.
Sedangkan jika kita menggunakan sebuah script, maka waktu yang diperlukan akan lebih singkat. Namun, pemasangan script ini berpotensi memperlambat loading blog. Script ini saya dapat dari Blog Viky dengan perubahan di bagian scroll box-nya. Dengan script ini kita dapat membuat daftar isi berdasarkan satu label saja atau beberapa label sekaligus. Script ini akan menempatkan posting terbaru pada urutan teratas.
Untuk membuat daftar isi berdasarkan satu label tertentu saja, silakan perhatikan langkah-langkahnya di bawah ini.
1. Setelah Sobat masuk di Blogger, klik Rancangan > Elemen Laman > Tambah Gadget. Kemudian pilih HTML/JavaScript.
2. Berikan judul, lalu copy kode di bawah ini dan paste di Konten.
<div style="overflow:auto; width:auto; height:100px; padding:5px; border:1px solid #e6e4e3;">
<ol>
<script style="text/javascript">
var numposts = 100;
var standardstyling = true;
</script>
<script type='text/javascript' src='http://mr-form.googlecode.com/files/label-post.js'></script>
<ol>
<script src="http://www.klikmunadi.blogspot.com/feeds/posts/default/-/Jejaring%20Sosial?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
</ol>
</ol></div>
- width:auto; menunjukkan lebar scroll box akan mengikuti lebar sidebar.
- height:100px; menunjukkan tinggi scroll box setinggi 100 piksel. Silakan diganti angkanya untuk mengubah tingginya.
- border:1px solid #e6e4e3; menunjukkan garis keliling (border) scroll box bergaya solid setebal 1 piksel berwarna #e6e4e3. Silakan disesuaikan dengan keadaan template Sobat.
- <ol> menunjukkan numbered list, kalau ingin menjadi bullet list silakan diganti dengan <ul>.
- Ganti klikmunadi.blogspot.com dengan alamat blog Sobat.
- Ganti Jejaring%20Sosial dengan label yang Sobat inginkan. Penulisan label harus sesuai dengan yang tertera di blog. Perhatikan huruf besar-kecilnya dan spasi diganti dengan %20.
4. Pindahkan elemen tadi ke tempat yang Sobat inginkan.
5. Klik tombol SIMPAN.
Script di atas hasilnya akan menjadi seperti di bawah ini.
Jika ingin menampilkan lebih dari satu label, silakan ditambahkan script untuk labelnya. Misalnya saya akan menampilkan label Alexa dan Link maka script-nya akan menjadi seperti di bawah ini.
<div style="overflow:auto; width:auto; height:100px; padding:5px; border:1px solid #e6e4e3;">
<ol>
<script style="text/javascript">
var numposts = 100;
var standardstyling = true;
</script>
<script type='text/javascript' src='http://mr-form.googlecode.com/files/label-post.js'></script>
<h3>Alexa</h3>
<ol>
<script src="http://www.klikmunadi.blogspot.com/feeds/posts/default/-/Alexa?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
</ol>
<br/>
<h3>Link</h3>
<br/>
<h3>Link</h3>
<ol>
<script src="http://www.klikmunadi.blogspot.com/feeds/posts/default/-/Link?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
</ol>
</ol></div>
Hasilnya menjadi seperti di bawah ini.
Alexa
Link
Cara di atas merupakan cara yang menggunakan script. Jika Sobat tertarik untuk menggunakan cara manual seperti yang saya terapkan pada blog ini, silakan simak langkah-langkahnya di bawah ini. Sebelum mengikuti cara ini, silakan Sobat memasang widget daftar isi karya Abu Farhan seperti yang terpasang di blog ini.
1. Buka daftar isi blog Sobat.
2. Blok posting-posting dari label mana yang akan di ambil. Misalnya saya mengambil label Jejaring Sosial juga seperti contoh menggunakan script. Setelah diblok, lalu klik kanan dan pilih Lihat Kode Sumber Teks yang Dipilih. (Saya menggunakan Firefox 5.0)
3. Copy semua teks yang muncul di jendela Sumber DOM yang Dipilih.
4. Masuk ke akun Blogger Sobat.
5. Klik Rancangan > Elemen Laman > Tambah Gadget.
6. Pilih HTML/JavaScript.
7. Beri judul, paste kode tadi di Konten. Silakan diedit dan hapus kata-kata yang tidak diperlukan (seperti kata "New" dan lain-lain) sehingga susunannya akan menjadi seperti di bawah ini.
<ol><li><a href="http://klikmunadi.blogspot.com/2011/06/cara-buat-facebook-page-dan-pasang-like.html">Cara Buat Facebook Page dan Pasang Like Box di Blog</a></li>
<li><a href="http://klikmunadi.blogspot.com/2011/05/cara-membuat-akun-facebook.html">Cara Membuat Akun Facebook</a></li>
<li><a href="http://klikmunadi.blogspot.com/2011/06/cara-membuat-akun-twitter.html">Cara Membuat Akun Twitter</a></li>
<li><a href="http://klikmunadi.blogspot.com/2011/06/cara-membuat-akun-di-salingsapacom.html">Cara Membuat Akun di SalingSapa.com</a></li>
<li><a href="http://klikmunadi.blogspot.com/2011/07/cara-menghapus-sebuah-halaman-facebook.html">Cara Menghapus Sebuah Halaman Facebook</a></li>
<li><a href="http://klikmunadi.blogspot.com/2011/02/salingsapacom-situs-jejaring-sosial.html">Salingsapa.com, Situs Jejaring Sosial Islami</a></li></ol>
8. Kemudian berikan kode untuk scroll box-nya, sehingga hasilnya akan menjadi seperti ini.
<div style="overflow:auto; width:auto; height:100px; padding:5px; border:1px solid #e6e4e3;">
<ol><li><a href="http://klikmunadi.blogspot.com/2011/06/cara-buat-facebook-page-dan-pasang-like.html">Cara Buat Facebook Page dan Pasang Like Box di Blog</a></li><li><a href="http://klikmunadi.blogspot.com/2011/05/cara-membuat-akun-facebook.html">Cara Membuat Akun Facebook</a></li>
<li><a href="http://klikmunadi.blogspot.com/2011/06/cara-membuat-akun-twitter.html">Cara Membuat Akun Twitter</a></li>
<li><a href="http://klikmunadi.blogspot.com/2011/06/cara-membuat-akun-di-salingsapacom.html">Cara Membuat Akun di SalingSapa.com</a></li>
<li><a href="http://klikmunadi.blogspot.com/2011/07/cara-menghapus-sebuah-halaman-facebook.html">Cara Menghapus Sebuah Halaman Facebook</a></li>
<li><a href="http://klikmunadi.blogspot.com/2011/02/salingsapacom-situs-jejaring-sosial.html">Salingsapa.com, Situs Jejaring Sosial Islami</a></li></ol>
</div>
9. Klik tombol SIMPAN.
10. Pindahkan elemen ke tempat yang Sobat inginkan.
11. Klik tombol SIMPAN.
Hasilnya menjadi seperti di bawah ini.
saya lebih suka daftar isi yg otomatis, tapi agak berat loadingnya
ReplyDelete@blogging iya gan, mang jadi lebih berat loadingnya bila pakai script.
ReplyDeleteahhh akhirnya ketemu jg nie kang sama tutorial akang tntng ini..saya mau lngsng buat ni kang..mksh kang,,sukses slalu
ReplyDeletekang saya sudah bisa buatnya,pakai cara kedua,,tapi kata2 new tidak saya hapus kang supaya pengunjung blog saya tahu postingan mana saja yg masih baru,,,mksh kang buat ilmunya...saya akan slalu berkunjung kesini,,bnyk yg mw sya pljri..
ReplyDeletewahh...hebat mas...thx y...
ReplyDeletetrimksih informasinya.. sangat berguna. ditunggu kunjungan baliknya di blog kabar pendidikan… http://kabar-pendidikan.blogspot.com
ReplyDeleteTrimakasih ilmunya bos,mantap dan bermanfaat buat newbie seperti saya..
ReplyDeletemantaaaaaap munadi buat newbie kayaq ane sob... hehehe...izin buat semuanya sob teeeeeeeeeeeeesting....
ReplyDeleteArtikel bagus. Udah saya terapkan di blog saya
ReplyDeleteKang gimana sript supaya tampil berurutan secara abjad dan bukan berurutan berdasarkan postingan terbaru?
ReplyDeleteTerima kasih. Saya sangat terbantu.
ReplyDeleteIni blog saya : http://shoganband.blogspot.com/
Jika saudara mau mengkritik blog saya yang telah mendapatkan ilmu dari saudara, saya ucapkan terima kasih.
Owalah Daftar isi utk Blog toh...
ReplyDeletekirain utk Word
makasih mas bro
ReplyDeleteTerima kasih buat informasi yang satu ini :)
ReplyDeleteSemoga artikelnya bermanfaat bagi blogger lainnya.
disave
Sekalian Tukaran Link ya :)
Salam Persahabatan.
makasih gan tipsnya,,,
ReplyDeletesangat berguna,,,
mampir juga yah ke blog saya,,,,
ketemu juga ama yang dicari-cari,.
ReplyDeleteterima kasih mas mun,.
^^
Terima kasih banyak yah buat semuanya yang udah berkunjung dan meluangkan waktu buat berkomentar di sini..
ReplyDeleteTerima kasih Gan, informasinya sangat bermanfaat, salam sukses.
ReplyDelete@. Iya, sama-sama Gan..
ReplyDelete@. Iya, sama-sama Gan..
ReplyDeletethanks sudah berbagi ilmunya, sukses selalu....
ReplyDelete@Mang uem sama-sama ya dan terima kasih atas doanya..
ReplyDeleteAskum kak,, blog nya bagus...
ReplyDeletecuman ada dikit kendala nich, untuk font-size kok gak ada jadi nya gak bisa ubah ukuran huruf..?? klo blh request minta Arial font-size 11px
thanks kak..
jagan lupa kunjungan balik ke blog aq http://uphilunyue.blogspot.com
bermanfaat...
ReplyDeletemakasih ya..
saya berhasil....
http://manarukho.blogspot.com/2012/12/boarding.html
thx..
Post a Comment