1News Online:
Home » » Tutorial Blog - Creating Related Post Thumbnails and Box FeedBurner

Tutorial Blog - Creating Related Post Thumbnails and Box FeedBurner

Sunday, October 14, 2012 | 1:01 PM

This article answers some blogger friends who wanted to make feature Related Post thumbnails at once with Feedburner box. Features related post thumbnail and feedburner box has become a integral part and is usually located under the posts. Previously I've discussed in this tutorial also adds two columns under the posts, but it is too simple and may be less appealing to the interest of visitors to linger on the blog, especially the development of today's bloggers, many new tutorials using jQuery so that bloggers be one CMS can not be underestimated.

related post feedburner

Actually I still wanta linger chat around ngidul, but because there is a football game tonight between Barcelona vs. AC Milan must cepet-cepet let sleep get up later malem. Okay right, I will give a tutorial to make it, such as the image above demo can be seen here in the post:
First you must login to the first blogger
Then click Template> Edit HTML select check expand widget templates
Do not forget to backup your template first, just in case if there is an error in the editing later.
After that, put the following code above the code]]> </ 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(http://lh3.ggpht.com/_pt7i0nbIOCY/SuPmf8r8eqI/AAAAAAAACXM/BYjbuwVwxas/FeedIcon-16_thumb.gif) 0 50% no-repeat;vertical-align:middle}
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}
.clearfix{display:inline-block}

Still on the position of the Edit HTML, put the code below after <data:post.body/> (if there are 2 or 3 select the last code)

<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;http://2.bp.blogspot.com/-uitX7ROPtTU/Tyv-G4NA_uI/AAAAAAAAFBY/NcWLPVnYEnU/s1600/no+image.jpg&quot;;
var maxresults=6;
</script>
<script src='https://masolis-javascript.googlecode.com/svn/trunk/related.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/JohnyTemplate' 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://johnytemplate.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=JohnyTemplate&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/>
<a href='http://feeds.feedburner.com/JohnyTemplate'><img alt='' height='26' src='http://feeds.feedburner.com/~fc/JohnyTemplate?bg=ceaa6c&amp;fg=444444&amp;anim=1' style='border:0' width='88'/></a>
</form>
</div>
</div>
</b:if>


Description:
Blue color: replace with your feed address.
The red color: replace with your URL.
Last Save Templates, and see the results in the bottom of your posts.
Tutorials make related post thumbnail feature with feedburner above is suitable for a blog that has a black background color or background. But if your blog has a white background color or colors you just modify the CSS code number 4 above. So this tutorial, good luck and hopefully useful.

Kongsi artikel ini : :

Post a Comment

 
Copyright © 2012. 1News Online - All Rights Reserved
Proudly powered by Blogger