Cara Buat Related Post dengan Gambar

Cara Buat Related Post dengan Gambar, kali ini ane share Cara Buat Related Post dengan Gambar yang baru aja ane pelajari dan ane terapkan di Blog ane ini, gak percaya? cek kebawah :D

Related Post dengan Gambar ini dapat membantu visitor agan untuk menemukan artikel-artikel sejenis hanya dengan melihat Related Post yang ada dibawah pos agan, dan jika visitor agan menemukan artikel sejenis dari Related Post tentunya juga menguntungkan untuk Blog agan.

Prosedurnya

1. Buka Blogger agan

2. Pilih menu TEMPLATE pada bagian kiri bawah

3. Biar aman agan simpen dulu templatenya dengan mengklik Cadangkan/pulihkan

4. Klik EDIT HTML

5. Cari kode (CTRL+F) </head>, copy kode dibawah tepat diatas kode </head>

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

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

<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, Times New Roman , 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/AVvXsEiYWFTPF9VtJV8nfvTn6poHs9shln1LsxxXuUFutl63vy3DICs-71qDsDKzs1lbAvaYSNkeYdV7Vc5NcbYNcYIFk6sG6LJhfMQAROAVrcVCZKF538chkklt5Gr5dVfdcRaYK78sUmpTmK8/s1600/Serpihan+waktu+Related+Post+Dengan+Thumbnail.png";

var maxresults=5;

var splittercolor="#d4eaf2";

var relatedpoststitle="Related Posts";

</script>

<script src='http://djangkarubumi.googlecode.com/files/SerpihanWaktuRelatedPostThumnail.js' type='text/javascript'/>

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

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

 6. Cari kode (CTRL+F) <data:post.body/> , copy kode dibawah tepat dibawah kode <data:post.body/>, agan bakal ketemu bnyak kode <data:post.body/>, coba aja satu-satu

<!-- 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. Save aja broh udah selesai, cek deh berhasil apa gak, kalo belum muncul coba di <data:post.body/> yg lain...

Keterangan :
*var maxresults = 5 adalah jumlah artikel yang ditampilkan. jika ingin memperbesar angka var maxresults = 5 , jangan lupa memperbesar angka juga max-results=6  , intinya angka max-results=6 harus lebih besar dari pada var maxresults = 5.

*var relatedpoststitle="Related Posts";  bisa ganti kata Related Posts dengan Kata lainnya.

*#related-posts a:hover {background-color:#d4eaf2; } , silahkan rubah kode warnanya sesuai yang dikehendaki.

tempat ane belajar ini

Share it Please

Tweet

Unknown

"Seorang pelajar berumur 16 tahun yang lahir pada tanggal 17 agustus 1997 dan sekarang duduk di tingkat SMA, Fans dari AS Roma sejak 2006."