Membuat related post dengan thumbnail seperti linkwithin

Related Post (Artikel Terkait) yang ada pada sebuah blog maupun website adalah merupakan suatu navigasi yang memudahkan pengunjung dalam mencari info apa yang di inginkan, dengan adanya Related Post akan sangat memudahkan dan memanjakan pengunjung sehingga bisa membuat betah pengunjung berada dalm blog anda karena sangat mudah mencari info yang terdapat dalam blog anda.
Tips yang saya tulis ini mungkin sediikit meniru dari situs linkwithin karena saya pikir banyak sekali yang berminat untuk membuat Related Post seperti milik Linkwithin yang tampilannya bisa anda lihat pada gambar di bawah ini:


Dan untuk membuatnya silahkan ikuti panduan singkat berikut:

1. Login/masuk blogger.com -> klik blog yang akan diedit
2. Klik Template -> Edit HTML -> Lanjutkan -> kasih tanda tik pada Expand Widget Template
3. Cari kode </head> :
4. Letakkan kode berikut persis di atasnya kode no.3

<!--Related Posts with thumbnails Scripts and Styles Start-->
<!-- remove --><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 type='text/javascript'>
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVOhxJnY-lc37HloJxzjxd9cFFZK1ahgVqiwLq91twA3v0TVb3kwmpQzLVZqIfEDlqMAHcXzjLaIIOCllcbsCyvEWxVlIFTCJLQX9e04QEH6h_lwToPk16_0z_8LIPkawqa_zFOfsGpAU/s400/noimage.png";
var maxresults=5;
var splittercolor="#d4eaf2";
var relatedpoststitle="Related Posts";
</script>
<script src='http://blogergadgets.googlecode.com/files/related-posts-with-thumbnails-for-blogger-pro.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

5. Cari kode ini: <div class='post-footer-line post-footer-line-1'>
6. Letakkan kode berikut persis setelah/di bawahnya kode no.5:

<!-- Related Posts with Thumbnails Code Start-->
<!-- remove --><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'/>
<!-- remove --></b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://www.alkhoirot.net/2011/05/related-posts-dengan-gambar.html'><img style="border: 0" alt="Related Posts Widget For Blogger with Thumbnails" src="http://image.bloggerplugins.org/blogger-widgets.png" /></a><a href='http://www.alkhoirot.net/' ><img style="border: 0" alt="Blogger Tutorial" src="http://image.bloggerplugins.org/blogger-templates.png" /></a>
</b:if></b:if>
<!-- Related Posts with Thumbnails Code End-->

7. Klik Simpan Template. Selesai.

Sumber: http://www.alkhoirot.net/2011/05/related-posts-dengan-gambar.html

Tweet