Cara Membuat Related Post / Artikel Terkait Dengan Gambar Thumbnail

ealated Post atau Artikel Terkait adalah widget yang akan menampilkan Beberapa Artikel Yang Berhubungan pada setiap akhir artikel atau pada setiap ahrir postingan blog. Kadang, ada juga sobat BLOGGER yang menganggap widget tersebut sebagai Widget Recent Post Thumbnail atau Artikel terakhir Denagn Gambar yang berbentuk horisontal.

Berbeda dengan Related Post Biasa, Related Post dengan Thumbnail / gambar memiliki tampilan yang lebih menarik dan dinamis. Adapun gambar yang di tampilkan berrbeda - beda sesuai dengan gambar yang ada pada setiap artikel. Apabila dalama sebuah artikel memiliki banyak gambar, Widget Related Post With Thumbnail biasanya menampilkan gambar pertama. Jika artikel tidak memiliki gambar, maka Related Post dengan Thumbnail akan menampilkan gambar yang sudah di atur pada kode widget Related Post Thumbnailnya.

Sayangnya jika menampilkan terlalu banyak Related Post, maka tampilannya akan jadi kurang menarik. Karena itu, seorang Blogger Blogspot biasanya hanya menampilkan beberapa Artikel pada Widget Related Post Thumbnail ini. jumlahnya berbeda tergantung dari si pemilik BLOG dengan menyesuaikan lebar kotak postingan blognya. Ada yang menampilkan 6, 5, dan ada juga yang hanya menampilkan 4 Artikel Lain Yang Berhubungan pada widget Artikel Terkait ini karena lebar kotak postingan yang sempit. Berbeda dengan Related Post Biasa yang dilengkapi dengan fungsi scroll sehingga mampu menampilkan banyak Artikel Lain yang berhubungan berdasarkan label Artikelnya.

Saya sudah menulis artikel di BLOGGERBUGIS tentang cara membuat Related Post atau Artikel Terkait biasa yang dilengkapi dengan fungsi scroll. Jika anda lebih suka membuat Related Post atau Artikel Terkait Biasa yang dilengkapi dengan fungsi scroll pada BLOG BLOGSPOT anda, silahkan baca tutorialnya DISINI

Berikut adalah gambar screenshoot Related Post dengan 5 Artikel Lain yang berhungan.

Live Demo Widget Related Post / Artikel Terkait / Artikel Lain Tang Berhubungan bisa anda lihat pada bagian bawah kotak postingan ini ( Kalau saya belum menggantinya dengan widget lain ).Tertarik untuk memasang Widget Related Post With Thumbnail pada Blog Blogspot anda ?
Simak Tutorialnya berikut ini :

• Sebelumnya, jika anda telah memasang Widget Related Post Biasa Pada blog anda dan ingin menggantinya dengan Related Post Thumbnail, silhkan hapus terlebih dahulu kode Widget Related Post Biasa anda. Mengingat artikelnya pasti akan terlalu panjang, saya tidak akan menulis kode yang dihapus. Silahkan baca Tutorial Memasang Widget Related Post Biasa DISINI lalu hapus kode yang ditambahkan pada tutorial tersebut.

Oce bro... mari kita lanjutkan....

• Seperti biasa, kamu hanya lemparkan senyum silahkan masuk ke akun blog anda di www.blogger.com dengan menggunkan USERNAME dan PASSWORD Blog anda. Lalu pergi begitu saja bagai pesawat tempur anda akan berada pada halaman DASBOR BLOG. Pada halaman tersebut, klik Tombol RANCANGAN.
• Selanjutnya, pada halaman RANCANGAN, klik Tab EDIT HTML.
• Beri tanda Checklist / Centang / Contreng  atau terserah anda menyebutnya apa pada kotak kecil yang ada di depan tulisan EXPAND TEMPLATE WIDGET. Di bawah tulisan tersebut membentang sempit sebuah kotak yang berisi KODE HTML TEMPLATE BLOG yang bikin pusing kepala.
• Cari kode </head> pada kotak HTML tersebut.  Lakukan pencarian cepat dengan menggunakan tombol CTRL + (plus) huruf F pada keyboard anda lalu tekan ENTER yang akan menampilkan kotak FINE pada sudut kiri bawah browser anda. Selanjutnya ketik </head> pada kotak tersebut. Sudah dapat kodenya ?
• Copy kode HTML berikut ini :  

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

• Letakkan / Paste di atas kode </head> template blog anda.
• Selanjutnya cari kode  <div class='post-footer-line post-footer-line-1'>  pada kode template blog anda. Kalau anda tidak menemukan kode tersebut pada template blog anda, cari kode ini : <p class='post-footer-line post-footer-line-1'>  
• Letakkan/Copas kode di bawah ini DI BAWAH salah satu kode tersebut di atas. Berikut kodenya :

<!-- 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=5;
var relatedpoststitle="Related Posts";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if>
<!-- Related Posts with Thumbnails Code End-->

• Simpan Template Anda

• Selesai........

Widget Related Post / Artikel Terkait dengan Gambar / Thumbnail akan menampilkan 5 Artikel terkait berdasarkan label artikel. Jika ingin menambah atau mengurangi jumlah Related Post yang di tampilkan, silahlkan ganti angka 5 (Lima) pada kode var maxresults=5; menjadi lebih banyak atau lebih sedikit.

Jika ingin mengganti tulisan Related Post dengan kata / kalimat lain, silahkan ganti tlisan Related Post ( jangan menghapus tanda petiknya) pada kode var relatedpoststitle="Related Posts";

Oce Mas, Bro, Kang, Mbak, Dek, Tante......
Semoga tutorialnya bermanfaat.

Happy Blogging....