Cara Membuat Artikel Terkait Horizontal dengan Thumbnail

Cara Membuat Artikel Terkait Horizontal dengan Thumbnail.
Biar lebih jelas liat di bawah

Widget otomatis seperti dari LinkWithin , karena  Widget artikel terkait LinkWithin tersebut ternyata Redirect terlebih dahulu dari situs LinkWithin sebelum di arahkan ke artikel kita lainnya, dan lebih gak enaknya lagi Link tersebut nempel di blog kita DOFOLLOW, pasti cukup berpengaruh pada blog.

Nah langsung ke topik utamanya aja deh Membuat Artikel Terkait Horizontal dengan Thumbnail
Disini kita hanya memerlukan sedikit langkah otak-atik HTML
1. Jelas login ke blog
2. Rancangan - Edit HTML
3. Centang "Expand Template Widget"
4. Cari kode <data:post.body/> agar lebih mudah gunakan CTRL+F
5. Copy kode berikut tepat di 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>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://www.blogdhika.com/2012/01/artikel-terkait-horizontal-dengan.html'><img alt='Cara membuat Artikel terkait dengan Thumbnail' src='http://image.bloggerplugins.org/blogger-widgets.png' style='border: 0'/></a>
</b:if></b:if>
<!-- Related Posts with Thumbnails Code End-->

6. Kalau sudah cari lagi kode </head>
7. Copy kode berikut tepat diatas kode </head>,

 <!--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 h4{
font-weight: bold;
color: black;
font:normal 14px Arial;text-transform:none;
margin:0px;letter-spacing:.01em;line-height: 1.2em;color:#666;
}
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=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirEUqPd1DxyswoaoxEngdoJDBt2jeOKrFIxeDB6DtgAqKllV8camAh-hEjhJy0jZPtdAaj5DAmjTVm9KDKA3MkRa2WEYbFmQ4F3CqY5d5hqMCEp0Z5Y-Isq455j-A6fz1kl70mo3VsBKg/s400/noimage.png&quot;;
var maxresults=6;
var splittercolor=&quot;#d4eaf2&quot;;
var relatedpoststitle=&quot;Artikel Lainnya&quot;;
</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-->

CATATAN : Kode diatas inilah yang mempengaruhi tampilan Artikel Terkait Horizontal dengan Thumbnail di blog anda, bisa anda ganti sesuai keinginan anda
Artikel Lainnya : Judul pada widget
var maxresults=6: Jumlah artikel yang di tampilkan

Sumber