Cara Membuat Kotak FeedBurner + Related Post

Cara Membuat Kotak FeedBurner + Related Post - Poetra Pakumis | kali ini saya akan share Cara Membuat Kotak FeedBurner + Related Post di blog memang cara ini sudah banyak di share oleh para blogger master tapi saya sedikit berbeda biasa nya Kotak FeedBurner + Related Post yang di share oleh para blogger master berwarna hitam tapi kebanyakan template kita berwarna putih jadi saya edit sedikit menjadi berwarna putih cara ini saya pelajari dari template maskolis yaitu Jony Wuss. berikut screenshotnya :

Berikut Cara Membuatnya :

1. Login ke akun blogger sobat seperti biasa.

2. Pilih Template - Edit HTML (Jagan lupa centang Expand Widget Templates). Backup dulu templatenya untuk berjaga-jaga bila ada kesalahan pada saat proses pengeditan.

3. Lalu cari kode ]]></b:skin> dan letakan kode di bawah ini tepat di atas kode ]]></b:skin>.

#related{background:#F0F2F5; border:1px solid #aaa;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{font:bold 14px Arial;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 #aaa;display:block;height:72px;position:relative;width:72px;color:#fff;text-decoration:none;text-shadow:0 1px 0 #000;font:11px Arial}
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:#333;}
#related .subscribe p.intro{font-weight:400}
#related .subscribe p.feed{margin-bottom:10px;font-weight:700;padding-left:21px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3wTQ7Tny4KmKms0d2hbxvVgWKZRRRne8_8rxxi1NlnalBbcxdsJH1nw32sOKOrjVsn195DIpsvLRiNWAE2CrrLFpJCpn4IjQ50aLQ2GFJ1ybgeA1TXcVBcNVNTyv6HY3GZdfYh-57Ywk/s1600/feed+icon.gif) 0 50% no-repeat;vertical-align:middle}
.clearfix:after{content:&quot;.&quot;;display:block;height:0;clear:both;visibility:hidden}
.clearfix{display:inline-block}

4. Setelah itu cari kode <data:post.body/> lalu letakan kode di bawah ini tepat di bawah kode <data:post.body/>.

<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/AVvXsEi5rGyRTw1H5sGtFdFlM6RIBrcpvf2nUI95wuwdwo83FaQTs60h13uZcMQnMV4LZwbz7LAe7RKEHspJvaS_XbIKtACd2dlPtFZbXKsvHNvNNQDEa4Ua7qb8dSSqkjGGhH2IezyVdonuThM/s1600/no+image.jpg&quot;;
var maxresults=6;
</script>
<script src='http://yourjavascript.com/1198561349/relatedimg.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/ID Feedburner sobat' 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://url blog sobat.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=ID Feedburner sobat&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
<input name='uri' type='hidden' value='ID Feedburner sobat'/>
<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/ID Feedburner sobat'><img alt='' height='26' src='http://feeds.feedburner.com/~fc/ID Feedburner sobat?bg=ceaa6c&amp;fg=444444&amp;anim=1' style='border:0' width='88'/></a>
</form>
</div>
</div>
</b:if>

Note :
Kode yang berwarna merah adalah ID Feedburner sobat, sesuaikan dengan keinginan sobat.
sedangkan kode berwarna biru itu adalah URL blog sobat.

5. Save dan lihat hasilnya.

Nah sekian artikel saya tentang Cara Membuat Kotak FeedBurner + Related Post semoga artikel yang saya tulis bermanfaat bagi sobat semua.

Jika anda menyukai artikel Cara Membuat Kotak FeedBurner + Related Post dan ingin memosting artikel ini.

Bila Anda menjumpai BROKEN LINK atau LINK YANG RUSAK, silahkan berkomentar di bawah postingan pada kotak komentar yang disediakan.