Artikel Terkait yang berisi Thumbnails

Sebelumnya saya  sudah berbagi dengan anda cara membuat Artikel terkait dibawah posting, yang hanya menampilkan judulnya saja dan sekarang saya akan berbagi lagi dengan anda cara membuat Artikel Terkait yang disertai dengan Thumbnails / image / gambar mini yang ada dipostingan kita.

Disamping juga  sesuai dengan janji saya sebelumnya, untuk itu mari kita langsung saja menuju TKP 



Cara Membuat Artikel Terkait yang berisi  Thumbnails

• Seperti biasa Login ke Blogger dengan ID anda.


• Pada halaman Dasbor, pilih Tata Letak.


• Kemudian pilih Edit HTML


• Backup / simpan template anda dulu.


• Beri tanda centang pada Expand Template Widget


• Cari kode  </ head>


• Copas (copy-paste) kode script berikut dan simpan / taruh persis di atasnya

<!--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://blogergadgets.googlecode.com/files/relatedthumbs21.js' type='text/javascript'/> </b:if> <!--Related Posts with thumbnails Scripts and Styles End-->

• Cari kode <div class='post-footer-line post-footer-line-1'>  atau jika tidak ditemukan cari kode berikut ini <p class='post-footer-line post-footer-line-1'>

• Jika sudah ketemu, copas (copy-paste) kode script berikut ini,  taruh di bawah salah satu kode tersebut tadi

<!-- 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.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html' style='display:none;'>Related Posts with thumbnails for blogger</a><a href='http://www.bloggerplugins.org/' style='display:none;'>blogger tutorials</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-->

• Kita Juga dapat mengganti beberapa kode scriptnya, seperti :

1. var maxresults = 5;  berarti artikel yang akan ditampilkan adalah : 5 =?


2. relatedpoststitle var = " Related Posts "; Bisa diganti dengan Artikel Terkait atau Nama Lainnya

• Simpan template anda dan lihat hasilnya 

Live Demo

CONTOH: Tampilan 

Berikutnya Cara Membuat Artikel Terkait di Sidebar.

Bagaimana menurut anda postingan / artikel ini, berikan saran / komentar anda sebagai memotivasi saya dan Terima kasih sebelumnya.