Related Post Thumbnail Dibawah Posting

Related Post Thumbnail Dibawah Posting

16:13 | Mei 01, 2012  Yasir Utomo  5 comments

Related Post Thumbnail merupakan related post yang pada dasarnya sama dengan related post yang lain cuma terdapat letak perbedaan yang sangat terlihat, yaitu Related Post Thumbnail menggunakan gambar sebagai daya tariknya.

Bagi Anda yang memiliki blog bertema Galery atau semacamnya yang menggunakan banyak gambar tentu menggunakan related post biasa akan menjadi hal yang tidak efektif untuk blog, makanya diperlukan related post thumbnail.

Cara membuat related post ini sudah sangat banyak beredar di internet dengan berbagai cara, ada yang menggunakan gambar berjalan, sampai dengan LinkWithing, tapi kita akan membuat yang sederhana tapi optimal.

View Demo

Cara membuat Related Post Thumbnail :

1. Masuk Pada Blogger
2. * Jangan lupa backup template agar jika terjadi kesalahan template bisa di restore kembali. Backup template pada interface baru Blogger:
   Template >> Cadangkan/Pulihkan >> Unduh Template Lengkap
3. Selanjutnya kembali pilih Template >> Edit HTML >> Lanjutkan
4. Centang Expand template Widget
5. Cari kode :
   

   ]]></b:skin>

6. Pastekan kode berikut diatas ]]></b:skin> :
   

   <!--start related posts css Info : http://www.katakan-hey.com-->
   ul#related-posts{
   font-family:"Droid Sans",Helvetica,Arial,sans-serif;
   font-size:10px;
   list-style: none;
   margin: 20px 0;
   padding: 0;
   text-transform: none;
   }
   ul#related-posts li{
   float: left;
   height: auto;
   margin:0 5px;
   padding: 2px 1px 2px;
   list-style-type:none;
   }
   *html ul.rp#related-posts li{
   margin:0 13px;
   }
   ul#related-posts li a {
   -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
   border: 2px solid #FFFFFF;
   display: block;
   height: 72px;
   position: relative;
   width: 72px;
   }
   ul#related-posts li a {
   color: #474C51;
   text-decoration: none;
   text-shadow: 0 1px 0 #FFFFFF;
   }
   ul#related-posts li .overlay {
   height: 66px;
   line-height: 16px;
   padding:6px 0 0 6px;
   position: absolute;
   width: 66px;
   z-index: 10;
   }
   ul#related-posts li .overlay {
   }
   ul#related-posts li a:hover .overlay {
   background: #fff;
   display: block !important;
   opacity:0.9;
   }
   ul#related-posts li img {
   bottom: 0;
   padding:0px !important;
   }
   ul#related-posts li a:hover {
   -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
   }
   <!--end related posts css.Info : http://www.katakan-hey.com-->

7. Selanjutnya cari kode:
   
   • Pencarian 1 : <div class='post-footer'> jika tidak ketemu ganti pencarian menjadi Pencarian 2
   • Pencarian 2 : <div class='post-footer-line post-footer-line-1'>
8. Letakkan kode berikut dibawah kode hasil pencarian 1 atau 2:
   

   <!--start related posts code Info : http://www.katakan-hey.com-->
   <b:if cond='data:blog.pageType == &quot;item&quot;'><h3>Related Posts</h3>
   <script type='text/javascript'>
   var defaultnoimage=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQ6FokRuocEherwL_nciJ-Kt-fhpXVWevtulAMQ0eynTyloMd_otMUZz6DoOGuXiD22wljn2CXu0I-zy1A4Jj__RKBfPhQqn74cPmLRZ0efuckzx9veFFhidxGHRyQM5m2i3Jf3C2jXRk/s1600/no-image.gif&quot;;
   var maxresults=6;
   </script>
   <script src='http://suyb.googlecode.com/files/rph.js' type='text/javascript'/>
   <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>
   </b:if><div style='clear:both'/>
   <br/>
   <!--end related posts code Info : http://www.katakan-hey.com-->

9. Simpan Template dan Lihat Hasilnya.

Selamat Mencoba & Happy Blogging

Daftar Artikel: