Selamat malam sahabat semua, mohon maaf jika blog ini jarang di update di karenakan sedang ada kesibukan dengan kegiatan belajar , kali ini saya akan berbagi artikel tentang membuat Related Post Thumbnail sekaligus dengan kotak Feedburner
Sebenarnya sudah banyak yang memposting artikel yang sama , tetapi tidak apa-apalah buat nambah nambah koleksi di blog saya ini
mungkin pada kelamaan kalo nunggu saya jelasin tentang tutorial ini ,langsung di simak dan di praktekin saja lah :
- Pertama Anda harus login ke blogger dulu
- Kemudian klik Template > pilih Edit HTML
- Setelah itu, letakkan kode berikut di atas kode ]]></b:skin>
#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/AVvXsEj6ryEswG4ykUdxyEvEmOBJM71m082pimMrvc43mXZpU7TekbAzzGW_yUlx2HXTeAQsycYlhNX-UYbNkH-uOPmy0pE3yXlmjaFQCyrdPbYzjYpGr3Gkf4X4ixJARoAmfJ9mk6xCjEfi178/)
0 50% no-repeat;vertical-align:middle}
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}
.clearfix{display:inline-block}
Masih pada posisi Edit HTML, letakkan kode di bawah ini setelah <data:post.body/> (jika ada 2 atau 3 pilih kode yang terakhir)
<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/AVvXsEgFSu2bPkwH4VPAcr4bGeGupBl54T0-GGM4MdlhohbNYEgYUpVE_SDkMWUsLncurrSzJPnFqabHtiOqJ01HtN0CTUSFjFg24KAqdTg6AJw_vH6qACYb4X9iEoYIqIrh7LJYn68fI1wKPys/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/BlogerKmc' 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://bloger-kmc.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=BlogerKmc',
'popupwindow',
'scrollbars=yes,width=550,height=520');return true'
target='popupwindow'>
<input name='uri' type='hidden' value='BlogerKmc'/>
<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. Ever.</small><br/>
<a href='http://feeds.feedburner.com/BlogerKmc'><img alt='' height='26' src='http://feeds.feedburner.com/~fc/BlogerKmc?bg=ceaa6c&fg=444444&anim=1' style='border:0' width='88'/></a>
</form>
</div>
</div>
</b:if>
Keterangan :
Warna biru : ganti dengan alamat feed anda.
Warna merah : ganti dengan URL anda.
- Jika ada yang kurang pas atau tampilanya kuang tepat tinggal di Alt + Ctl + Z pada keyboard dan edit lagi sampe hasilnya memuaskan
- Terakhir Save Templates, dan lihat hasilnya di bawah postingan Anda.
Mungkin sekian sedikit Tambahan informasi dan update Artikel dari blog saya , semoga bermanfaat bagi pengunjung semua, apabila ada yang kurang jelas bisa berkomentar
oh iya follow juga blognya donk biar blog ini semangat mengUpdate Artikelnya
Belum ada tanggapan untuk "Membuat Thumbnail dan kotak Feedburner di Blog"
Posting Komentar
Terima Kasih Sobat Sudah:
1. Berkomentar Dengan Sopan
2. Tidak Memasukkan Link Aktif Dalam Form Komentar
3. Berkomentar Sesuai Artikel/Postingan
4. Berilah Informasi Kepada Admin Jika ada script yang Sudah tidak berfungsi
5. komentar Jorok/kasar /berbau Sara/Porno /saya anggap sebagai SPAM