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://www.terjorok.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..."


--------------------------------------------------
NB:
-. Agar gambar dapat tampil pada related post, maka postingan teman2 harus terdapat gambar yang di-upload melalui blogger langsung, bukan gambar yang dipasang dengan menggunakan kode script.

-. Sebelum menggunakan trik ini, teman2 harus mensetting label setiap postingannya teman2. berhubung trik ini bekerja dengan sistem melacak label/kategori semisal.

-. Teman2 gak perlu khawatir trik ini gagal, adanya related post thumbnails pada blog ini menandakan trik ini berhasil dan bisa digunakan, asal sesuai instruksi.

--------------------------------------------------

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 []

Tags: cara membuat related posts thumbnails, related post dengan gambar, membuat postingan terkait bergambar, edit template postingan terkait, cara mudah membuat related post, postingan berhubungan bergambar