How to Add Automatic "Read More" to Your Blogger Homepage

I am going to tell you something about read more links. The read more link gives you more page views and is very SEO friendly. This feature presents your visitors to a more enjoyable web visit, as it neatly maintains concise text in a manageable view, especially when you have lengthy posts. You can add Read More >> , Read Full Post, etc. I am using the text Read More >>.  Any text and even a small graphic can be employed on your preference.

There is not too much difficulty adding the additional script, as long as you follow the steps given here.

HOW TO INPUT THE CODES

Note: before you make any changes on your templates, always make a backup of it.
1. Login in to your blogger account
2. Navigate to Template section of your blog
3. Go to Edit HTML and click on expand widget template box.
4. Then search for this tag: </head>, Use Ctrl F on your keyboard to search for it.
5. Now place the code below ABOVE the </head> tag in your template.

<script type='text/javascript'> summary_noimg = 300; summary_img = 300; img_thumb_height = 120; 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>  

NOTE: In the above code you can change the numeric numbers according to how you wish it appears on your blog.

summary_noimg = 300; this code will decide how much characters must be shown in the post if that post doesn’t contain any images. I have selected 300 characters. You can customize it to suit your template.

summary_img = 300; If the post contains image, then this code will decide how many characters must be shown in that post. Change the number of characters to be shown to suit your template.

img_thumb_height = 120; this tag decides the height of the thumbnail to be shown in the post. Vary the number 120 to suit your template.

img_thumb_width = 120; This tag decides the width of the Thumbnail image to be shown.

Now find <data:post.body/> in your template and replace it with the code below:

<b:if cond='data:blog.pageType != "static_page"'> <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> </b:if> </b:if> <b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if> <b:if cond='data:blog.pageType == "static_page"'><data:post.body/></b:if> <b:if cond='data:blog.pageType != "static_page"'> <b:if cond='data:blog.pageType != "item"'> <div style='float:right;margin-right:10px;margin-top:5px;'> <a expr:href='data:post.url'>Read More</a> </div> </b:if> </b:if>

You can now preview your template after you've followed all these steps.  If you are content, go ahead and save the changes.

Neat huh and more professional looking.

Posted in: Blogging Hacks,SEO,SEO and Blog Traffic,Tips,Tricks,Tweaking