0 Cara Membuat Related Post dengan Thumbnail (Gambar)

Cara Membuat Related Post dengan Thumbnail (Gambar). Kali ini kami akan sedikit berbagi ilmu dengan anda yang inginb menghias blog nya agar tampil indah dan menari. Kali ini kami ingin berbagi ilmu mengenai cara menambahkan atau cara membuat  Related Post dengan Thumbnail (Gambar). Cara ini lebih menarik daripada dengan mengunakan Related Post atau Artikel Terkait yang hanya menampilkan teks saja. Seperti dalam pembahasan kami sebelumnya mengenai Cara Membuat Related Post . Anda bisa melihat dulu...he..he..he..he hasilnya.

Kalau kita bisa menampilkan dengan gambar tentunya lebih memudahkan orang untuk melihat artikel terkait anda. Dan tentunya anda pembaca akan lebih penasaran lagi kalau sudah melihat artikel dengan ada gambarnya. Kalau sudah jadi hasilnya seperti ini. 

Langkah-langkahnya seperti biasa 

1. Sign in akun blognya masing-masing. 

2. Lalu klik Layout > Template > Edit HTML. dan selalu biasakan centang "Expand Widget Template". 

3. Jika sudah Selanjutnya cari kode </head> untuk mempermudah pencarian gunakan ctrl+f .

4. Lalu letakkan kode script dibawah ini tepat diatas kode </head>

<!--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/AVvXsEjMTigjClyEcyohVz0dKG7lHO0X-OGgToi7tJdEjcaCIrOMqnX5K3l4kuHjBTTKp6vDwu5rK8xpPGpF95-3lbjMf-9zdmWITFzv9YycQHyd2T4EICFJkFdKhQi86Ci0Mkjd6U-Q3ZpNBKQ/s400/noimage.png";  var maxresults=4;  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-->

 NB:
- var maxresults=4 ini adalah jumlah related post yang ditampilkan, silahkan ganti sesuai dengan keinginan
- var relatedpoststitle="Related Posts" adalah tittle dari related post, silahkan rubah sesuai dengan keinginan

5. Jika sudah, selanjutnya cari lagi kode <div class='post-footer-line post-footer-line-1'> (dan biasanya terdapat 2 kode <div class='post-footer-line post-footer-line-1'> yang sama dalam template, pilih kode yang kedua) Dan letakkan kode script dibawah ini tepat dibawah <div class='post-footer-line post-footer-line-1'>

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

6. Jika semua sudah dipastikan benar kemudian simpan, anda bisa melihat hasilnya. Nah semoga cara ini bisa berguna bagi anda khususnya bagi anda yang ingin menghias blog anda.

Komentar →