Untuk memudahkan pencarian artikel pada situs personal, seorang blogger biasanya memasang kotak pencarian dan menu navigation. Menu navigasi sendiri umumnya berdasarkan label tertentu. Ketika sebuah menu di klik, maka seluruh artikel dengan category tersebut akan ditampilkan.
Kelemahan sistem navigasi ini adalah pembaca langsung disuguhkan artikel yang cukup banyak. Padahal visitor belum tentu ingin membaca tulisan tersebut. Salah satu cara memberi kebebasan kepada para pengunjung adalah dengan menyediakan sitemap atau daftar isi.
Sebenarnya pihak blogspot sudah menyediakan widget archive untuk melihat-lihat kumpulan artikel. Sayangnya arsip yang ada hanya terbaca pada versi desktop. Sedangkan pada versi mobile tidak ditampilkan. Salah satu cara agar arsip bisa terbaca pada versi mobile khususnya pengguna operamini adalah dengan meletakkannya pada laman mandiri (static page).
Agar bisa diterapkan pada laman mandiri, kita perlu memasang javascript khusus yang bertugas memanggil artikel pada blog kita. Caranya sangat mudah sekali karena kode yang akan kita pasang nggak lebih dari dua baris.
Berikut cara membuat sitemap (peta situs) pada statis page:
1. Login ke www.blogger.com
2. Klik laman - laman baru - laman kosong
3. Rubah mode compose ke html
4. Salin kode script dibawah ini
5. Rubah url hp-yitno.blogspot.com dengan alamat blog kalian
6. Publikasikan dan lihat hasilnya
Keterangan:
1. Kode diatas adalah menu daftar isi berdasarkan label. Hasilnya dapat anda lihat langsung pada situs ini.
2. Jika ingin menambahkan fungsi scroll, tambahkan kode overflow:auto; width:480px; height:450px; pada style css. Lebar dan tinggi bisa anda sesuaikan sendiri.
3. Jika ingin menggunakan variasi lain selain berdasarkan label, anda cukup merubah alamat JS-nya saja (http://coker.wen.ru/files/label.js)
Berikut alamat javascript yang bisa anda gunakan:
a. Berdasarkan tanggal postingan (archive)
url-nya adalah http://coker.wen.ru/files/archive.js
b. Berdasarkan artikel terbaru
url-nya adalah http://coker.wen.ru/files/date.js
Note:
Kelemahan fungsi scroll diatas adalah manakala dibuka dengan browser operamini, kumpulan artikel paling bawah nggak terlihat.
Kelemahan sistem navigasi ini adalah pembaca langsung disuguhkan artikel yang cukup banyak. Padahal visitor belum tentu ingin membaca tulisan tersebut. Salah satu cara memberi kebebasan kepada para pengunjung adalah dengan menyediakan sitemap atau daftar isi.
Sebenarnya pihak blogspot sudah menyediakan widget archive untuk melihat-lihat kumpulan artikel. Sayangnya arsip yang ada hanya terbaca pada versi desktop. Sedangkan pada versi mobile tidak ditampilkan. Salah satu cara agar arsip bisa terbaca pada versi mobile khususnya pengguna operamini adalah dengan meletakkannya pada laman mandiri (static page).
Agar bisa diterapkan pada laman mandiri, kita perlu memasang javascript khusus yang bertugas memanggil artikel pada blog kita. Caranya sangat mudah sekali karena kode yang akan kita pasang nggak lebih dari dua baris.
Berikut cara membuat sitemap (peta situs) pada statis page:
1. Login ke www.blogger.com
2. Klik laman - laman baru - laman kosong
3. Rubah mode compose ke html
4. Salin kode script dibawah ini
<div style="border:1px solid #eee; padding:7px;">
<script src="http://yourjavascript.com/01091781025/sitemap.js"></script>
<script src="http://hp-yitno.blogspot.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"></script>
</div>
<script src="http://yourjavascript.com/01091781025/sitemap.js"></script>
<script src="http://hp-yitno.blogspot.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"></script>
</div>
5. Rubah url hp-yitno.blogspot.com dengan alamat blog kalian
6. Publikasikan dan lihat hasilnya
Keterangan:
1. Kode diatas adalah menu daftar isi berdasarkan label. Hasilnya dapat anda lihat langsung pada situs ini.
2. Jika ingin menambahkan fungsi scroll, tambahkan kode overflow:auto; width:480px; height:450px; pada style css. Lebar dan tinggi bisa anda sesuaikan sendiri.
3. Jika ingin menggunakan variasi lain selain berdasarkan label, anda cukup merubah alamat JS-nya saja (http://coker.wen.ru/files/label.js)
Berikut alamat javascript yang bisa anda gunakan:
a. Berdasarkan tanggal postingan (archive)
url-nya adalah http://coker.wen.ru/files/archive.js
b. Berdasarkan artikel terbaru
url-nya adalah http://coker.wen.ru/files/date.js
Note:
Kelemahan fungsi scroll diatas adalah manakala dibuka dengan browser operamini, kumpulan artikel paling bawah nggak terlihat.
14 Komentar untuk "Membuat Daftar Isi Di Laman Mandiri"
Metode ini juga dipakai para senior blogger untuk mendongkrak pageview mereka. Berani menerapkan teknik ini pada situs kalian?
Ijin nyoba gan.. Sepertinya menarik nih untuk di terapkan
iyo om
aku juga baru kepikiran kalo pembaca banyak yang datang pake hape. suer belum pernah ngecek tampilan blog sendiri pake hape :D
terima kasih diingetin
Wah saya sudah pasang mas daftar isi di blog saya. Tapi saya pasang yang berdasarkan label. Terlihat mudah misal kita mau cari sesuatu kalau berdasarkan lebl :)
slmat mlm sob trmksih sob dah berbagi ilmu salam kenal sobat. aq tunggu kdatangan sobat ntar aq kasih kopi heheh
Alhamdulillah mas, saya sudah membuat daftar isi, nice share :)
tambah genk wae mas sob iki.. lanjuuuut
wah menarik nih, ppenting tapi simple . tutorialnya ga bikin puyeng hhe ,, mau cba ah :D
Langsung di Caplok deh......
Salam wisata
menarik mas,, saya udah pernah coba yang accordion.. kalau yang ini pernah juga tapi berdasarkan label..
daftar isi wajib dimiliki. Terimakasih.
Aq udah buat Mas :)
Saya sudah mencobanya tapi masih saja nggak bisa ya Mas. Kayaknya masalah di FEED nya.
hmmm....
bisa dijadikan sebagai tips dan digunakan pas ntar dibutuhkan....
1. Silakan buka Daftar Isi untuk melihat artikel menarik lainnya
2. Komentar sobat adalah investasi besar untuk meningkatkan jumlah pengunjung ke Blog Sobat