Cara Membuat Related Post Bergambar

Tidak sengaja BW ke sana kemari ketemu dengan Template yang berisi Related Post Bergambar (Artikel Terkait Bergambar) Pada bagian postingannya, saya pikir ini boleh juga buat bahan postingan Gue, biarpun mungkin sudah ada diposting sebelumnya oleh Blogger lain, apa salahnya bikin sendiri, buat blog bisa update postingan original gitu, heheheh,  udah tau belum maksudnya Judul diatas, tentunya sebagian udah tau bukan , klo yang belum tau Gue jelasin deh, itu lo, saat postingan kita di buka dan jika ada label yang sama dengan dengan label (kategory) yang pernah kita buat, maka disetiap bawah postingan akan tampil dengan Artikel lainnya dengan Category yang sama, ini hampir sama saja dengan membuat Artikel Terkait atau Related Post, hanya saja bedanya Artikel yang terkait ini akan berisi gambar seperti halnya kita menggunakan jasa luar seperti linkwithin yang umum dipakai oleh blogger, tapi sedikit berbeda dengan linkwithin karena linkwithin memakai system random post (atau artikel terkait secara acak), kali kita akan menggunakan kode script dari pengembang blogger sendiri, pada bagian bawah postingan akan terlihat Artikel Terkait (Related Post) berupa Gambar dan Judul (Jika pada postingan tidak ada gambar, maka akan tembil gambar yang bertuliskan no image), disarankan jika memakai Related Post ini bagi yang besiri gambar di postingannya). Ok, jika sobat berminat untuk Membuat Related Post Bergambar (Artikel Terkait Bergambar) ini, silahkan ikuti langkah demi langkah di bawah ini, pelan-pelan saja ye, jangan buru-buru. hehhehe

sebelum mengikuti langkah-langkah untuk Membuat Related Post Bergambar (Artikel Terkait Bergambar), saya sarankan sobat untuk membackup templet sobat dulu, demi keamanan bersama.heheheh

1. Login ke Blogger

2. Design (Rancangan) ---->> Edit HTML --->  Centang Expand Widget Template

3.  Cari Kode tag </head> (cari dengan Ctrl+F)

4. Letakkan kode Script  di bawah ini tepat di atas kode tag </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://sastrablog.googlecode.com/files/relatedthumbs21.js' type='text/javascript'/>

</b:if>

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

5. Kemudian Cari Kode Tag  <div class='post-footer'>

6. Masukkan Kode Script di bawah ini tepat diatas kode tag  <div class='post-footer'>

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

<script type='text/javascript'>

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

var maxresults=8;

var relatedpoststitle="Related Posts";

removeRelatedDuplicates_thumbs();

printRelatedLabels_thumbs();

</script>

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

</b:if>

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

7. Save Template

pada kode var maxresults=8; diatas, angka 8 bisa sobat ganti sesuai dengan yang sobat mau.

(dikutip dari Sastra Blog)