| 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.
A
rtikel 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
]]></b:skin>
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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjac_X7fdpQ5RjnaPeSTR6kEXdukvrgxNi6-rpHlv0HbTP2gm1hEhT9RL-iH6Dh2lG12vbpWc7TsUXkqrzEjfcTWbnp0p_cWtZ662BXYIjEuEsfGl0K9FLynPITxc2NL7AqDDfuLQmwApY/)
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 == "item"'>
<div class='clearfix' id='related'>
<div class='related-posts'>
<p>Related Articles</p>
<script type='text/javascript'>
var
defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhndGEnlP4TRsMByWN68DekX-3kIf0sUr7HZ12YA-cPVBiGqMfBCj-UB3UV0Ie2bkdaWmPo3Zz3RyXNZFES98_WXku0aMrYkr9_zl7TKRpYLUzV24LdL8DoH25-uM-7wxcZlrkaKv9L45w/s1600/no+image.jpg";
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 != "true"'>
</b:if>
<script
expr:src='"/feeds/posts/default/-/" + data:label.name
+
"?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6"' type='text/javascript'/>
</b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs("<data:post.url/>");
</script>
</div>
<div class='subscribe'>
<p class='intro'>Jika Kalian Ingin Berlangganan Klik Disini <a href='http://feeds.feedburner.com/yugairgi/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('http://feedburner.google.com/fb/a/mailverify?uri=ID feedburner
Anda', 'popupwindow',
'scrollbars=yes,width=550,height=520');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 ==
"") {this.value = "Enter your
email";}' onfocus='if (this.value == "Enter your email") {this.value = "";}' 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/wahanamusikindo/update'><img alt='' height='26' src='http://feeds.feedburner.com/~fc/ID Feedburner Anda?bg=ceaa6c&fg=444444&anim=1' style='border:0' width='88'/></a>
</form>
</div>
</div>
</b:if>
Keterangan :
- Kode yang Berwarna Merah adalah Id Feedburner Anda
- Kode yang Berwarna Orange Ganti Dengan Alamat Blog Anda
- Kode yang Berwarna Biru Muda adalah Maksimal Artikel Terkait yang Muncul , Ganti Sesuai Kemauan Anda
- Kode yang Berwarna Hijau Ganti Sesuai Kemauan/ Kata- Kata Anda Sendiri
8. Klik Simpan dan Lihat Hasilnya di Blog Anda
