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.