Simple Cute Related Post Widget Without Thumbnail

Simple Cute Related Post Widget Without Thumbnail

Comments: 11
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. 

Related Post

Speak Your Mind

bestofshayari says: 4/27/2013

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

rajon Miah says: 5/08/2013
This comment has been removed by a blog administrator.
Anonymous 5/13/2013

nice widget bro ..

comeback

Kailash Paliwal says: 5/15/2013

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

William Wox says: 5/20/2013

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

Phuong Van says: 5/21/2013

Thank you very much Admin.

Mohammad Fazle Rabbi says: 5/21/2013

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

Mohammad Fazle Rabbi says: 5/21/2013

Glad to hear that. thank for using this widget.

Badsha Roy says: 7/26/2013

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

Sumit Kumar Gogawat says: 12/19/2017

Hallo Rabbi
Great!!!! I love this article but i need to implement this in between blog post. So please suggest how can i put it between blog post. I want related post between the ads instead of infolinks ads appear on my website.

Please visit www.tallyknowledge.com

Rabbi Khan says: 1/01/2018

Hi Sumit Jumar!
I am using "Infeed Ad" from AdSense. And displaying the ads between the post by using my below tutorial.

http://www.bloggerspice.com/2013/04/how-to-display-adsense-ads-anywhere-of.html

You can use this. Thank you. up:

Facebook Group Community Code ConverterHide Code Converter Show EmoticonHide Emoticon

If you Got questions? Ask ’em below! While we’re here, you might like to leave a comment and let me know if you have any stories or questions.

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 *