Related Post Thumbnail Dan Feedburner Dibawah Postingan

SHADOWS pada kesempatan ini akan menshare sebuah tips dan trik Related Post Thumbnail dan Feedburner Dibawah postingan tutorial ini sangatlah praktis dan elegant ini menurut pandangan saya, karena bentuknya menyatu dan tidak memakan tempat di bawah postingan anda sehingga terlihat rapi. Dari perkataan saya diatas anda pasti sudah beramsumsi dengan kerapihannya bukan, itulah yang saya maksudkan bagaimana anda ingin mencobanya? marilah kita simak bersama oh iya Related Post Thumbnail dan Feedburner Dibawah postingan ini sudah saya terapkan sudah lama di bolg saya yang lain ini lihat gambarnya dibawah ini.

Related Post Thumbnail Dan Feedburner Dibawah Postingan

Nah itulah contoh dari blog saya yang lain anda berminat dengan tampilannya mari ikuti caranya berikut ini :

1. Pertama masuk ke blog anda.

2. Kedua cari dikiri anda lalu klik TEMPLATE > lalu klik EDIT HTML sebelumnya backup         dahulu template anda untuk menjaga kemungkinan error.

3. Lalu cari pergunakan CTRL+F agar lebih cepat ]]></b:skin, letakkan css dibawah ini           tepat diatasnya.

#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/AVvXsEi5Rp5tHdQ4do-UwXvirqEwjkkLJlX7ZmHFHK9y-u_cHp_vgbhFfkb7JuZcmeWdxDyYIcThO8Z0-9Oj1JeeiDrkn8RLcKzEQ2bVg_ITJqRMxk0_wButXq6Ko0UxMTpCnsKjW-nSE1y5etc/) 0 50% no-repeat;vertical-align:middle}
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}
.clearfix{display:inline-block}

4. 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 == &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/AVvXsEiJlbxh_3VQt7TSSopkvEWamyZEfLbp0Gh70Y4LrbfJ65mqY78OSwwLa57Bnoru8tBv6DchaXhRRNVrabL440RY3yM2DSdwsJj38XIplMN9_pH26AUdp1gK4mTDgzMg5WKWf4aDtxolon4/s1600/no+image.jpg&quot;;
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 != &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/shadows-k' 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://shadows-k.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=shadows-k&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
<input name='uri' type='hidden' value='shadows-k'/>
<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/shadows-k'><img alt='' height='26' src='http://feeds.feedburner.com/~fc/shadows-k?bg=ceaa6c&amp;fg=444444&amp;anim=1' style='border:0' width='88'/></a>
</form>
</div>
</div>
</b:if>

Keterangan : warna merah ganti dengan url anda sendiri
                     warna biru ganti dengan alamat feed anda.

5. Klik save template.

Related Post Thumbnail Dan Feedburner Dibawah Postingan sudah selesai anda buat semoga tampilan blog anda semakin teratur dan elegant di mata pengunjung agar betah berlama lama di blog anda

Baca juga untuk penampilan blog : http://shadows-k.blogspot.co.id/2015/10/membuat-effect-shadow-widget-sidebar.html