Cara Menambah Related Post Widget Dengan Thumbnail Ke Blogger

Ada cara untuk menampilkan Related Posts di bawah setiap postingan Anda plus thumbnail. Artikel terkait dipilih dari postingan lain dengan kategori/label/tag yang sama. Dengan begitu akan banyak pembaca Anda yang akan tetap di blog Anda untuk waktu yang lebih lama saat mereka melihat related posts yang disukai.

Langkah-langkah menambahkan Related Posts Widget pada Blogger/Blogspot

  1. Masuk ke Blogger Dashboard >> Template >>Edit HTML;

  2. Beri tanda cek kotak pilihan "Expand widgets template";

  3. Cari (CTRL + F) untuk potongan kode berikut:

</head>

4. Copy dan paste kode berikut sebelum/di atas </head>

<!--Related Posts with thumbnails Scripts and Styles Start--> <!-- remove --> <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: 18px; letter-spacing: 2px; font-weight: bold; text-transform: none; color: #5D5D5D; font-family: Arial Narrow; margin-bottom: 0.75em; margin-top: 0em; padding-top: 0em; } #related-posts a{ border-right: 1px dotted #DDDDDD; color:#5D5D5D; } #related-posts a:hover{ color:black; background-color:#EDEDEF; } </style> <script type='text/javascript'> var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhctYwFK7JAXqlGDgIYOAZUErnER1FM2jdKu0shYvOC90KM306c4iooyKOW2qGoRpCcx_OxDVRiETUABzAGBi_lPRcA-yxTxlMfVQBTilZxyT0U3qX09kqjji0UOhdkI74YxZp5nH1dYgj6/s1600/no_image.jpg"; var maxresults=5; var splittercolor="#DDDDDD"; var relatedpoststitle="Related Posts"; </script> <script src='http://helplogger.googlecode.com/svn/trunk/related-posts-with-big-thumbnails.js' type='text/javascript'/> <!-- remove --> <!--Related Posts with thumbnails Scripts and Styles End-->

Catatan:
- untuk mengganti default picture, ganti URL warna biru dengan keinginan Anda
- untuk menampilkan lebih dari 5 posting, ganti nilai 5 dari "var maxresults=5;"
- hapus kode warna ungu jika Anda ingin related posts ditampilkan di homepage juga

5. Sekarang cari kode berikut:

<div class='post-footer'>

6. Dan di atasnya, copy dan paste kode berikut:

<!-- Related Posts with Thumbnails Code Start--> <!-- remove --> <div id='related-posts'> <b:loop values='data:post.labels' var='label'> <b:if cond='data:label.isLast != "true"'> </b:if> <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6"' type='text/javascript'/> <script type='text/javascript'> removeRelatedDuplicates_thumbs(); printRelatedLabels_thumbs(""); </script> </div>

<!-- remove --> <b:if cond='data:blog.url == data:blog.homepageUrl'> <a href='http://helplogger.blogspot.com'> </b:if> <!-- Related Posts with Thumbnails Code End-->

 

Catatan:
- ganti nilai 6 dari max-results=6 dengan jumlah posting yang Anda inginkan untuk ditampilkan.
- jika Anda ingin related posts untuk di tampilkan di homepage juga, hapus kode warna violet.

  7. Simpan Template

Selamat mencoba   :)