Simple Cute Related Post Widget Without Thumbnail

Simple Cute Related Post Widget Without Thumbnail

9
data:blog.title
related article

Related Post Widget is useful to get more page visit. So today you won't find any templates without related post widget. Though blogger didn't introduce related posts widget so blogger always have to rely on outsider sources. List style related post is old concept but it is useful to make your site load faster. So I have coded this related post with little unique design. You will get every Related post with RSS feed icon and the icon will change color on mouse over. Hope it will help you to tailor your blog.  So just follow the simple steps to install related post widget into your blog.



Step 1 Log in to your blogger account and Click on Template  ->

Step 2 Now click on 
Edit HTML-> Unfold code

Step 3 Now find ]]></b:skin> by Pressing  Ctrl + F


Step 4 And Paste the below code above ]]></b:skin> and save your template


/* Related Post By www.bloggerspice.com */
#related-articles{float:left;width:350px;}
#related-articles .widget{margin:0;padding:0}
#related-articles .widget h2,#related-posts h2{font:bold 13px Arial;color:#000;text-transform:none;margin:0 0 5px;padding:0}
#related-articles a{color:#4a4e2d;font:12px Arial}
#related-articles a:hover{color:#ea5402}
#related-articles ul{margin:0;padding:0;list-style:none;}
#related-articles ul li{background: transparent url(http://1.bp.blogspot.com/-P26N2BhOsKQ/UWj9MiCQdJI/AAAAAAAACdg/PR1LFWUajpQ/s1600/01.png) no-repeat 0 8px;text-indent:0;line-height:1.2em;margin:0;padding:2px 0 2px 10px; border-bottom:2px dotted #cccccc;}
#related-articles ul li:hover{  
background: transparent url(http://1.bp.blogspot.com/-OW5xQONNGas/UWj9MpUYgrI/AAAAAAAACdk/ND716bEBGi8/s1600/25.png) no-repeat scroll 0px 6px !important;
}


Step 5 And Paste the below code after/below ]]></b:skin> and save your template

<script type='text/javascript'>
var relatedpoststitle=&quot;Related Articles&quot;;
</script>
<script src='http://bloggerspicebd.googlecode.com/files/related-BS.js' type='text/javascript'/>


Step 6 Now again find out <data:post.body/>(Paste the below Code here)<b:else/> .

<div id='related-articles'>
<b:loop values='data:post.labels' var='label'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=8&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
var maxresults=6;removeRelatedDuplicates(); printRelatedLabels(&quot;<data:post.url/>&quot;);
</script>
</div>

Customization

  • Change width:350px to increase or decrease width of the widget.
  • Change maxresults=6; to set the number of post you want to display. 

Simple Cute Related Post Widget Without Thumbnail
4 Stars stars - "Simple Cute Related Post Widget Without Thumbnail " Related Post Widget is useful to get more page visit. So today you won't find any templa...

Post a Comment

this is awesome..related post widget helps too much for getting more and more traffic for numb posts.it is like making burning stones out from the mouth of volcano.there are lots of posts which user does not pay attention so here related post widget will help like engaging user for some amount of posts .thanks for sharing.shayari

This comment has been removed by a blog administrator.

Nice Blog Thank You
visit www.cutetrick.blogspot.com

Blogger related post widget, is reallly awesome and decently working on my portal !!

Thank you very much Admin.

thank Phuong Van. I have seen your blog.This widget is working fine.

Glad to hear that. thank for using this widget.

This code does not work in my site... http://trickybadsha.blogspot.com

Facebook Group Community Disqus Channel Code ConverterHide Code Converter Show EmoticonHide Emoticon

Got questions? Ask ’em below! While we’re here, you might like to give any feedback about this Post, Your comment inspire us to continuous Improvement of This Blog and Contents. Your words are your own, so be nice and helpful if you can. Please, only use your REAL NAME, not your business name or keywords. Using business name or keywords instead of your real name will lead to the comment being deleted. Anonymous commenting is not allowed either. Limit the amount of links submitted in your comment. We accept clean XHTML in comments, but don't overdo it please.

Make sure you tick the Notify Me box below the comment form to be notified of follow up comments and replies. Thank you for commenting

Contact Form

Name

Email *

Message *