Artikel terkait dengan thumbnail versi 2

Artikel terkait dengan thumbnail ini sebenarnya sama dengan widget LinkWithin, namun kita terkadang penasaran bagaimana membuat widget tersebut, disini saya coba share bagaimana cara membuat widget seperti LinkWithin.

Berikut adalah langkah-langkah rinci untuk menginstal widget posting terkait untuk blogger dengan thumbnail :

1. login ke blogger masuk ke dashboard blogger Anda dan arahkan ke Layout> Edit HTML dan centang "Expand Template Widget" silahkan di centang

2. Cari kode </head>
3. Bila sudah ketemu danti dengan kode dibawah ini :

<!--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/AVvXsEhzlkrmWmyoJi94rvqObqLzCYWsNwL5m6boq4yl7pxJ71BfM8MZQoSwOjb_AfXckJ2JN7KwOagds57gfkLLaZIrtncfxd-wfWMVeKnkDMzont_5QW_MEiKjJEX1wdRwT81qFHC6aYUYyI8/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-->
</head>

4. Cari kode

<div class='post-footer-line post-footer-line-1'>
atau
<p class='post-footer-line post-footer-line-1'>

5. Taruh kode berikut di bawahnya

<!-- 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'>
</b:if></b:if>
<!-- Related Posts with Thumbnails Code End-->

6. Save dan lihat hasilnya

Jika anda menginginkan artikel terkait model yang lain silahkan baca "Cara Buat Related Post Flexible" Atau "Membuat Widget Artikel Terkait"

Posted in: WEBLOGGER