Cara membuat Related Post dengan Tumbnail

Cara membuat Related Post dengan Tumbnail

Sekitar dua minggu yang lalu saya telah melakukan posting tentang cara membuat related post ada blog, namun dengan tampilan yang biasa dan hanya berupa judul post saja. Nah.... kali ini saya akan berbagi kepada sobat tentang cara membuat Related post dengan gambar tumbnail. Tentu saja ini lebih menarik kan?
Sedikit info tenteng related post : Related post adalah Salah satu fitur pada blogger yang berfungsi untuk menginformasikan beberapa postingan lain yang masih berkaitan dengan artikel yang sedang dibaca oleh pengunjung pada blog kita. Related post ini selain berfungsi untuk memudahkan para pengunjung untuk mendapatkan informasi yang sedang mereka cari, juga berfungsi untuk meningkatkan pageview pada blog kita lho sob. Nah.... Lumayan kan? banyak juga fungsinya. maka dari itu sekara mari kita coba membuatnya.



Cara membuat Related Post dengan Tumbnail

• Langkah pertama, Silahkan sobat login ke Akun blog masing-masing
• Kedua, silahkan masuk menu TEMPLATE, lalu EDIT HTML dan berikan tanda centang pada Expand template Widget
• Langkah ketiga, Silahkan cari kode </head> dan letakkan kode berikut diatasnya.

<!--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/AVvXsEj1ydUKWpQk5qOomLi1HkFGhw-_D8TmkqgXzCQzRehyflGJFKjFXRO5ntTevgeBy8cVfFB1Flln1Ajk9sj59QLq71BXsSazEl86zfVG1LYcuBgfSyF3NAyTcxiKsigMZgD3JzOnYNJPQUiC/";
var maxresults=5;
var splittercolor="#cccccc";
var relatedpoststitle="You might also like:";
</script>
<script src='https://sites.google.com/site/bangkolis/javascript/maskolis.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails End-->

• Langkah keempat, silahkan cari kode  <p class='post-footer-line post-footer-line-1'/> 
• Jika sobat tidak bisa menemukan kode diatas, silahkan cari kode berikut ini post-footer-line dan 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-->

• Langkah terakhir, silahkan Save template Sobat dan Lihat hasilnya.

Demikian Artikel sederhana tentang  Cara membuat Related Post dengan Tumbnail kali ini, jika ada pertanyaan, kritik atau saran, silahkan Tinggalkan komentar ya. Terimakasih dan semoga bermanfaat.

Ditulis Oleh : Anonymous TIPS DAN ARTIKEL BLOGGING TERLENGKAP

Sobat sedang membaca artikel tentang Cara membuat Related Post dengan Tumbnail. Oleh Admin Lhk-Blogs, Sobat diperbolehkan mengcopy paste atau menyebar-luaskan artikel ini, namun jangan lupa untuk meletakkan link dibawah ini sebagai sumbernya <a href="http://lhk-blogs.blogspot.com/2013/02/cara-membuat-related-post-dengan-tumbnail.html" target="_blank">Cara membuat Related Post dengan Tumbnail</a>

:: Buat Permalink di Blogmu ::