Cara Membuat "Related Post" di Blogger

Cara Membuat "Related Post" di Blogger

Widget ini sangat unik, namun sebagaimana halnya masalah prinsipil yang dialami para blogger yaitu urusan template yang kadang bisa diaplikasikan atau sebaliknya, tidak muncul. Tapi mungkin widget ini bisa saya pastikan bisa teraplikasi 80 % untuk template blogger, jadi jangan kuatir.

Tapi sebelum itu, jangan lupa didownload dulu template kesayangan Anda agar nggak terjadi hal yang tidak diinginkan nantinya, kalo semisal terjadi ya tinggal di upload ulang.

Ini dia caranya:

1. Pilih ke Dashboard lalu klik Layout > Edit HTML dan centang "Expand Widget Templates"
2. Lalu cari kode berikut:

</head>

3. Ganti dengan kode berikut:

<!--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/AVvXsEg0jwxBVNMhl-KHiIAMstYF2iTdkDa-8gERW6sVTcCPivhJNCht650iNctaqhsPSlAsekJJEYUF3fz_085nyuX-OPPnVpDTDiJQdyZcGos4ttFotr-vS1wOZFknuselexeckGS_UqkDfUc/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--> </head>

4. Lalu cari kode selanjutnya:

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

Jika tidak ketemu cari yang ini:

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

5. Lalu pastekan kode ini dibawahnya:

<!-- 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. Anda bisa mengganti berapa jumlah "Related Post" yang ingin ditampilkan di sini:

var maxresults=5;

7. Untuk mengubah tulisan "Related Post" disini:

var relatedpoststitle="Related Posts";

8. Untuk mengubah thumbnail-nya dengan versi milik Anda, ganti kode yang warna merah:

var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0jwxBVNMhl-KHiIAMstYF2iTdkDa-8gERW6sVTcCPivhJNCht650iNctaqhsPSlAsekJJEYUF3fz_085nyuX-OPPnVpDTDiJQdyZcGos4ttFotr-vS1wOZFknuselexeckGS_UqkDfUc/s400/noimage.png";

9. Dan untuk mengganti warna splitter-nya di mari:

var splittercolor="#d4eaf2";

10. Save template

Tapi jika masih belum muncul atau sudah muncul tapi Anda ingin menampilkannya di setiap halaman maka dengan cara ini:
1. Hapus semua kode ini:

<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>

Dan yang ini:

<!-- remove --></b:if>

2. Save template, selesai
Dan jadinya akan seperti ini:

Selamat mencoba, semoga bermanfaat…