Kali ini saya akan menerangkan cara membuat related post thumbnail dengan kotak subscribe pada blogspot jadi intinya gabungan antara keduanya, sehingga anda dapat meletakkan di blog anda sekaligus mempercantik blog mas bro...Langsung saja bagaimana cara membuat Related Post Thimbnail Blogspot dengan Kotak Subscribe :
Log in pada blogspot anda
Klik Template >> Edit Html >> Process >> Centeng Expand Widget Template
Kemudian cari ]]></b:skin> kemudian letakkan code dibawah ini diatas ]]></b:skin>
codenya :
#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/AVvXsEhCoQhzN-nByu2xpk_takYRT0GbT7GuWGLiPe05zEKjB-t3T_2-lGPHL2Bn9JRIN_DkyvwYghnvFqKKXFllQXa6GBd3juvHzO5qOSIFqbbQvh4rlqf_JHXeavR1oHx_ue03UcXme5bT4OE/) 0 50% no-repeat;vertical-align:middle}
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}
.clearfix{display:inline-block}
Kemudian cari code <data:post.body/> dan letakkan code dibawah ini tepat dibawah <data:post.body/>
code :
<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/AVvXsEg6dw25BWFJ9E6MwKicfwXsID8NtNjSvipcLRnxzgGC_S3RA8kB7ziKzLkSH0b_9NElXjvFFsF4z_L_qrBjUERENrg9sDjXjt4KOsmTGlIR58orfWSvabrYNAAqyNUuBHQBTOLd5NQ4aY8/s1600/no+image.jpg";
var maxresults=6;
</script>
<script src='https://sites.google.com/site/blogrudyhartono/js/related.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/blogspot/rsuHG' 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://watchmyscenery.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=blogspot/rsuHG', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'>
<input name='uri' type='hidden' value='blogspot/rsuHG'/>
<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/blogspot/rsuHG'><img alt='' height='26' src='http://feeds.feedburner.com/~fc/blogspot/rsuHG?bg=ceaa6c&fg=444444&anim=1' style='border:0' width='88'/></a>
</form>
</div>
</div>
</b:if>
Selesai deh.
Note :
http://watchmyscenery.blogspot.com ganti dengan url anda
blogspot/rsuHG ganti dengan nama feed anda
0 Response to "Related Post Thimbnail Blogspot dengan Kotak Subscribe"