Pada beberapa waktu yang lalu, saya sudah memposting sebuah artikel tentang bagaimana cara membuat related post, tapi itu tanpa thumbnail atau cuplikan gambar postingan. Nah pada kesempatan ini saya ingin menshare tutorial tentang bagaimana cara membuat widget related post yang memiliki thumbnail. Sedangkan untuk mengetahui manfaat dan fungsi dari membuat related post di blog kita, silahkan baca di artikel sebelumnya
Cara membuat related post.
Sebenarnya untuk membuat sebuah widget related post dengan thumbnail tidak lah terlalu sulit. Sama halnya dengan membuat sebuah widget related post yang tanpa memiliki thumbnail dan hanya berupa link, kamu tinggal menyalin kode script yang sudah instant ke dalam pengeditan HTML template blogspot kamu. Itu saja.
Oke deh, kita langsung masuk ke menu
template, klik
edit HTML dan jangan lupa centang
Expand Template Widget. Kemudian gunakan
Control+F untuk menemukan kode
</head>.
Salin kode yang di bawah ini untuk diletakkan tepat di atas kode
</head>.
<!--Related Posts with thumbnails Scripts and Styles Start-->
<!-- remove --><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/AVvXsEgeeCt9NG_UZVSWDk9iRY-vcl5uyAKcbuI1h-Y6ah81PH1OlOqnHkJFRYZihpO4X48uSunG_ukAyNDr3-RIiVExiXOnRKR5oKMIsIGGCv00MMn9aAebolASF82IS6YiBbc0UiWzrpyTz58/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'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->
Berikutnya, cari kode script seperti yang ini
<div class='post-footer-line post-footer-line-1'> Salin juga kode yang ada di bawah untuk diletakkan tepat berada dibawah kode script
<div class='post-footer-line post-footer-line-1'>.
<!-- Related Posts with Thumbnails Code Start-->
<!-- remove --><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'/>
<!-- remove --></b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
</b:if></b:if>
<!-- Related Posts with Thumbnails Code End-->
Setelah itu, silahkan klik save untuk menyimpan hasil pengeditan tersebut. Sampai di sini,tahap pembuatan widget related post dengan thumbnail sudah selesai. Bila ingin melihatnya, silahkan menuju salah satu artikel yang telah dipublish dan yang memiliki Label, di mana label tersebut memiliki minimal dua atau lebih postingan. Dan di setiap artikel yang telah dipublish, memiliki minimal sebuah gambar.
Selanjutnya, bila kamu berkeinginan untuk mengubah Related Posts dengan kata Artikel Terkait, silahkan mengubah bagian script ini
var relatedpoststitle="Related Posts". Selamat mencoba !