Memasang Related Post dengan Kotak Berlangganan

Bocah Poris Blogs | Cara Membuat Artikel Terkait with Thumbnail di Blogger Dengan Kotak Berlangganan ini Sangat Mudah Jika Kalian ikuti Tutorial ini Dengan Seksama. Sebelumnya saya sudah Membuat Artikel Tentang Cara Membuat Recent Post Menurut Label . Sebelum Kita Ke Tutorial Memasang Related Post dengan Kotak Berlangganan ( Kotak Feedburner ) Kalian Harus Mengetahui Apa sih Fungsi Kita Memasang Artikel Terkait Dengan Kotak Berlangganan dari Feedburner ini ? yang Kalian Tahu Sebelumnya Artikel Terkait Berfungsi Untuk Pengunjung Menjelajahi Blog kita dan Menghindari namanya Bounce Rate. dan satu lagi Fungsi Kotak Berlangganan Dengan Kotak Berlangganan ini Memungkinkan Para Pengunjung Untuk Berlangganan Artikel Kita Via Email. dan Dengan Fungsi Berdampingan Juga untuk Tidak Memakan Banyak Tempat.
Artikel Terkait Dengan Thumbnail atau Gambar dan Kotak Berlangganan Banyak Sekali dicari .. :v Mungkin ...

nah Kita Langsung Ke Tutorial Cara Memasang Artikel Dengan Kotak Berlangganan Keren  dengan Mudah 

1. Login Seperti Biasa Ke Akun Blogger Anda


2. Setelah Login Masuk Ke Menu Template Anda


3. Lalu Klik Edit HTML > Centang Expand Template Widget

4. Lalu Cari Kode dibawah ini

]]></s:kin>

5. Setelah Ketemu Copy kode dibawah dan Taruh Tepat diatas ]]></s:kin>

#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}

6. Setelah Itu Cari Lagi kode dibawah

 <data:post.body/>

Keterangan : Biasanya Kode <data:post.body/> ada 3-4 Bagi Kalian yang sudah Memasang Auto Readmore .
Taruh Saja diantara Kode 2 atau Kode ke 3

7. Setelah Ketemu Lalu Copy lagi Kode dibawah <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/AVvXsEjogakWc4hXhDWY5l4BSA-Nl6xAomnJ4vY4gQlOimoBxJNSB54_K-cZf3rrkevQ0Ss0tbNe7C6-8fWAsArQNEldlUELXr4_k44vuH5280rrgDTorzNXGFUWrF9XPmvOVsOlZ4_nR5X-gZU/s1600/no+image.jpg&quot;;
var maxresults=6;
</script>
<script src='http://bocahporis.googlecode.com/files/related-withsubcribs.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'>Jika Kalian Ingin Berlangganan Klik Disini <a href='http://feeds.feedburner.com/bocahporis/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://bocahporis.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>Informasi Anda Tidak akan Kami Bagikan Selamanya.</small><br/>
<a href='http://feeds.feedburner.com/bocahporis/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 :

1.  Kode yang Berwarna Merah adalah Id Feedburner Anda
2. Kode yang Berwarna Orange Ganti Dengan Alamat Blog Anda
3. Kode yang Berwarna Biru Muda adalah Maksimal Artikel Terkait yang Muncul , Ganti Sesuai Kemauan Anda
4. Kode yang Berwarna Hijau Ganti Sesuai Kemauan/ Kata- Kata  Anda Sendiri

8. Klik Simpan dan Lihat Hasilnya di Blog Anda

Nah Cukup Sampai disini Artikel Cara Memasang Artikel Terkait Dengan Kotak Berlangganan 

Semoga Dengan Widget ini Pengunjung blog Anda Semakin Ramai