Beranda » Trik » Cara dan Panduan membuat related post thumbnail

Cara dan Panduan membuat related post thumbnail

Cara dan Panduan membuat related post thumbnail

Related post ini mempermudah bagi pengunjung blog anda sebagai penunjuk tulisan terkait di dalam lebel yang sama, juga sangat berguna sebagai penunjang seo di template blog blogger sobat.

Demo

berikut langkah dan cara membuat nya:

Login ke akun blogger sobat
Klik Template ---> Edit template.

Cari kode <head> dengan tombol ctrl + f
lalu pastekan kode berikut di atasnya:

<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:10px;
margin-top:10px;
}

#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=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiu1iaVUIueGfBRSmSwxlz-zwf7kaHFDMGOTVHIoqC_GC6cPhOFgvrLI6yZUObON46c_cwLgkDOD3AQwSdFyryJBpH9RrzO5qTyaesvS3AsQDcN-yv-1pjP9-zxrcxmlbimmXWfirrAycA/s400/noimage.png&quot;;
var maxresults=5;
var splittercolor=&quot;#d4eaf2&quot;;
var relatedpoststitle=&quot;Berita Terkait&quot;;
</script>
<script src='http://yuuuhu-related.googlecode.com/files/related.js' type='text/javascript'/>
</b:if>

Setelah itu, cari kode <data:post.body/> lalu pastekan kode berikut di bawahnya.

<b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
</b:if>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6"' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs("<data:post.url/>");
</script>
</div><div style='clear:both'/>
</b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://defandaky.blogspot.com/2011/12/cara-membuat-artikel-terkait-dengan.html'><img alt='Cara membuat Artikel terkait dengan Thumbnail' src='http://image.bloggerplugins.org/blogger-widgets.png' style='border: 0'/></a>
</b:if></b:if>
<div class='clear'/>

anda bisa merubah tampilan cssnya di kode warna orange. untuk mengatur jumlah tulisan yang muncul, anda bisa tentukan di kode warna merah dan warna biru untuk membuat judul yang anda inginkan.

jika anda lebih kreatif, anda bisa download javascriptnya di link

http://yuuuhu-related.googlecode.com/files/related.js

dan bentuklah sesuai yang anda suka, semoga sukses...

Cara dan Panduan membuat related post thumbnail

Belum ada tanggapan untuk "Cara dan Panduan membuat related post thumbnail"

Post a Comment