Cara membuat related post dengan thumbnail

Related post biasanya terdapat pada halaman posting di blog,yang fungsinya sebagai perantara yang menghubungkan artikel yang memiliki keterkaitan.Dalam setting dasar/default blog related post ditunjukkan pada sisi sidebar di blog dan posisinya seperti daftar menu yang berbentuk vertikal ke bawah.Nah,sekarang ini related post dapat dibuat lebih menarik lagi,yaitu dengan thumbnail.Apa itu Thumbnail ?.Yang belum tahu pasti akan bertanya seperti itu.Ok,saya akan jelaskan ,jadi thumbnail adalah gambar preview artikel dan posisinya berada pada bagian bawah post.

Agar lebih jelas,coba lihat gambar di atas.

 

Lihat gambar yang di kolom merah itu,itulah yang namanya thumbnail

Untuk Cara Membuat Related Post Dengan Thumbnail Di Blog silahkan simak langah-langkahnya berikut ini :

1. Log in Blog

2. Pilih template > edit html

3. Pilih lanjutkan dan centang "expand widget"

4. Cari kode </head> agar lebih mudah tekan ctrl + F,copy kode dibawah ini tepat diatas 

    kode </head> 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: #585858;

font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;

margin-bottom: 0.75em;

margin-top: 0em;

padding-top: 0em;

}

#related-posts a{

color:#FFFFCC;

}

#related-posts a:hover{

color:#000000;

}

#related-posts a:hover {

background-color:#d4eaf2;

}

</style>

<script src='http://media2give.googlecode.com/files/relatedpostwiththumbnails2.js' type='text/javascript'/>

</b:if>

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

5. Kemudian cari kode seperti di bawah ini

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

atau yang ini :

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

6. Lalu copy kode di bawah ini dan paste dibawah salah satu kode di atas

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

<h3><b>Artikel yang terkait: </b></h3>

<div style='background:#444; border:1px solid #191919; border-bottom:1px solid #666; border-right:1px solid #666;margin: 0px auto; padding: 5px;width:98%;float:left;height:100%'>

<marquee align='center' behavior='alternate' direction='left' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='2' width='100%'>

<script type='text/javascript'>

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

var maxresults=6;

var relatedpoststitle=&quot;&quot;;

removeRelatedDuplicates_thumbs();

printRelatedLabels_thumbs();

</script></marquee>

<div style='border: 0px; padding: 5px; background-color: none; text-align: right; font-size:9px;'>Get this <a href='http://media2give.blogspot.com/2012/12/cara-membuat-related-post-dengan.html' target='_blank'>widget</a></div> 

</div>

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

</b:if>

<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>

</b:if>

</b:if>

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

Perhatikan tulisan Artikel Yang Terkait : ganti dengan tulisan sesuai keinginan anda

Dan angka 6 untuk menunjukan jumlah related post yang ditampilkan.