Cara Membuat Related Post Halaman Artikel

Hallo para blogger...
Hari ini, saya mencoba untuk memposting tentang cara membuat related post tanpa menggunakan Linkwithin, atau bisa dijadikan sebagai alternatif lain dari widget yang ada.

Pertama saya menemukan cara membuat related post ini, dari o-om.com. Akan tetapi ada sedikit error dimana terdapat perubahan source java script yang disediakan oleh google untuk menunjang jalannya related post ini.

Disini saya akan coba memposting ulang keseluruhan script yang sudah saya perbaiki dan jalan 100%. Kebetulan saya perkuat lagi source ini dari pembuatnya langsung yaitu Aneesh.

Tampilan dari realted post ini tidak jauh beda sama widget link within, contoh nya seperti dibawah ini:

Kalau anda tertarik untuk mencoba nya, berikut dibawah ini script yang harus disisipkan dalam template.

1. Masuk ke blogger akun anda, pilih bagian Template dan pilih Edit HTML.

2. Jangan lupa klik "Expand Widget Templates" sebelum melakukan pencarian

3. Cari kode berikut ini

Ganti dengan kode berikut ini:

<b:if cond='data:blog.pageType == "item"'>
<style type="text/css">
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}

#related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, “Times New Roman”, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black;
}
#related-posts a:hover{
color:black;
}

#related-posts  a:hover {
background-color:#d4eaf2;
}
</style>
<script type='text/javascript'>
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhskMViEAMrL0BeqXxBrIkKjmyZlqkzfAFX_e3Vr0IN_jXhC71ivSCMKJPh0torYgL2W4p45JWmFPI4reKAAwWENMyWJ1T6ny32kLJyJ900_GePr7zinqb2mtavstdWcdp3jxv3U2t2rxM/s400/noimage.png";
var maxresults=5;
var splittercolor="#d4eaf2";
var relatedpoststitle="Related Posts";
</script>
<script src='http://bloggergadgets.googlecode.com/files/related_posts_with_thumbnails_min.js' type='text/javascript'/>
</b:if>

</head>

4. Kemudian cari kode seperti dibawah ini

Jika tidak menemukan code tersebut, cari kode ini

Setelah menemukan salahsatu kode diatas, sisipkan kode ini dibawahnya

<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"'>
</b:if>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6"' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs("<data:post.url/>");
</script>
</div>
<div style='clear:both'/>
</b:if> 
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html'><img style="border: 0" alt="Related Posts Widget For Blogger with Thumbnails" src="http://image.bloggerplugins.org/blogger-widgets.png" /></a><a href='http://bloggertemplates.bloggerplugins.org/' ><img style="border: 0" alt="Blogger Templates" src="http://image.bloggerplugins.org/blogger-templates.png" /></a>
</b:if></b:if>

5. Simpan dan lihat hasilnya

6. Untuk merubah jumlah tampilan related post, ubah kode berikut ini

7. Untuk menampilkan realted post di semua halaman dan bukan di halam posting saja,
hapus dua baris yang berawalan  didalam langkah ke 3 dan 4.

Baris ini

Dan ini

Selamat Mencoba dan semoga bermanfaat.

Sejauh ini kode tersebut berjalan dengan baik. Lihat hasilnya disini.