MEMBUAT RELATED POST WITH THUMBNAIL

Related Post with thumbnail adalah merupakan fasilitas blog untuk memudahkan visitor menelusuri artikel (postingan) yang ada. Tujuan meletakkan Related Posts with thumbnail dibawah postingan adalah untuk memberikan referensi kepada pengunjung blog Anda tentang atau perihal artikel-artikel lainnya yang terkait dengan artikel yang sedang dibacanya.

Bentuk related post with thumbnail yang akan kita buat adalah seperti gambar di bawah ini :
Caranya mudah kok! Oke kita langsung praktekan saja ya. Silahkan ikuti langkah-langkahnya dibawah ini.
Step 1:
  1. Masuk ke akun Blogger Anda.
  2. Back up template Anda.
  3. Pilih Design -> Template
  4. Pilih Edit HTML -> Centang "Expand Widget Templates"
  5. Tekan Ctrl+F untuk mencari cepat kode </head>
  6. Letakkan kode dibawah ini tepat di atas kode </head>
<!--Start of Related Posts with thumbnails -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts{float:center;text-transform:none;height:100%; width:auto;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:.75em;margin-top:0;padding-top:0}#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://sites.google.com/site/mywebscript/images/noimage.png&quot;;
var maxresults=7;
var splittercolor=&quot;#d4eaf2&quot;;
var relatedpoststitle=&quot;Artikel Terkait&quot;;
</script>
<script src='https://sites.google.com/site/mywebscript/javascript/related-posts-thumb.js'
type='text/javascript'/>
</b:if>
<!-- End of Related Posts with thumbnails -->
Script yang berwarna merah merupakan judul navigasi, anda dapat menggantinya menjadi related post atau kata-kata lain yang sesuai dengan keinginan anda.
Step 2:
  1. Cari kode <div class="post-footer-line> atau <post-footer-line-1">
  2. Letakkan kode dibawah ini tepat di bawahnya, atau sesuaikan dengan template blog Anda.
<!-- Start of Related Posts with Thumbnails -->
<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'/>
</b:if>
<!-- End of Related Posts with Thumbnails -->
Script yang berwarna merah menunjukkan jumlah artikel terkait yang akan ditampilan, anda dapat merubahnya sesuai ukuran kolom postingan blog yang anda miliki.
Demikianlah uraian tentang membuat related post with thumbnail ini, semoga dapat bermanfaat.

Share this Article on :

1 komentar:

Hery mengatakan...

coba dulu gan tp d template saya ada dua kode 'post-footer-line post-footer-line-1'>
kode yg mana yg dipakai?

Posting Komentar

 

© Copyright satu untuk semua 2011 -2012 | Design by Satu Untuk Semua | Powered by Blogger.com.