Related post dengan thumbnail

Assalamualaikum!~

Apa itu related post dengan thumbnail?

Kalau sebelum ini, kita buat tutorial related post tanpa scrollbox dan related post dengan scrollbox kan. Dan yang dikatakan thumbnail nie, sebab related post ini lebih dalam bentuk gambar macam dalam pic di atas, atau lebih mudah cakap, macam linkwithin cuma related post thumbnail ne korang boleh letak banyak dari linkwithin yang hanya terhad kepada 4 sahaja.

1. Dashboard > Design > Edit html > Tick widgte expand.

2. Cari code dibawah ini

</head>

3. Kemudian, copy dibawah ini

 <!--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/AVvXsEjKFcWlgkH4R5oj9ffqCRaejcCYdKUU6Mp5BOmnDOne8PkU3yhas11poPebkS_1pAgrHCwusS0nqinmTFhXAUFhyphenhyphenCa439hZrtpqHL8y-j2-cJfRzpGJAbhbTg59LO_zb-9qtg975UlDDk8/s400/noimage.png";
var maxresults=5;
var splittercolor="#d4eaf2";
var relatedpoststitle="Related Posts";
</script>
<script src='http://infonetmu.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-->

4. Pastekan code tersebut di atas/sebelum </head>

5. cari pula code ini.

 <data:post.body/>

6. Copy code dibawah ini dan pastekan selepas/bawah  <data:post.body/>

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

7. Preview, pastikan tiada error baru save.

merah : gantikan ikut citarasa anda.