Announcement:

  Hello, We Changed Our Cloth, How It Is Looking? Leave Your Feedback At Our Page.

Thursday, May 24, 2012

Simple "Related Posts" Text Widget For Blogspot

This Article Was Live On: Thursday, May 24, 2012 And Till Now Have8 comments.
Simple "Related Posts" Text Widget For Blogspot
I am going to post an awesome styled Text only related post widget for blogger. Actually, related posts widget increase your blog's bounce rate. Also many related posts widget for blogger look boring and ugly. An those having images will increase up your blog loading time.So, hope you like all of the three. Actually when i was suffering over internet i just found this widget on a blog www.gj37765.blogspot.com So I think that this is important for my user too so i just copies there codes.
Now proceed further and install this simple bu cool Related Post Widget on your blog to increase views and help your visitor to get similar post for there next reading.

Features:
1.) Simple And Beautiful Looking Widget.
2.) Quick To Load And Easy To Install With Good Navigation.
3.) A Small Icon Before Every Line.
4.) Only Text That Make Your Blog Simple And Quick To Load.
5.) Simply The Best.


How To Add In Blogspot?
1.) Go To Your www.blogger.com
2.) Open Your Desire Blog.
3.) Go To HTML.
4.) Click "Edit HTML"
5.) Check On "Expand Widget Template"
6.) Now Do As I Did.
7.) Find This Line Using (CTRL+F) Function.
</head>
And Copy The Below JavaScript Code And Paste It Before/Above It.

<!--Related Post Widget Starts-->
<style> #related-posts { float : left; width : 480px; margin-top:20px; margin-left : 5px; margin-bottom:20px; font : 11px Verdana; font-weight: bold; margin-bottom:10px; } #related-posts .widget { list-style-type : none; margin : 5px 0 5px 0; padding : 0; } #related-posts .widget h2, #related-posts h2 { font-size : 20px; font-weight: bold; margin : 5px 7px 0; padding : 0 0 5px; } #related-posts a { text-decoration : none; } #related-posts a:hover { text-decoration : none; } #related-posts ul { border : medium none; margin : 10px; padding : 0; } #related-posts ul li { display : block; background : url(&quot;http://1.bp.blogspot.com/-X0SkFmJ3J_Q/T7Na0d6OADI/AAAAAAAADNM/Ivs78tMFl0I/s1600/%5Bwww.gj37765.blogspot.com%5Drp.png&quot;) no-repeat 0 0; margin : 0; padding-top : 0; padding-right : 0; padding-bottom : 1px; padding-left : 21px; margin-bottom : 5px; line-height : 2em; border-bottom:1px dotted #cccccc; } </style> <script src='https://making-different.googlecode.com/svn/trunk/related-posts-widget.js' type='text/javascript'/>
<!--Related Post Widget Ends-->



8.) Now Copy The Below HTML Code And Paste It Where You Want To Show Related Posts Widget.
Like I Suggest To Find These Line Using (CTRL+F) Function.
<div class='post-footer-line post-footer-line-2'/>
<div class='post-footer-line post-footer-line-3'/>
</div>
</div>
And Edit The Below HTML Code Then Copy It And Paste It Below/After It.

<!--Related Post Widget Starts-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<font face='Arial' size='3'><b>Related Posts : </b></font><font color='#FFFFFF'><b:loop values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if><b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5&quot;' type='text/javascript'/></b:if></b:loop> </font>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
</script>
</div></b:if>
<!--Related Post Widget Ends-->



Customization:
1.) If You Want To Increase No Of Related Post, Just Change (max-results=5) To Your Desire.
2.) Save And Done.

You Like It, Please Share This Article Using...




Don't Forget To Read This Also...



8 comments :

  1. It's quite hard to find a good site. And I think I am lucky enough to have come here. The posts are doing great and full of good insights. I would be glad to keep on coming back here to check for updates! http://celabright.org

    ReplyDelete
  2. all your tips and tricks here are very useful! im so lucky to be here!

    ReplyDelete
  3. A very informative article and lots of really honest and forthright comments made! This certainly got me thinking a lot about this issue so thanks a lot for posting!
    we buy houses cash

    ReplyDelete
  4. "Select All the Code" button does NOT work. Script cannot be copied.

    http://ramblerwithoutborders.blogspot.com

    ReplyDelete

Speak Your Mind:



Please Read The Rules Before Commenting:-

1.) Your feedback is always appreciated. We will try to reply to your queries as soon as time allows.
2.) Make sure to click the "Notify me" link below the comment to be notified of follow up comments and replies.
3.) Please "Do Not Spam".
4.) Please "Do Not Add Links" to the body of your comment as they will not be published. If the quires contain link then never add HTML tag to it.
5.) Only "English" comments shall be approved and answered.
6.) If you have a problem check first the comments, maybe you will find the solution there.
7.) Your comments must contain 100+ characters to remain accepted.
8.) Never Use Keywords In The Name Section Otherwise Your Comment Will Be Deleted.
9.) All comment will be deleted if it will not fulfil the requirements.