Membuat Related Post Disertai Gambar/Thumbnails

Kali ini saya akan mencoba untuk sahring cara membuat related post disertai gambar/thumbnails agar related post terlihat lebih menarik, adapun cara membuat related post tsb adalah sebagai berikut :

1. Silahkan login dulu ke aku bloggernya teman2 lalu pilih tata letak dan edit HTML

2. Letakkan kode berikut di atas kode tag </head>

<!--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://sites.google.com/site/t4belajarblogger/js_t4belajarblogger/postsemisalbergambar.js' type='text/javascript'/></b:if> <!--Related Posts with thumbnails Scripts and Styles End-->


3. Lalu cari kode

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


4. Kalau dah ketemu salah satu dari dua kode di atas, maka letakkan kode berikut di bawahnya

<!-- 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://t4belajarblogger.blogspot.com/2009/12/membuat-related-post-disertai.html' style='display:none;'>Related Posts with thumbnails for blogger</a><a href='http://www.bloggerplugins.org/' style='display:none;'>blogger widgets</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-->

5. Simpan hasil kerjaannya teman2

Bagi teman2 yang ingin mengatur jumlah post yg ingin ditampilkan dalam daftar related post, silahkan diatur jumlahnya pada bagian [var maxresults=5;]

Dan untuk tulisan related posts bisa juga diganti dengan kata2 sesuai keinginan tman2, untuk mengubahnya perhatikan pada bagian [var relatedpoststitle='Related Posts'; ], bisa diganti dengan kata2 seperti post semisal, postingan yg berhubungan, atau bisa juga 'baca juga artikel lain...'

Bagi sobat  yang mungkin merasa trik di atas agak rumit, maka sobat bisa menggunakan jasa pembuatan related post secara otomatis di LinkWithin.com, caranya lebih simple daripada cara di atas. sobat cukup mengisi beberapa form untuk memulai membuatnya, email, alamat blog, platform (ex: blogger, wordpress, dll), dan yg terakhir adalah lebarnya yg merupakan jumlah tampilan related post yg ingin ditampilkan, dan ini bertkisar mulai 3-5 tampilan. Silahkan untuk menyesuaikannya dengan lebar dinding postingan sobat
selamat mencoba.

sumber :t4belajablogger.