Cara Membuat Related Post Thumbnail Berjalan

Tweet

Sobat ALERON_LIGHT kali ini saya akan mensharingkan TUTORIAL
membuat related post dengan thumbnail...
Menampilkan link ke posting terkait bersama dengan thumbnail dari pos yang sesuai akan membantu Anda meningkatkan tampilan halaman / pengguna blog. Pengguna akan tergoda untuk pergi ke posting yang berkaitan ketika mereka disajikan menarik dengan thumbnail yaitu dengan gambar bergerak.
Ini juga menggunakan media yang dihasilkan oleh thumbnail blogger untuk setiap posting.

Berikut Screen Shootnya :

Menarik Bukan ...?
Ougkey untuk membuatnya yang pertama adalah

1. Seperti biasa, silakan Sobat login ke akun blog Sobat
2. Pilih menu rancangan/design > edit HTML dan jangan lupa beri anda centang pada Expand Template Widget
3. Cari kode (Agar lebih mudah gunakan shortcut ctrl+F untuk mencarinya
4. Setelah ketemu silakan Sobat Copy kode dibawah ini dan letakkan tepat diatas 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-->

kemudian anda cari kode berikut

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

atau

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

Jika sudah ketemu letakan kode berikut tepat dibawahnya

<!-- Marquee Serbablog 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=12&quot;' type='text/javascript'/></b:if></b:loop>
<h3><b>Related Posts</b></h3>
<marquee align='center' behavior='alternate' direction='left' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='2' width='100%'>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=10;
var relatedpoststitle=&quot;&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script></marquee>
</div><div style='clear:both'/>
</b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://serba-seru.blogspot.com/2010/02/thumbnail-related-posting-with-marquee.html' style='display:none;'>Thumbnail Related Post</a>
<a href='http://www.bloggerplugins.org/' style='display:none;'>blogger tutorials</a>
</b:if>
</b:if>
<!-- Marquee Serbablog Related Posts with Thumbnails Code End-->

Anda bisa mengganti jumlah posting yang ingin ditampilkan dengan mengganti anka 10

5. Langkah terakhir Simpan template
tara... dan lihat hasilnya
selamat mencoba