Cara membuat Related Post dengan gambar

Related post adalah list atau daftar judul artikel yang terkait atau berhubungan dengan artikel utama, kali ini saya akan sedikit membagikan ilmu bagaimana membuat Related Post terlihat berbeda dengan menggunakan thumbnail atau gambar.


    * Login ke Blogger.com

    * Kemudian Tata Letak

    * Pilih Edit HTML

    * Centang Expand Widget

    * Copas kode berikut diatas kode "</head>"

<!--Related Posts with thumbnails Start-->
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts {
float:center;
height:100%;
min-height:100%;
padding-top:10px;
padding-left:15px;
padding-right:15px;
}

#related-posts h2{
font-size: 1.3em;
color: black;
font-family: Arial;
margin-bottom: 0.75em;
}

#related-posts a{
color:black;
}

#related-posts a:hover {
background-color:#eeeeee;
}
</style>
<script type='text/javascript'>
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrdayQjvUyhq0DnsnxpMJDL-gqo0BU3XFSQWfXESXHh4b9QSLNVTi10uWWS61D9IVvAzifZ5xvTwGEEOdmfd7SkOcBq6zOXIdSwTfqAyxFeVjfXa5jiBOHZpJ3SWD_TLajWqrDw2tU5h_S/";
var maxresults=5;
var splittercolor="#cccccc";
var relatedpoststitle="You might also like:";
</script>
<script src='http://hermanblog.googlecode.com/files/related-posts-with-thumbnails-for-blogger.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails End-->


Lalu cari <p class='post-footer-line post-footer-line-1'/>
Kalau tidak ketemu coba cari post-footer-line
Letakkan kode berikut 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>
<!-- Related Posts with Thumbnails Code End-->

Seve Template.

Keterangan:
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrdayQjvUyhq0DnsnxpMJDL-gqo0BU3XFSQWfXESXHh4b9QSLNVTi10uWWS61D9IVvAzifZ5xvTwGEEOdmfd7SkOcBq6zOXIdSwTfqAyxFeVjfXa5jiBOHZpJ3SWD_TLajWqrDw2tU5h_S/" menunjukkan gambar yang muncul pada postingan yang tidak memiliki gambar. kalian bisa mengganti gambar tersebut dengan gambar lain.

var maxresults=5 menunjukkan jumlah postingan yang muncul pada related post. Silahkan atur jumlah postingan yang mau ditampilkan dengan mengganti angkanya.

var splittercolor="#cccccc" menunjukkan warna garis pemisah. Ganti cccccc dengan kode warna yang kalian inginkan.

var relatedpoststitle="You might also like:" menunjukkan judul related post. Ganti teks yang berwarna merah dengan judul yang Kalian inginkan.

Related Posts:

Tweet