Simple related articles without thumbnails blog plugin for blogger ~ TrickGeek

Trending: For TrickGeek

Friday 14 December 2012

Simple related articles without thumbnails blog plugin for blogger

Do you like this story?

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.

<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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHObhy1iTbBaoH7rrg_moYUMi0KHJzpKN24QdmgsUd7j-JP_ZIBwmtPLr769Cd-Lu-Fnatdjku-Br7h1DQE9M2ZWS-Y4C4jrXKeWDhYm3NJbybCVfXNQJLAltJ-Wp7PU_ZnXBr9HksXpS-/s1600/%5Bwww.gj37765.blogspot.com%5Drp.png") 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'/>

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>

And Edit The Below HTML Code Then Copy It And Paste It Below/After It.

<b:if cond='data:blog.pageType == "item"'> <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 != "true"'>,</b:if><b:if cond='data:blog.pageType == "item"'> <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=5"' type='text/javascript'/></b:if></b:loop> </font> <script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels(); </script> </div></b:if>

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