Cara Memasang Related Post Bergambar


Salam Blogger, hai sobat blogger sebelumnya mungkin kalian sudah memasang Recent Post atau Related Post pada blog kalian, tetapi berbeda dengan ini, tutorial ini membahas bagaimana membuat Related Post dengan gambar, cukup menarik dan elegant dengan memasang Related Post bergambar ini.

Langsung saja tutorialnya !

  • Login ke blogger dasbor kalian atau Login di Di Sini
  • Pilih Rancangan -- Edit Html -- Klik Expand Preview Template
  • Cari kode </head>
  • Letakan kode di bawah ini tepat di atas kode </head>
<!--Related Posts with thumbnails Scripts and Styles Start-->
<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.6em;
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://blogergadgets.googlecode.com/files/relatedthumbs21.js' type='text/javascript'/>
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

  • Selanjutnya cari kode 
  • <div class='post-footer-line post-footer-line-1'> 
  •  ATAU
  • <p class='post-footer-line post-footer-line-1'> 
  •  Jika sudah menemukan silahkan sobat copas kode di bawah ini di bawah kode di atas.

<!-- Related Posts with Thumbnails Code Start-->
<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://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html' 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="Related Posts";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if>
<!-- Related Posts with Thumbnails Code End--> 

  •  Keterangan :  var maxresults=5; Banyaknya Posting
  •  Keterangan :  var relatedpoststitle="Related Posts";  Judulnya
  •  Simpan Template  

Selamat Mencoba

1 komentar:

Unknown mengatakan...

wah, keren artikelnya gan
bermanfaat banget
thanks dah infonya

Posting Komentar