Membuat Daftar Isi Otomatis Berdasar Label Blogger (Blogspot)

Daftar artikel terkait di bawah halaman artikel blog/website berguna untuk navigasi halaman-halaman artikel terkait dengan halaman artikel yang sedang dibuka pembaca blog/website setelah selesai membaca seluruh isi artikel yang dibuka pembaca blog/website.

Daftar artikel terkait di bawah halaman artikel bertujuan untuk membuat betah pembaca pada blog/website yang dibuka sehingga pembaca blog/website tertarik untuk membuka halaman-halaman artikel lainnya yang terkait dengan halaman artikel yang sedang dibuka pembaca blog/website.

Daftar artikel terkait di bawah halaman artikel juga betujuan untuk menaikkan durasi waktu kunjungan rata-rata pembaca di blog sehingga hal tersebut juga turut menaikkan ranking halaman artikel blog/website pada mesin pencarian.

Selain itu, daftar artikel terkait di bawah halaman artikel juga dimaksudkan untuk menurunkan bounce rate (rasio pentalan) yaitu rasio dimana pengunjung blog/website langsung menutup halaman artikel yang telah dibaca tanpa membuka halaman-halaman lain pada blog/website yang dibukanya serta untuk menaikkan exit rate (rasio keluar) yaitu kebalikan dari bounce rate (rasio pentalan) dimana pengunjung blog/website membuka halaman-halaman lainnya pada blog sebelum menutup blog/website yang dibaca.

Berikut langkah-langkahnya :

1. Buka dashboard blogger (blogspot).
2. Pilih menu template.
3. Pilih edit html.
4. Letakkan kursor pada teks html.
5. Cari (tekan Ctrl + F) kode berikut :</head>
6. Masukkan kode css dan javascript di bawah ini sebelum kode </head> di atas.<b:if cond='data:blog.pageType == &quot;item&quot;'><style type='text/css'>#related-posts{float:center;text-transform:none;padding-top:0;padding-left:5px;margin-top:0}#related-posts .widget{padding-left:6px;margin-bottom:0}#related-posts .widget h2,#related-posts h2{font-size:17px;font-weight:normal;color:black;font-family:Arial Narrow;margin-bottom:.75em;padding-top:0}#related-posts a{font-size:16px;color:#555;font-variant:small-caps}#related-posts a:hover{text-decoration:none;color:#fff;font-weight:bold}#related-posts ul{list-style-type:none;margin:0;padding:0;text-decoration:none;text-color:#000}#related-posts ul li{list-style-type:none;border-left:2px solid #1399cf;border-bottom:1px dotted #1399cf;margin-bottom:3px;padding-left:30px;padding-top:0}#related-posts ul li:hover{background-color:#1399cf;border-left:2px solid #b3ca3d;border-bottom:1px dotted #b3ca3d}</style><script type='text/javascript'>var relatedpoststitle=&quot;Bacaan Lainnya :&quot;;</script><script src='http://helplogger.googlecode.com/svn/trunk/related_posts.js' type='text/javascript'/></b:if> 
7. Sesuaikan judul daftar artikel terkait (kode berwarna kuning) dengan judul yang disukai, misalnya dengan kalimat "Mungkin Anda Suka :", dsj.
8. Kemudian cari lagi kode di bawah berikut :<b:includable id='post' var='post'>
9. Dan cari lagi di bawah kode di atas, kode berikut ini :<div class='post-footer'>
    <div class='post-footer-line post-footer-line-1'>

   Catatan : boleh pada footer line-2 ataupun line-3

10. Kemudian tambahkan kode berikut setelah kode di atas :<b:if cond='data:blog.pageType == &quot;item&quot;'><div id='related-posts'><b:loop values='data:post.labels' var='label'><b:if cond='data:label.isLast != &quot;true&quot;'/><script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=6&quot;' type='text/javascript'/></b:loop><script type='text/javascript'>var maxresults=3;removeRelatedDuplicates();printRelatedLabels(&quot;<data:post.url/>&quot;);</script></div></b:if>
11. Sesuaikan jumlah maksimal pencarian artikel terkait (kode warna merah : max-result=6) dan sesuaikan daftar artikel terkait yang ingin ditampilkan (kode warna biru : maxresult=3)
12. Klik simpan (save).
13. Bika halaman artikel blog/website.
14. Selesai.

Tweet

Subscribe to receive free email updates: