Membuat Artikel Terkait Horizontal dengan Thumbnail

Artikel Terkait Horizontal dengan Thumbnail - Sudah banyak blog yang membahas tentang Cara Membuat widget artikel terkait dan tentunya dengan membaca juduk artikel diatas pasti sudah sangat umum buat anda.
Tetapi ketika saya coba hampir semua tutorial diblog-blog lain widget artikel terkait tersebut akan berbentuk seperti artikel terkait punya blog ini di bawah.


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/AVvXsEjshqQ0W8qVipPcZOUIdT1U8RCbwFwmRSEC_bgGgRUXMwnMh6HOrnkQmTccICpwkCC4_oVXKgPsKIa6wSQoqZAPYDL1uB6-KA6QwPtPhoW0u76AkoBDu4-FyxrlWqMNurBeK8-k5ByE0Yc/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

Demikian tutorial singkat saya tentang Cara Membuat Artikel Terkait Horizontal dengan Thumbnail.
Semoga bermanfaat !!!