Cara Membuat Related Post Thumbnail Plus Kotak Feedburner

Cara Membuat Related Post Thumbnail Plus Kotak Feedburner | Pada postingan sebelumnya saya juga pernah bahas tentang cara membuat Related Posts / Artikel Terkait dengan fungsi scroll di blog dan untuk postingan yang berikutnya juga pernah saya bahas mengenai cara bikin Related Post / Artikel Terkait Thumbnail di dibawah postingan . Nah pada Postingan kali ini akan membahas tentang Related Post / Artikel Terkait juga, tapi pada pembahasan ini saya akan menggabunfkan Artikel Terkait di bawah postingan dengan Kotak Feedburner. Menarik Bukan? Tutorial ini saya dapat dari creatingwebsite-maskolis.  Lalu bagaimana cara membuat fitur Related Post Thumbnail/gambar yang digabung dengan kotak Feedburner dalam satu kotak tersebut? Mudah sekali kok.Ok kita langsung ke topik pembahasan. Nanti hasilnya akan terlihat seperti gambar di bawah ini di bawah postingan blog. Contoh related post / artikel terkait yang ada di gambar saya ini cuma ada satu gambar, jika postingan anda banyak, maka akan terlihat hanya 6 gambar saja.

Berikut langkah cara bikin related post plus feedburner di bawah postingan blog :
1. Login ke Blogger
2. Pilih Rancangan
3. Pilih Edit HTML centang expand widget templates
4. Backup dulu template anda, biasa deh untuk jaga-jaga apabila ada kesalahan edit
5. Lalu cari kode ]]></b:skin>
6. Kalau sudah dapat, letakkan kode di bawah ini tepat di atas kode ]]></b:skin>

#related{background:#222; border:1px solid #000; border-bottom:1px solid #444; border-right:1px solid #444;text-shadow:0 1px 0 #000;margin:0 0 5px;padding:10px}
ul#related-posts{font:bold 11px Arial;list-style:none;text-transform:none;margin:10px 0;padding:0}
#related .related-posts{font-weight:400;width:50%;float:right}
#related .related-posts p{margin:0}
ul#related-posts li{float:left;height:auto;list-style-type:none;margin:0 5px;padding:2px 1px}
*html ul.rp#related-posts li{margin:0 13px}
ul#related-posts li a{-moz-box-shadow:0 1px 2px rgba(0,0,0,0.15);border:2px solid #333;display:block;height:72px;position:relative;width:72px;color:#eaeaea;text-decoration:none;text-shadow:0 1px 0 #000}
ul#related-posts li .overlay{height:66px;line-height:16px;position:absolute;width:66px;z-index:10;padding:6px 0 0 6px}
ul#related-posts li a:hover .overlay{background:#000;display:block!important;opacity:0.7}
ul#related-posts li img{bottom:0;padding:0!important}
ul#related-posts li a:hover{-moz-box-shadow:0 1px 3px rgba(0,0,0,0.25)}
#related .subscribe{width:43%;float:left;color:#bdbdbd;}
#related .subscribe p.intro{font-weight:400}
#related .subscribe p.feed{margin-bottom:10px;font-weight:700;padding-left:21px;background:url(http://lh3.ggpht.com/_pt7i0nbIOCY/SuPmf8r8eqI/AAAAAAAACXM/BYjbuwVwxas/FeedIcon-16_thumb.gif) 0 50% no-repeat;vertical-align:middle}
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}
.clearfix{display:inline-block}

7. Berikutnya anda cari lagi kode <data:post.body/>
8. Kalau sudah dapat, letakkan kode di bawah ini tepat di bawah kode <data:post.body/> (jika pada template anda terdapat 2 atau 3 kode, anda pilih kode yang terakhir ya)

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='clearfix' id='related'>
<div class='related-posts'>
<p>Related Articles</p>
<script type='text/javascript'>
var defaultnoimage=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTOBUk6uySE7t6biiJGLXHqi9BLNw3QA4JX-cupAGvUFpmXTfl2mZhWHl69PJ9hLhBYmw7j4PjRJk83YV7F_44ORsh-pc1IF28_Ka1TIeIj2ITfuxobwNThoVuTj_de5XopLqVmGhhfWo/s1600/no+image.jpg&quot;;
var maxresults=6;
</script>
<script src='https://sites.google.com/site/blogrudyhartono/js/related.js' type='text/javascript'/>
<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 class='subscribe'>
<p class='intro'>If you enjoyed this article just <a href='http://feeds.feedburner.com/BlogRudyHartono' target='_blank' title='feedburner'>
<b>click here</b></a>, or subscribe to receive more great content just like it.</p>
<p class='feed'><a href='http://teknik-blog-tutorial.blogspot.com/feeds/posts/default'>Subscribe via RSS Feed</a></p>
<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=BlogRudyHartono&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
<input name='uri' type='hidden' value='BlogRudyHartono'/>
<input name='loc' type='hidden' value='en_US'/>
<input id='botsub' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Enter your email&quot;;}' onfocus='if (this.value == &quot;Enter your email&quot;) {this.value = &quot;&quot;;}' type='text' value='Enter your email....'/>
<input id='botsubbutton' type='submit' value='Submit'/><br/>
<small>Your information will not be shared. Ever.</small><br/>
<a href='http://feeds.feedburner.com/BlogRudyHartono'><img alt='' height='26' src='http://feeds.feedburner.com/~fc/BlogRudyHartono?bg=ceaa6c&amp;fg=444444&amp;anim=1' style='border:0' width='88'/></a>
</form>
</div>
</div>
</b:if>

9. Selesai, Save Templates dan lihat hasilnya di bawah postingan blog anda.

Keterangan :
Warna pink : ganti dengan alamat feed anda.
Warna biru : ganti dengan URL anda.

Sumber : http://teknik-blog-tutorial.blogspot.com/2012/05/cara-membuat-related-post-thumbnail.html