Posted by : Arief Hilman Nugraha Rabu, 16 Januari 2013

Trik dan tips kali ini akan membahas cara membuat related post dengan thumbnails. Related Post atau Artikel Terkait digolongkan berdasarkan jenis kategori atau label pada posting kita. Artikel terkait ini akan kita letakan dibawah posting. Artikel Terkait juga akan disertai Thumbnails horizontal dan Judul Blog. Fungsi dari related post yaitu menyajikan informasi lain yang berkaitan dengan artikel yang kita baca.. Jika ingin membuatnya langsung saja menuju TKP:

1. Masuk ke Rancangan ---> Klik Edit HTML
2. Centang Expand Template Widget
3. Paste kode dibawah ini diatas kode </head>

<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.2em;
font-weight: bold;
color: black;
font-family: Georgia, &#8220;Times New Roman&#8221;, 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 src='http://sites.google.com/site/amatullah83/js-indahnyaberbagi/relatedpostwiththumbnails.js.js' type='text/javascript'/>
</b:if>

4. Cari salah satu kode berikut ini:
<div class='post-footer-line post-footer-line-3'>
atau <p class='post-footer-line post-footer-line-3'>
5. Setelah itu letakan kode dibawah ini, dibawah salah satu kode langkah ke.4
<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>
<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=6&quot;' type='text/javascript'/></b:if></b:loop><a href='http://amatulla83.blogspot.com' style='display:none;'>Related Posts with thumbnails for blogger</a><a href='http://www.bloggerplugins.org/' style='display:none;'>blogger widgets</a>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=5;
var relatedpoststitle=&quot;Related Posts&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if>
6. Terakhir simpan template anda.

Semoga artikel ini bermanfaat!

Leave a Reply

Subscribe to Posts | Subscribe to Comments

Welcome to My Blog

Guilty Ghost

Guilty Ghost
Haking Tips , Tips Dan Trick , dll Disini Tempatnya

Berlangganan Lewat Email

Subscribe via Email

Jam

Lagu

Total Pageviews

Arief Hilman Nugraha. Diberdayakan oleh Blogger.

- Copyright © Arief Hilman Nugraha - Robotic Notes - Disponsori Oleh Blogger - Editing by Arief Hilman Nugraha -