Related Post Bergambar (Thumbnail) Di Blog

Assalamualaikum sobat blogger.
Masih seperti postingan terakhir Qiqi tentang membuat related post. Akhirnya Qiqi mendapatkan tutornya setelah mencari kesana kemari, tinggal sobat  blogger aplikasikan saja. Buat sobat blogger yang masih newbie pasti pas banget tutornya untuk di pajang di blognya. Buat yang sudah tahu tutor ini di mohon hanya untuk sekedar sundul postingan saya ini. Udah gak perlu banyak bicara lagi langsung saja ke langkah-langkah pengaplikasiannya di blog sebagai berikut :

• masuk akun blogger sobat
• pilih template --> edit html --> klik procced
• centang expand widget, lalu copas kode di bawah ini sebelum/diatas kode </head> (tekan Ctrl+F)

<!--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/AVvXsEg5fskLtHsQWTTvfqpYIuiH5-_ykoH2u3wMcqiEVjGImfk_ME0IYqbgdZRV3b4JIe2YS-C9pXVjiTb7KBH7ATGN2-oyWWUD9otxzCWjfrSYpeO6i3MCphDQBYvQGIXYDDlYAClzTfXn230/s400/noimage.png";
var maxresults=5;
var splittercolor="#d4eaf2";
var relatedpoststitle="Related Posts";
</script>
<script src='http://bloggergadgets.googlecode.com/files/related_posts_with_thumbnails_min.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

• jika sudah, sekarang sobat cari kode <div class='post-footer-line post-footer-line-1'> jika kode tersebut tidak di temukan, sobat bisa mencari kode ini <p class='post-footer-line post-footer-line-1'>
• Jika sudah ketemu silahkan copas kode di bawah ini setelah/dibawah kode diatas.

<!-- 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=5&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.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.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://bloggertemplates.bloggerplugins.org/' ><img style="border: 0" alt="Blogger Templates" src="http://image.bloggerplugins.org/blogger-templates.png" /></a>
</b:if></b:if>
<!-- Related Posts with Thumbnails Code End-->

• jika sudah semuanya, silahkan sobat simpan template sobat, lalu lihat hasilnya.

Semoga tutorial ini bermanfaat bagi kita semua, dan happy blogging buat sobat blogger yang newbie

Jika ada kesalahan, kritik, dan saran silahkan layangkan saja melalui FB ataupun kotak komentar.

Sumber http://tjoretan-akoe.blogspot.com/

Artikel Terkait :

Posted in: Blogger