Cara menambahkan Widget Related Posts dengan Thumbnail pada Blogger

Sekarang di sini adalah cara yang mudah untuk menampilkan posting terkait di bawah setiap posting blog Anda, bersama dengan thumbnail. Artikel-artikel terkait dipilih dari pesan lainnya dalam kategori yang sama / label / tag. Dengan cara ini banyak pembaca Anda akan tetap di blog Anda untuk waktu yang cukup lama ketika mereka melihat posting terkait kepentingan.








related post, related posts blogger, blogger widgets






Langkah menambahkan Widget Related Posts ke Blogger / Blogspot



Langkah 1. Buka Blogger Dashboard >> Template >>Edit HTML;



Langkah 2. Centang pada "Expand widgets template" box;



Langkah 3. Cari (CTRL + F) kode <head> dibawah ini:




</head>



Langkah 4. Copy dan paste kode di bawah ini sebelum / di atas </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: 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=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8Q4EGKs2KMqqTOf8ebDfs1ttdoalqEsqa7jmMxMMcUjnm_vsgYvZ9gDmDBzSjuclRFuvW_tmAHGuRHPHBl0jxcD2PlWor6ME2Zv0ceJC5GP5RfgWY-fh-8FOqWfCpOKht54qHaIIhWna2/s1600/no_image.jpg&quot;;

var maxresults=5;

var splittercolor=&quot;#DDDDDD&quot;;

var relatedpoststitle=&quot;Related Posts&quot;;

</script>

<script src='http://helplogger.googlecode.com/svn/trunk/related-posts-with-big-thumbnails.js' type='text/javascript'/>

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

<!--Related Posts with thumbnails Scripts and Styles End-->



Note:

- to change the default picture, replace the URL in blue with your own

- for displaying more than 5 posts, replace 5 value from "var maxresults=5;"

- remove the code in violet if you want the related posts to be displayed in homepage too

Catatan:
- Untuk mengubah gambar default, ganti
URL yang berwarna biru dengan link gambar yang Anda miliki
- Untuk menampilkan lebih dari
5 posting, ganti 5 nilai dari  "var maxresults=5;"
- Hapus
kode yang berwarna violet/ungu jika Anda ingin menampilkan widget ini dalam homepage juga



Langkah 5. Sekarang cari kode berikut:




    <div class='post-footer'>



Langkah 6. Dan tepat di atasnya, copy dan paste kode di bawah ini:




<!-- 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://helplogger.blogspot.com'><img alt='Blogger
Tricks'
src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgJaNgGXiE2fRakkiuqHIpbMDX_WUFqQeUpfb7GZKjrTakroInsGCb4Ys8-6h08gSMQP0JoC-KU7EDNdhZIiWb8ndC3hFd-T1pPWxWCxm-RbXy0d8AEKVwj0PUkFHyJ7Tr-NqhSAS3OpWS/s1600/best+blogger+tips.png'/></a>

</b:if></b:if>

<!-- Related Posts with Thumbnails Code End-->



Note:

- change the 6 value from max-results=with the number of posts you want to be displayed.

- If you want the related posts to be displayed on homepage too, remove the code in violet.



Catatan:
- Ubah nilai
6 dari  max-results=6 dengan jumlah posting yang ingin ditampilkan.
- Jika Anda ingin
related post  ini ditampilkan pada homepage juga, hapus kode warna  violet/ungu.



Langkah 7. Simpan Template



Enjoy :)



Credit goes to: bloggerpluggins.org . Modified by kivandanu





0 komentar:

Posting Komentar

silahkan komentar

Luncurkan toko Anda hanya dalam 4 detik dengan 
 
Top