Membuat Artikel Terkait Dengan Thumbnail Di Blogspot

Artikel-artikel pada sebuah blog akan lebih disukai jika memiliki kategori atau label yang jelas. Contohnya blog yang sedang anda lihat sekarang ini (hehehe), walaupun blog "Dunia Dalam Blogger" ini merupakan blog gado-gado alias memiliki artikel dengan topik yang berbeda-beda, tetapi kategorinya jelas dan dapat dipilih pada menu samping (sidebar) bagian Categories, contohnya apakah ingin melihat artikel-artikel yang termasuk kategori Review Film, atau kategori SEO, dan seterusnya.

Selain itu, alangkah baiknya pada setiap postingan atau artikel, pada bagian bawah terdapat artikel terkait atau istilah bulenya: related post, postingan yang tampil pada artikel terkait tentu memiliki kategori yang sama dengan artikel yang sedang dibaca sehingga pembaca artikel tersebut dapat diarahkan pada artikel-artikel sejenis.

Pada artikel ini akan dijelaskan cara untuk membuat artikel terkait di blogspot.com. Salah satu keistimewaannya lagi, trik artikel terkait ini menampilkan thumbnail yang diambil dari gambar pada artikel anda, tetapi jika tidak ada gambar, akan ditampilkan gambar default yang juga menarik.

Langkah-langkahnya adalah sebagai berikut:

1. Arahkan browser ke blogger.com dan login dengan username dan password anda.
2. Pilih blog anda, lalu pilih Template.
3. Pilih Edit HTML.
4. Akan tampil kode HTML blog anda, klik kotak di dalam kode HTML tersebut untuk memastikan cursor mouse berada di dalamnya.
5. Tekan CTRL + F untuk mencari kata, dan ketik/cari kata: </head> lalu tekan Enter.
6. Cursor mouse akan mengarah pada lokasi </head>, di atas kode tersebut, copy paste script berikut:

<!--Start: Script Artikel Terkait-->
<!-- hapus kalau ingin tampil di homepage --><b:if cond='data:blog.pageType == &quot;item&quot;'>
<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: 18px;
letter-spacing: 2px;
font-weight: bold;
text-transform: none;
color: #5D5D5D;
font-family: Arial Narrow;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
border-right: 1px dotted #DDDDDD;
color:#5D5D5D;
}
#related-posts a:hover{
color:black;
background-color:#EDEDEF;
}
</style>
<script type='text/javascript'>
var defaultnoimage=&quot;http://ayoweb.com/images/gambar-default.jpg&quot;;
var maxresults=5;
var splittercolor=&quot;#DDDDDD&quot;;
var relatedpoststitle=&quot;Artikel Terkait:&quot;;
</script>
<script src='http://ayoweb.com/js/related-posts-with-big-thumbnails.js' type='text/javascript'/>
<!-- hapus kalau ingin tampil di homepage --></b:if>
<!--End: Script Artikel Terkait-->

7. Tekan CTRL + F (lagi) untuk mencari kata, dan ketik/cari kata:
<div class='post-footer'> Lalu tekan Enter dua kali.

8. Cursor mouse akan mengarah pada lokasi <div class='post-footer'>, di atas kode tersebut, copy paste script berikut:

<!--Start: Script Artikel Terkait-->
<!-- hapus kalau ingin tampil di homepage --><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;'>
</b:if>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=5&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>
</div><div style='clear:both'/>
<!-- hapus kalau ingin tampil di homepage --></b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://duniadalamblogger.blogspot.com'><img alt='Blogger Tricks' src='http://ayoweb.com/images/best+blogger+tips.png'/></a>
</b:if></b:if>
<!--End: Script Artikel Terkait-->

9. Klik Save Template (atau Simpan Template jika blogger.com anda berbahasa Indonesia).

Selesai! Blog anda akan semakin keren dan memanjakan pembaca. :)