Cara memasang Related Posts dengan gmbar thumbnail di setiap akhir artikel blog di Blogger Blogspot
Apa itu Related Posts
Related Posts atau Artikel Terkait adalah plugin atau widget yang akan menampilkan tulisan-tulisan yang berhubungan dengan tulisan yang sedang dibaca.
Apa maksud Related Post dengan Gambar?
Related Post yang mengandung gambar di atas setiap artikel.
Contohnya seperti apa?
Lihat gambar berikut:
Apa tujuannya?
1. Agar pengunjung betah berlama-lama di blog kita.
2. Agar artikel lama dapat diindex lagi oleh Google sehingga menambah SEO.
Bagaimana caranya?
Pertama, masuk ke blogger.com -> Rancangan -> Edit HTML -> kasih tanda tik pada Expand Widget Template
Kedua, letakkan kode berikut 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/AVvXsEgix4yuAIN2TKMtrr3O-8533lHlrgJ5titivWwz7BlgK0VTS8u4IT31tgUiS04_2bu2P33Leqh5670qk_iFBM1J_q8n_b2jrguUDb5Uug3I5LqrholU40T7W3QPVBLw5RTpsUDb0FOQTRQ/s400/noimage.png";
var maxresults=5;
var splittercolor="#d4eaf2";
var relatedpoststitle="Related Posts";
</script>
<script src='http://blogergadgets.googlecode.com/files/related-posts-with-thumbnails-for-blogger-pro.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->
Ketiga, cari kode ini: <!-- 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/AVvXsEgix4yuAIN2TKMtrr3O-8533lHlrgJ5titivWwz7BlgK0VTS8u4IT31tgUiS04_2bu2P33Leqh5670qk_iFBM1J_q8n_b2jrguUDb5Uug3I5LqrholU40T7W3QPVBLw5RTpsUDb0FOQTRQ/s400/noimage.png";
var maxresults=5;
var splittercolor="#d4eaf2";
var relatedpoststitle="Related Posts";
</script>
<script src='http://blogergadgets.googlecode.com/files/related-posts-with-thumbnails-for-blogger-pro.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->
<div class='post-footer-line post-footer-line-1'>
Tambahkan kode berikut persis setelah atau di bawahnya kode di atas:
<!-- 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>
</b:loop></div><div style="clear: both;"><!-- remove -->
<b:if cond="data:blog.url == data:blog.homepageUrl"><b:if cond="data:post.isFirstPost">
<a href="http://www.alkhoirot.net/2011/05/related-posts-dengan-gambar.html"><img style="border: 0pt none;" alt="Related Posts Widget For Blogger with Thumbnails" src="http://image.bloggerplugins.org/blogger-widgets.png"></a><a href="http://www.alkhoirot.net/"><img style="border: 0pt none;" alt="Blogger Tutorial" src="http://image.bloggerplugins.org/blogger-templates.png"></a>
</b:if></b:if>
<!-- Related Posts with Thumbnails Code End-->
</div></b:if>
<!-- 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>
</b:loop></div><div style="clear: both;"><!-- remove -->
<b:if cond="data:blog.url == data:blog.homepageUrl"><b:if cond="data:post.isFirstPost">
<a href="http://www.alkhoirot.net/2011/05/related-posts-dengan-gambar.html"><img style="border: 0pt none;" alt="Related Posts Widget For Blogger with Thumbnails" src="http://image.bloggerplugins.org/blogger-widgets.png"></a><a href="http://www.alkhoirot.net/"><img style="border: 0pt none;" alt="Blogger Tutorial" src="http://image.bloggerplugins.org/blogger-templates.png"></a>
</b:if></b:if>
<!-- Related Posts with Thumbnails Code End-->
</div></b:if>
Keempat, klik Simpan Template. Selesai.
Ok, terima kasih. Oh ya, siapa pencipta kode hack ini?
Pemilik Bloggerplugins.com.
Lihat linknya di sini: http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html
