Add Related Posts Widget to Blogger/Blogspot

Here are the steps to  Add Related Posts Widget to Blogger/Blogspot...

STEP 1-
Go To Blogger Dashboard >> Template >>Edit HTML

STEP 2-
Press CTRL + F

STEP 3-
Now type the given code in the box.
</head>

STEP 4-
Paste this code ABOVE/BEFORE " </head> " Tag

 <!--Related Posts with thumbnails Scripts and Styles Start-->
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts{float:left;width:auto;}
#related-posts a{border-right: 1px dotted #eaeaea;}
#related-posts a:hover{background: #f2f2f2;}
#related-posts h2{margin-top: 10px;background:none;font:18px Oswald;padding:3px;color:#999999; text-transform:uppercase;}
#related-posts .related_img {margin:5px;border:4px solid #f2f2f2;width:100px;height:100px;transition:all 300ms ease-in-out;-webkit-transition:all 300ms ease-in-out;-moz-transition:all 300ms ease-in-out;-o-transition:all 300ms ease-in-out;-ms-transition:all 300ms ease-in-out;}
#related-title {color:#222;text-align:center;padding: 0 10px;font-size:14px Oswald; line-height:16px;text-shadow:0 2px 2px #fff;height:28px;width:100px;}
#related-posts .related_img:hover{border:4px solid #E8E8E8;opacity:.7;filter:alpha(opacity=70);-moz-opacity:.7;-khtml-opacity:.7}</style>
<script type='text/javascript' src='http://helplogger.googlecode.com/svn/trunk/relatedposts.js' />
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

NOTE :-
- to change the width and height of thumbnails, modify the 100px value in red
- to change the color and size of related posts titles, change the value in blue
- remove the line in violet if you want the related posts to be displayed in homepage too

STEP 5-
Now find the code given below (you might find it twice, stop at the second one)
<div class='post-footer'>

STEP 6-
Paste the given code

<!-- Related Posts with Thumbnails Code Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<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_thumbs&amp;max-results=5&quot;' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=5;
var relatedpoststitle=&quot;<b>Related Posts:</b>&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div class='clear'/>
</b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://helplogger.blogspot.com'><img alt='Blogger Tricks' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDGXt7XeoilDDHYXhXxLoDx5CtO8QDn_9ekElA2XDP7ctcgNLlbDs7GShGcxS5aj2zlI_ZuUtJ7XYxb5Icbriia8HdYPE-jmPkCPQ5o1h32Mzw_cPeIpws5UWF0O329hiDvcsPSmJDMhrE/s1600/best+blogger+tips.png'/></a>
</b:if></b:if><!-- Related Posts with Thumbnails Code End-->

NOTE -
- change the 5 value from max-results=5 with the number of posts you want to be displayed
- if you want the related posts to be displayed on homepage too, then remove the lines in violet

STEP 7-
Save the template... 

Enjoy .... :)
And if u have any problem contact me through comment... 

Read More

Free RSS Directories For Bloggers

Here are the list of some free RSS directories for bloggers to submit there website for getting instant and free traffic....

1
Blogtoplist
2
Bloglog
3
Technorati
4
Newsisfree
5
Syndic8
6
Moreover
7
FeedCat
8
Feedage
9
Plazoo
10
RssMountain
11
Rssmicro
12
Feeds4all

13
Rssbus
14
Feedsfarm
15
Feedplex
16
Balirss
17
Rssmob
18
Feedlisting
19
88tem
20
Rssfeeddirectory
21
BlogDigger
22
RssNetwork
23
URL Fan
24
ReadaBlog
25
Million RSS
26
GoldenRssFeed
27
Ice Rocket
28
Feed Agg
29
Feed See
30
Solar Warp
31
Feedgy
32
Blogtopsites

Read More

Add 'Read More" to blog post

So here how you could add read more button in 

your blog, step by step.

1. Log into your Blogger account and select the Blog in which you want to add the read more button

2. Select Template button from the Left navigation menu

3. Click on Edit HTML

4. Select the check box   Expand Widget Templates  on the top

5. Do a CTRL+F and search for: <data:post.body/>

6. Replace the code with script below:

<!– For read more button script 1 starts –>

<b:if cond=’data:blog.pageType == “static_page”‘>
<data:post.body/>
<b:else/>

<b:if cond=’data:blog.pageType != “item”‘>

<div expr:id=’”summary” + data:post.id‘><data:post.body/></div>
<script type=’text/javascript’>createSummaryAndThumb(“summary<data:post.id/>”);
</script> <span class=’rmlink’ style=’float:right;padding-top:20px;’><a expr:href=’data:post.url’>Read more…</a></span>

</b:if>
<b:if cond=’data:blog.pageType == “item”‘><data:post.body/></b:if>
</b:if>

<!– read more script ends –>

7. Search for  </head>

8. Paste the  following code just above the tag:

<!– For read more button script 2 starts –>

<script type=’text/javascript’>var thumbnail_mode = “no-float” ;
summary_noimg = 430;
summary_img = 340;
img_thumb_height = 100;
img_thumb_width = 120;
</script>
<script type=’text/javascript’>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(“>”)!=-1){
s[i] = s[i].substring(s[i].indexOf(“>”)+1,s[i].length);
}
}
strx = s.join(“”);
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=’ ‘ && strx.indexOf(‘ ‘,chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+’…’;
}

function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = “”;
var img = div.getElementsByTagName(“img”);
var summ = summary_noimg;
if(img.length>=1) {
imgtag = ‘<span style=”float:left; padding:0px 10px 5px 0px;”><img src=”‘+img[0].src+’” width=”‘+img_thumb_width+’px” height=”‘+img_thumb_height+’px”/></span>’;
summ = summary_img;
}

var summary = imgtag + ‘<div>’ + removeHtmlTag(div.innerHTML,summ) + ‘</div>’;
div.innerHTML = summary;
}

//]]>
</script>

<!– read more script 2 ends –>

9. Save template, close it and click on settings in left navigation which is first from bottom.

10. And you are done and ready to add read more to your post.

Read More