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 Bli Tyan tulis di blog ini, namun tutorial tersebut menuliskan cara pasang related post tanpa thumnail. Kalau pengen pasang related post + thumnail atau yang ada gambarnya silakan baca terus artikel ini.

Sebelum Bli Tyan tuliskan tutorialnya nih mungkin teman-teman ingin lihat gimana sih tampilannya, berikut gambar tampilannya

Related Posts with Thumbnails for Blogger


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/AVvXsEin4y8N28YZe0Ap_jRLsqnzYArLwRBMHzJA3cWNRpNZ-7vVknABwT0F9_BE-ccsYfaRVOutMe3ZUUOt4y8XdhVKaujRRAme2MX2d8bkfBbTR8WQ0_UCAvOT72vOsjkB2wRXp0c1DDCZQPw/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";

Mudah bukan?? Mudah-mudahan bisa bermanfaat, dan mohon maaf jika ada yang kurang atau ada yang salah. Bagi teman-teman yang merasa ada yang salah atau ada yang kurang silahkan betulkan atau tambahkan melalui kolom komentar di bawah ini :) Sampai jumpa di posting blogger tutorial Bli Tyan berikutnya :) Selamat mencoba dan semoga berhasil.

Please subscribe, leave a comment, follow this blog and share this article with your friends and colleagues.
by: http://blityan.blogspot.com

Share This On :

Tweet

Related Post :