Cara membuat Artikel Terkait dengan gambar diatas komentar

Hallo.. sobat creativeboy.., hemz udah lama kayaknya gak posting, kebetulan ada waktu ea ngeblog aja, ketimbang tidur, bagi we melakukan sesuatu yang positif itu lebih penting  apalagi tujuannya udah jelas baik, (berbagi/menshare ilmu pengetahuan).., wualah.. kok malah ceramah mas.., vie too.." >"_"< dikit!, Ok langsung ja kita mulai Cara Membuat Related Post Keren Dibawah Postingan, atau yang lebih sering disebut dengan Artikel terkait, namun yang berbeda disini adalah tampilannya yang disertai thumbnails yang elegan dipandang. Widget ini dari sisi tampilannya sangat mirip dengan widget LinkWithin yang banyak dipakai oleh para blogger. Bedanya, kita disini menggunakan widget yang telah dibuat oleh Aneesh dimana ia telah berbaik hati dengan menshare kode script related post hasil kresinya tersebut dibloggerpluggin.org. Kelebihan related post ini dengan widget link within menurut saya adalah tidak adanya backlink dari si-pembuatnya sehingga terkesan lebih professional apabila nantinya dipasang pada blog kita.  kira-kira scren shot nya sperti ini.. :

 

Suatu keuntungan bagi kita apabila memasang related post pada blog adalah dapat menambah page views yang dilakukan visitor pada sehingga dapat memperbesar kemungkinan klik Adsense yang terjadi. Oke, biar lebih jelasnya langsungsung saja kita praktik Membuat Related Post Seperti Link Within Dengan Thumbnails:

1. Pertama, masuk ke akun Blogger, buka Template > Edit HTML dan centang "Expand Widget Templates" 
2. Cari kode  </head>   dengan CTRL+F
3. Ganti tersebut dengan kode berikut 

<!--Related Posts with thumbnails Scripts and Styles Start-->
<!-- remove --><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: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, &#8220;Times New Roman&#8221;, 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="http://1.bp.blogspot.com/_u4gySN2ZgqE/SosvnavWq0I/AAAAAAAAArk/yL95WlyTqr0/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-->
</head>

4. lalu cari kode ini.. 

<div class='post-footer-line post-footer-line-1'>

5. Bila nggak ketemu maka cari kode ini. 

<p class='post-footer-line post-footer-line-1'>

6. Apabila salah satu kode diatas ketemu maka tingga copas kode berikut tepat dibawahnya. 

<!-- Related Posts with Thumbnails Code Start-->
<!-- remove --><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=6&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'/>
<!-- remove --></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>
<!-- Related Posts with Thumbnails Code End-->

7. Klik SAVE
8. Untuk mengatur jumlah kotak yang ditampilkan kita ubah value dari kode berikut. 

var maxresults=5;

9. Untuk mengubah jumlah post yang ditampilkan tiap label kita harus mengubah kode berikut. 

max-results=6

10. Untuk mengubah title "Related Post" maka editlah kode berikut. 

var relatedpoststitle="Related Posts";

11. Untuk mengubah warna splitter/pembatas ubahlah kode berikut. 

var splittercolor="#d4eaf2";

12. Untuk mengganti tampilan gambar kosong bisa mengubah URL dari kode berikut. 

var defaultnoimage="http://1.bp.blogspot.com/_u4gySN2ZgqE/SosvnavWq0I/AAAAAAAAArk/yL95WlyTqr0/s400/noimage.png";

 

Selesai, selamat mencooba, moga anda berhasil, lo masih kurang jelas silahkan tinggalkan komentar anda!