Cara Membuat Article Related with Tumbnail

Oke teman-teman, pa kabar?? hehe

moga baik' z amiin

sekarang ngapain ya?

Oy, membuat article terkait ya?

sebelumnya juga dah pernah saya bahas tentang membuat article related dan kali ini akan saya bahas lagi.lho koq dibahas lagi, kan udah? emang udah c, tapi kali ini ada bedanya.klo yang kemaren tuh hanya memunculkan judul postingan z. Yang sekarang akan saya share dapat menampilkan gambar tumbnail

langsung z ke caranya y

1. Login ke blogger

2. Tata letak

3. Edit HTML

4. Centang Expand Template Widget

5. Cari kode </head>

6. Letakkan kode berikut diatas kode tadi

<!--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://blogergadgets.googlecode.com/files/relatedthumbs21.js' type='text/javascript'/>

</b:if>

//visit raffaelducks.blogspot.com for more

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

7. Cari kode berikut ini

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

klo tidak ditemukan, coba kode yang satu ini

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

8. Apabila telah ketemu, silahkan masukkan kode berikut (copy-paste) dibawah kode tadi

<!-- 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://raffaelducks.blogspot.com/2010/11/cara-membuat-article-related-with.html' style='display:none;'>Related Posts with thumbnails for blogger</a><a href='http://raffaelducks.blogspot.com/' style='display:none;'>blogger tutorials</a>

<script type='text/javascript'>

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

var maxresults=5;

var relatedpoststitle="Related Posts";

removeRelatedDuplicates_thumbs();

printRelatedLabels_thumbs();

</script>

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

</b:if>

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

9. kelar deh, tinggal di save

yang berwarna merah dapat teman-teman ubah.

var maxresult=5 menampilkan hasil artikel terkai dalam batas maksimalnya 5

var relatedpoststitle="Related Posts"; = menampilkan judul Related Posts

untuk memodifikasinya, silahkan di ubah sekreatif mungkin

selamat mencoba dan bereksperimen.

Posted in: Tips Dan Trik Blogger