Kotak Berlangganan Artikel Dan Artikel Terkait Buat Blogger

Tweet

Kotak Berlangganan Artikel Dan Artikel Terkait Dengan Thumbnail Buat Blogger - D-Copy Blog | Hai sobat blogger, tutorial kali ini kita akan membahas tentang kotak berlangganan artikel dan artikel terkait buat blog Anda. Pada tutorial sebelumnya tentang cara buat facebook like box dan kotak berlangganan artikel dan cara buat kotak berlangganan artikel dan artikel terkait beserta facebook like box yang mungkin bisa Anda coba.

Langkah buat Kotak Berlangganan Artikel Dan Artikel Terkait Buat Blogger :

1. Buka akub blogger Anda
2. Masuk ke menu edit HTML, jangan lupa centang expand template widget
3. Cari kode dibawah ini :

]]></b:skin>

     4.  Pastekan kode dibawah ini, diatas pada kode diatas :

#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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnNuLfaSAiW6iRXN7lVVQv78Klzx2dFHV6CBJHVGOHt7tNWt30WKpc8RaNRUThAJvsrAyHpj4SheRgUOa_ckyDitouwuLqN0eYgMlb73QUVN4d71_ivfZ0XZxrhKlGDUodmp8KJjR8wkU/) 0 50% no-repeat;vertical-align:middle}
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}
.clearfix{display:inline-block}

    5.  Cari kode dibawah ini :

<data:post.body/>

Keterangan :

• Biasanya kode diatas ada 3-4 pada template, pastekan kode dibawah ini dibawah pada kode diatas pada kode 2 atau 3.
• Bila nantinya widget ini tidak muncul, maka langkukan pada kode yang lainnya sesuai dengan langkah 5 diatas.

     6.  Pastekan kode dibawah ini, dibawah pada kode dibawah :

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

 Keterangan :

• Ganti kode yang diwarnai sesuai kebutuhan blog Anda.

     7.  Save template Anda.

Terima kasih, semoga bermanfaat.
Sumber kode : http://www.bloggerbelog.com/2012/08/email-subscribed-thumbnail-related-post.html