Cara dan Panduan membuat related post thumbnail

Home Trik Cara dan Panduan membuat related post thumbnail

Cara dan Panduan membuat related post thumbnail

Diposting oleh: Dafin defandaky pada: 14 April 2013

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/AVvXsEhRErjocL04uYmey4PKrZZwHwH58AQeN1jnauFWelVXNeNQZp4YtZZK5szVKtdTFTFuWLyeHbUzwoepptq0S81-VPMg4xkHm0KwNlIVyOL1zCBwOQqJ-K4DyFK0DYBTqdLVZ3vil0r-hWg/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...

Tidak ada komentar :

Link aktif dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan kode, gunakan tag <i rel="code">...KODE ANDA DI SINI...</i>
Untuk menyisipkan script, gunakan <i rel="pre">...KODE SCRIPT ANDA...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">...URL GAMBAR ANDA ...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">...JUDUL ANDA...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">...CATATAN ANDA...</b>
Untuk menciptakan efek tebal gunakan tag <b>...TEKS ANDA...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>...TEKS ANDA...</i>

Konversi KodeOOT