Membuat Related Post Thumbnail dan Feedburner Responsive

Related Post - dapat menjadi kebutuhan seorang blogger untuk memberikan kemudahan kepada pengunjung blognya atau mendapatkan jumlah page views yang lebih banyak. Nah, kali ini saya akan memberikan sebuah tutorial membuat Related Post dengan thumbnail yang keren beserta feedburner nya untuk template yang responsive. Berikut cara Membuat Related Post Thumbnail dan Feedburner Responsive. Kita akan main di Edit HTML Template

CSS

1. Letakkan CSS berikut tepat di atas ]]</b:skin>

.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}
.clearfix{display:inline-block}
#related{background:#F0F2F5; 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:50%;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);overflow:hidden;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;max-width:100%;}
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:#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/AVvXsEh5YWjQ7aOKGFEaGKHGRuiEnQMGNzdqdAw_nAddWpAFhyphenhyphenipQU5k41c-HHEeaVskdi0nlpFCvL7xzJz_w07WQ4qm9FVkQW0o2fSxAr1qp0qUBFQ9zA3NmGcmyGIn8RjFhgmY1cFdu9nvGg8/s1600/feed+icon.gif) 0 50% no-repeat;vertical-align:middle} 

2.  Letakkan CSS berikut tepat di bawah ]]</b:skin>

<style>
  @media screen and (max-width:480px){
#related .subscribe{
display:none;
}
#related .related-posts{
width:100%
}
</style>

HTML

Letakkan kode HTML berikut tepat di bawah <data:post.body/> (Jika ada 2 atau 3, coba satu-satu)

<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/AVvXsEjYww6EvmSIYpHpTNPInUdf6IpGkx_z-P6jdZ3sqhUNxO6upKgzkM-Fc680QAJypFxU7bsCdpPPL4Ut-y3UMyyM4JMJI10u-8XoUNKy-CsqpKeqZ7FdM3GB3inv_brQiISkPDGcIOnXfD4/s1600/no+image.jpg&quot;;
var maxresults=6;
</script>
<script src='http://js.hack4rt.us/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/Hack4rtus' 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://www.hack4rt.us/feeds/posts/default' title='Subscribe'>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=Hack4rtus&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
<input name='uri' type='hidden' value='JohnyTemplate'/>
<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/>
</form>
</div>
</div>
    </b:if>

Anda baru saja membaca artikel yang berkategori Blogger dengan judul Membuat Related Post Thumbnail dan Feedburner Responsive. Anda bisa bookmark halaman ini dengan URL http://akbar-barru.blogspot.com/2013/07/membuat-related-post-thumbnail-dan.html. Terima kasih!

Ditulis oleh: Unknown - Sabtu, 27 Juli 2013