Membuat related post dengan Thumbnail

Related post atau postingan terkait pasti sering loe liat di blog orang laen ya gak gan. Fungsinya bukan cuma pajangan doank tapi buat ningkatin pageview dari pengunjung blog kita gan. Dengan adanya related post atau postingan terkait di blog kita bikin pengunjung lebih mudah nyari konten yang berkaitan sama yang dia baca saat itu.

Kalo di WordPress cara buatnya gampang banget tinggal pasang plugin beres gan. Nah kalo di blogger kita mesti pasang kode di template gan biar related post muncul di bawah postingan. Kayak di blog ini gan ada related postnya juga. Tapi kali ini gw bakal share cara membuat related post dengan thumbnail atau gambar gan.

Mau tau caranya gan? Yuk langsung disimak gan cara membuat related post dengan thumbnailnya, biar blog loe jadi tambah keren dan bikin pengunjung betah. Gw bakal kasi 2 kode gan, yang 1 thumbnailnya statis ato diem dan yang 1 lagi dengan marque ato bergerak gan, cek dis out.

Cara Membuat Related Post Dengan Thumbnail Di Blogger

• Pertama masuk ke Blogger terus pilih Template lalu klik Edit HTML dan teken Ctrl + F di keyboard kemudian cari kode </head> lalu centang Expand Widget Templates gan, abis itu loe pastein kode di bawah ini di atasnya.

<!--Postingan Terkait Dengan Gambar Kode Mulai-->
<!-- 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-left: 5px;
}
#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=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6GUdNnfb8flnFWAJr7TnZCHc4U3M-gaz4XCR0Rt8FUcOVZC8LXWkcp38trIE_i6y1gxOpDNvRo2fMLIupvpjXVbM-pk4lv2MyPxKueRUDv_kNSnlrQL-GcshgB_VhEAYR-n-l6jFeZd8E/s1600/images.jpg&quot;;
var maxresults=10;
var splittercolor=&quot;#d4eaf2&quot;;
var relatedpoststitle=&quot;Postingan Terkait&quot;;
</script>
<script src='https://sites.google.com/site/seociyussite/file/post_terkait_dengan_gambar.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Postingan Terkait Dengan Gambar Kode Selesai-->

• Kalo udah jangan di save dulu sekarang loe cari kode <div class='post-footer-line post-footer-line-1'> atau <p class='post-footer-line post-footer-line-1'> gan. Setelah itu paste kode di bawah ini tepat di bawahnya gan. Loe tinggal pilih kode related post dengan thumbnail yang statis ato yang bergerak ( marque ) gan.

 » Kode Related Post Dengan Thumbnail Statis

<!--Postingan Terkait Dengan Gambar Kode Mulai-->
<!-- 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'>
</b:if></b:if>
<!--Postingan Terkait Dengan Gambar Kode Selesai-->

» Kode Related Post Dengan Thumbnail Bergerak / Marque

<!--Postingan Terkait Dengan Gambar Kode Mulai-->
<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 cond='data:blog.pageType == &quot;item&quot;'>
<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=11&quot;' type='text/javascript'/>
</b:if></b:loop>
<marquee align='center' behavior='alternate' direction='left' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='2' width='100%'>
<script type='text/javascript'>var currentposturl=&quot;<data:post.url/>&quot;;
removeRelatedDuplicates_thumbs();printRelatedLabels_thumbs();</script>
<script type='text/javascript'>tweetmeme_url = &#39;<data:post.url/>&#39;;
</script></marquee>
</div><div style='clear:both'/>
</b:if>
<!--Postingan Terkait Dengan Gambar Kode Selesai-->

• Abis dipastein sekarang diedit gan. Buat ngatur posisi judulnya loe edit padding-left: semakin besar semakin ke kanan dan buat ganti judulnya edit Postingan Terkait gan. Terus buat ngerubah warna hover edit aja background-color: ganti sama warna yang laen sesuai selera loe.

• Kalo buat var maxresult sama max-result ganti aja sesuka hati mau berapa jumlah related post yang ditampilin gan. Beres ngedit sekarang tinggal Save template gan dan buka blog loe pasti udah ada related post dengan thumbnail nya sekarang.

Note : Kalo mau ganti image tidak ada gambar, tinggal di ganti aja urlnya di var defaultnoimage gan.


Sekian dulu yang bisa gw share kali ini semoga bermanfaat. Kalo ada yang gak ngerti silahkan ditanyakan dan jangan lupa komentarnya gan.