Pasang Related Posts + Thumbnails (Gambar)

Mau pasang Related Post yang ada Thumnails/Gambar di blog blogger kamu?
Sebenarnya Cara Membuat Related Post/Artikel Terkait Di Blogger sudah saya tulis di blog ini, namun tutorial tersebut menuliskan cara pasang related post tampa thumnail. Kalo pengen pasang related post + thumnail atau yang ada gambarnya silakan baca terus artikel ini.

Sebelum saya tuliskan tutorialnya nih mungkin teman-teman ingin lihat gimana sih tampilannya, berikut gambar tampilannya
Related Posts with Thumbnails for Blogger


related posts with thumbnails for blogger

Atau silakan lihat contohnya di blog ini
Ok mari kita mulai....

Cara Memasang Related Posts Dengan Thumnails (Gambar)

Seperti biasa, langkah yang harus di lakukan pertama yaitu login dulu ke blogger kemudian pergi ke Layout/Tata Letak/Design => Edit HTML kemudian beri centang pada bagian "Expand Widget Templates".
Cari Kode
</head>
Kemudian Letakkan kode berikut di atasa kode </head> tadi
<!--Related Posts with thumbnails Scripts and Styles Start-->  <!-- remove -->
<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 type='text/javascript'>  var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzX0Pak7D6UDmFcs5j-h018gFIH3fF6mfA10G1SSXnHc8KxbCAKHgfp_BDZdCI1cwFblCwoe8c39AVa9uGUvH_wH-EyhU4UC7QFzFViRQcYye_iwoxxpr3E1STsfcMFeMNlMKvKlpatxI/s400/noimage.png";  var maxresults=5;  var splittercolor="#d4eaf2";  var relatedpoststitle="Related Posts";  </script>
<script src='http://blogergadgets.googlecode.com/files/related-posts-with-thumbnails-for-blogger-pro.js' type='text/javascript'/>
<!-- remove --></b:if>  <!--Related Posts with thumbnails Scripts and Styles End-->
Setelah itu cari lagi kode
<div class='post-footer-line post-footer-line-1'>
Dan letakkan script ini di bawahnya
<!-- Related Posts with Thumbnails Code Start-->  <!-- remove -->
<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>  <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:loop>
<script type='text/javascript'>  removeRelatedDuplicates_thumbs();  printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);  </script>
</div><div style='clear:both'/>
<!-- remove --></b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'><a href='http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html'><img style="border: 0" alt="Related Posts Widget For Blogger with Thumbnails" src="http://image.bloggerplugins.org/blogger-widgets.png" /></a><a href='http://bloggertemplates.bloggerplugins.org/' ><img style="border: 0" alt="Blogger Templates" src="http://image.bloggerplugins.org/blogger-templates.png" /></a>
</b:if>
</b:if>  <!-- Related Posts with Thumbnails Code End-->
Untuk menampilkan berapa banyak jumlah related posts bisa dengan mengedit kode dibawah ini:
var maxresults=5;
Untuk mengganti title, kita bisa mengedit kode ini:
var relatedpoststitle="Related Posts";
Selamat Mencoba dan semoga berhasil

12 comments:

  1. Terimakasih atas panduannya, ijin u dipraktekan di blog saya.Ternyata berhasil^^^ kata Relatad Post sy ganti dgn "Koleksi Jilbab Umi..." namuan yg muncul hurup besar semua sprt " KOLEKSI JILBAB UMI..".bisa ga hurupnya dijadikan hurup kecil?terimakasih

    ReplyDelete
  2. kok gk bs ya mas ??
    saya copaz tu script,, gk ada terjadi apa2,, gk ada perubahan tuh..
    gk ada efek nya sama sekali dblog saya.. knp ya mas ??
    saya pake read more otomatis.
    mohon pencerahannya. thanks

    ReplyDelete
  3. kalau seperti blog.ahmadrifai.net gimana mas?
    boleh dong rahasianya dishare.

    ReplyDelete
  4. Mantap. Terimakasih banget tipsnya...:)

    ReplyDelete
  5. sayaa masiih beloom bisa gaan..

    tolong bantooanyaa
    makasiih sbelooomnyaa

    ReplyDelete
  6. Ane udah coba gan, tapi kok ga muncul

    ReplyDelete