Trending: For TrickGeek

Friday, 14 December 2012

Simple related articles without thumbnails blog plugin for blogger


Many related posts widget for blogger look boring and ugly. An those having images will increase up your blog loading time.

# 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 get it
Step 1 : Sign in and open your blog dashboard in blogger.com
Step 2 : goto > Templete> Edit Html > Expand Widget Template 
Step 3 : Find following code by Ctrl + F
                              </head> 
Step 4 : 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-->


Step 5 : Now Copy The Below HTML Code And Paste It Where You Want To Show Related Posts Widget.
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-->



Step 6 : It's time for customization
If You Want To Increase No Of Related Post, Just Change (max-results=5) To Your Desire.

We've Got Your Site Protected! $5.99 SSL Sale!

0 Responses to “Simple related articles without thumbnails blog plugin for blogger”

Post a Comment

All Rights Reserved TrickGeek | by Milan Patel
Sponsored by Wallkens