Related Posts With Thumbnails Dari Aneesh

Masih segar dengan related posts. Kalau masih, nih yang terbaru. Si Aneesh menciptakan widget related posts with thumbnails yang mirip dengan related posts LinkWithin. Bedanya hanya cara pasangnya doank. Kita akan dihadapkan dengan kode script CSS yang ditambahkan pada template blog anda. Gambarnya seperti ini :


Gimana, pasti anda sudah pernah melihat widget seperti itu. Nah, anda bisa memasang widget ini dengan membaca tutorial si Aneesh di Blogger Widget. Tapi biar gampang saya buat juga di sini dalam versi bahasa indonesia. Oke, langsung saja ke intinya.

Pasang Related Posts with Thumbnails dari Aneesh

1. Login ke blogger dengan id anda
2. Tuju Layout
3. Pada tab menu pilih Edit HTML
4. Centang kotak kecil Expand Template Widget
5. Cari kode </head>
6. Kemudian ganti kode itu dengan kode di bawah ini :

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

7. Kemudian cari lagi kode di bawah ini :

   <div class='post-footer-line post-footer-line-1'>

   Bila anda tidak menemukan kode di atas, carilah kode ini :

   <p class='post-footer-line post-footer-line-1'>

8. Bila sudah ketemu, masukkan kode berikut di bawah kode 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 widgets</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-->

9. Sekarang klik tombol SAVE TEMPLATE
10. Selesai

Atur jumlah related posts thumbnails yang ditampilkan pada kode ini :

var maxresults=5;

Anda juga bisa mengganti judul (title) widget pada kode ini :

var relatedpoststitle="Related Posts";

Jika tidak ada kesalahan, maka thumbnail related post ini akan muncul tepat di bawah posting anda. Contohnya seperti gambar di bawah ini :


Saat ini saya tidak memasang widget ini karena saya sudah pasang related posts fungsi scrolling. Oke, selamat mencoba dan semoga berhasil. Thanks Aneesh.

Related Post:

Widgets

• Pasang Widget Top Commenters Di Blogger
• Pasang Widget Top Posts Di Blogger
• Pasang Widget Kode Warna Pada Blogger
• User Online Widget Whos Amung Us
• Related Posts With Thumbnail Dari LinkWithin
• Membuat Related Posts Fungsi Scrolling
• Pasang Widget Recent Comments Blogger
• Pasang Widget Recent Post Blogger
• Membuat Tab View Widget Blogger
• Membuat Kotak Pencarian Di Blogger
• Mengganti Read More Dengan Banner
• Label Cloud Fitur Terbaru Blogger
• Membuat Label Cloud Blogumus Blogger
• Membuat Form Berlangganan FeedBurner
• Read More Dengan Judul Posting
• Cara Membuat Read More Blog
• Membuat Related Post Blogger

or or