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 :
- Buka dashboard blogger (blogspot).
- Pilih menu template.
- Pilih edit html.
- Letakkan kursor pada teks html.
- Cari (tekan Ctrl + F) kode berikut :
</head> - Masukkan kode css dan javascript di bawah ini sebelum kode </head> di atas.
<b:if cond='data:blog.pageType == "item"'><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="Bacaan Lainnya :";</script><script src='http://helplogger.googlecode.com/svn/trunk/related_posts.js' type='text/javascript'/></b:if> - Sesuaikan judul daftar artikel terkait (kode berwarna kuning) dengan judul yang disukai, misalnya dengan kalimat "Mungkin Anda Suka :", dsj.
- Kemudian cari lagi kode di bawah berikut :
<b:includable id='post' var='post'> - 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
- Kemudian tambahkan kode berikut setelah kode di atas :
<b:if cond='data:blog.pageType == "item"'><div id='related-posts'><b:loop values='data:post.labels' var='label'><b:if cond='data:label.isLast != "true"'/><script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=6"' type='text/javascript'/></b:loop><script type='text/javascript'>var maxresults=3;removeRelatedDuplicates();printRelatedLabels("<data:post.url/>");</script></div></b:if> - 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)
- Klik simpan (save).
- Bika halaman artikel blog/website.
- Selesai.
