Membuat Related Post Disertai Gambar/Thumbnails

Membuat Related Post Disertai Gambar/Thumbnails: "Di postingan yang lalu2 kita telah membahas bagaimana Cara membuat Related Post. Teman2 pasti sudah pada tahukan apa itu related post, yapz benar yaitu postingan yg berhubungan. Beda tutorial sekarang dengan yg sebelumnya terletak pada aksesoris berupa gambar tampilan dari postingan yg berhubungan atau biasa juga kita sebut dengan thumbnails. Tentu dengan adanya tampilan gambar ini akan membuat related post-nya teman2 lebih menarik. Agar gak kelamaan seperti biasa..

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 teman2 yang mungkin merasa trik di atas merepotkan alias agak rumit, maka teman2 juga bisa menggunakan jasa pembuatan related post secara otomatis yang telah disediakan oleh website yang bernama LinkWithin.com, tentu caranya lebih simple daripada cara di atas. Teman2 cukup mengisi beberapa form untuk memualai 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 tman2

dah dulu yaaa....





Semoga Bermanfaat []

"