Cara Membuat Related Posts dan Email Subscribe Di Bawah Postingan Blog

Cara Memasang Related Posts dan Email Subscribe - Anda dapat lihat terlebih dahulu ostingan sebelumnya mengenai cara membuat related posts dengan fungsi scroll, kali ini sya akan membahas tentang cara membuat related posts dengan gambar / thumbnail berserta email subscribe atau berlangganan artikel berada dibawah postingan blog. nah kali ini akan share cara meletakkan related posts / artikel terkait dan email subscribe dibawah postingan blog.

Cara Memasang Related Posts dan Email Subscribe dibawah Postingan :
1. Login ke blogger dan buka blog anda
2. Pada dashboard, pilih template => Edit HTML
3. Tekan Ctrl+F, cari kode ]]></b:skin> lalu copypaste kode berikut diatasnya

#related{background:#fff; 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:53%;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:41%;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/AVvXsEiV1LAut3ap0drANeLw1cDgNORnnoONWrSIzaO8toQzJo4dVzTiRUW4LMMuCb6efGwFgomma-UVVZfyme7eWB5MTS8rtTJCOKDa2iiQ3vV1_Fsk67QzVW9V8PjEOG8JgeKLL27_7X9piF8/s1600/feed+icon.gif) 0 50% no-repeat;vertical-align:middle}
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}
.clearfix{display:inline-block}

Keterangan :
Silahkan ganti kode warna pink yang merupakan background dari kotak related posts

4. Lanjut dengan mencari kode <data:post.body/> lalu letakkan kode berikut dibawahnya
5. Jika pada template ditemukan 2 atau 3 kode tersebut, pilih kode yang nomor 2

<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/AVvXsEggXRsRx8D4KrW7QSEEhQieThQosw8toQHN-ZLjzDR4DtOTIXBrV7GdnsiLF_erC3QkMp6NCd4O-8s3E88GsUB317qZkr90WdPxkZhkXySgd9qk8BeR2qEJBlMmAOpSN27mAMXSnlCFvI4/s1600/no+image.jpg";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 != "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'>If you enjoyed this article just <a href='http://feeds.feedburner.com/terlintas' 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://lintas-tutor.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=terlintas', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'><input name='uri' type='hidden' value='terlintas'/>
<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>Your information will not be shared.</small><br/>
<a href='http://feeds.feedburner.com/terlintas'><img alt='' height='26' src='http://feeds.feedburner.com/~fc/terlintas?bg=0F61CB&fg=222222&anim=1' style='border:0' width='88'/></a></form></div></div>

Keterangan :
Silahkan ubah teks warna merah dengan nama feedburner anda dan warna biru dengan Url blog anda

6. Simpan template

Demikianlah tutorial blog mengenai Cara Membuat Related Posts dan Email Subscribe Dibawah Postingan Blog, semoga bermanfaat.

tutorial blog

Terlintas

Cara Membuat Related Posts dan Email Subscribe Di Bawah Postingan Blog

Related Posts

Entri Populer