Cara membuat Artikel Terkait Dengan Gambar/Thumbnails

Setelah pada postingan sebelumnya saya membahas bagaimana caraMembuat Artikel Terkait Dengan Fungsi Scroll, pada postingan saya akan membahas cara membuat artikel terkait dengan gambar.

Baiklah tanpa panjang lebar langsung saja kita mulai tutorial ini.
1. Masuk ke akun blogger sobat
2. Klik design kemudian edit HTML
3. Centang kotak kecil di kanan atas Expand Widget Templates
4. Untuk menghindari kesalahan sebaiknya download full template dulu
5. Setelah itu letakkan kode berikut di atas </head>

<!--Related Posts with thumbnails Scripts and Styles Start-->

<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 src='http://belajarblogging.googlecode.com/files/releatedimage.js' type='text/javascript'/>

</b:if>

<!--Related Posts with thumbnails Scripts and Styles End-->

Kalau sudah, cari kode berikut

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

Dan letakkan kode di bawah ini di BAWAH kode di atas

<!-- Related Posts with Thumbnails Code Start-->

<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>

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<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:if></b:loop><a href='http://bloggerbiasa.blogspot.com/2011/01/cara-membuat-artikel-terkait-dengan.html' style='display:none;'>Related Posts with thumbnails for blogger</a><a href='http://www.bloggerplugins.org/' style='display:none;'>blogger widgets</a>

<script type='text/javascript'>

var currentposturl=&quot;<data:post.url/>&quot;;

var maxresults=5;

var relatedpoststitle="Artikel Terkait";

removeRelatedDuplicates_thumbs();

printRelatedLabels_thumbs();

</script>

</div><div style='clear:both'/>

</b:if>

<!-- Related Posts with Thumbnails Code End-->

Simpan dan lihat hasilnya.

Semoga bermanfaat.
Alhamdulillah...

Artikel Terkait: