Cara Membuat Realted Post Dengan Thumbnail

Halo pembaca setia Semproel Blog saya akan men share sebuah artikel yang akan menjelaskan bagaimana Caranya membuat realted post dengan thumbnail seperti yang akan anda lihat dibawa posting saya kali ini. menurut saya realted post ini sangat menguntungkan bagi blogger karena fungsinya akan menampilkan artikel-artikel lainya yang terdapat pada blog/website kita dan otomatis akan menambah page view blog/website kita (CMIIW).



Ok langsung saja saya bahas bagaimana Caranya untuk membuat realted post dengan thumnail :



1. Buka menu Design lalu Edit HTML



2. Beri centang pada "Expand Widgets Templates"







3. Letakkan kode berikut diatas kode </head>



<!--Related Posts with thumbnails Start-->

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

<style type='text/css'>

#related-posts {

float:center;

height:100%;

min-height:100%;

padding-top:10px;

padding-left:15px;

padding-right:15px;

}



#related-posts h2{

font-size: 1.3em;

color: black;

font-family: Arial;

margin-bottom: 0.75em;

}



#related-posts a{

color:black;

}



#related-posts a:hover {

background-color:#eeeeee;

}

</style>

<script type='text/javascript'>

var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwbd3VCYF0j31n4BkA8mTlohwnK4EbcQwUvCKp9ylbzS2W7kU73FJRCh_htEoi6HZPdb_ADkPkawkUM0Pkunn8tBmJ1RKOTzdsxAJ3ofTMDFGINb2QM20qSZR7TNIImfbiADQ_0tOdPMFC//";

var maxresults=5;

var splittercolor="#cccccc";

var relatedpoststitle="Anda mungkin menyukai:";

</script>

<script src='http://hbhost.googlecode.com/files/related-posts-with-thumbnails-for-blogger.js' type='text/javascript'/>

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

<!--Related Posts with thumbnails End-->





4. Lalu cari <p class='post-footer-line post-footer-line-1'/>



5. Kalau tidak ketemu coba cari post-footer-line

6. Letakkan kode berikut 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>

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







7. Lalu Save template anda.



Note :

var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwbd3VCYF0j31n4BkA8mTlohwnK4EbcQwUvCKp9ylbzS2W7kU73FJRCh_htEoi6HZPdb_ADkPkawkUM0Pkunn8tBmJ1RKOTzdsxAJ3ofTMDFGINb2QM20qSZR7TNIImfbiADQ_0tOdPMFC//" code itu menunjukkan gambar yang akan muncul pada postingan yang tidak memiliki gambar. Anda bisa mengganti gambar tersebut dengan gambar yang anda.



var maxresults=5 menunjukkan jumlah postingan yang muncul pada related post. anda bisa menganti jumlah postingan yang mau ditampilkan dengan mengganti angkanya sesuai dengan angka yang anda inginkan.



var splittercolor="#cccccc" menunjukkan warna garis pemisah. Ganti cccccc dengan kode warna yang anda inginkan.



var relatedpoststitle="Anda mungkin menyukai :" menunjukkan judul related post. Ganti teks yang berwarna merah dengan judul yang anda inginkan.



Note diatas menjadikan akhir perjumpaan kita pada posting kali ini terima kasih untuk pembaca setia Semproel Blog semoga artikel yang telah saya bahas diatas bermanfaat bagi anda para pembaca setia Semproel Blog



Dan Saya berterima kasih kepada Mas Herman yang telah men-share script untuk Cara Membuat Realted Post Dengan Thumbnail .



Terima Kasih

Share It !

Give Me Your Comment While You Are Signing In FB :)