0 ADD AN AUTOMATIC 'READ-MORE' OPTION TO YOUR BLOG.

You all know that blogger has a way of putting the 'Read more' option to blog posts by selecting the 'input jump break'.
This is kinda old fashioned,so I 'll be sharing with you how I added a default 'Read more option to my blog.
This default style adds the 'Read more option automatically each time you create a new post.But don't be discouraged,you can specify the number you want to display by default.

STEP BY STEP ON HOW TO ADD THE OPTION TO YOUR BLOG

Go to Design>>Edit HTML.Backup your template in case something goes wrong.
Check the box next to
Expand Widget.
Press ctrl+f and search for </head>
Now add following code ABOVE </head>

<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>

Next:
Look for <data:post.body/> and Add the following code ABOVE it.
<b:if cond='data:blog.pageType =="static_page"'>
Likewise,add the following code BELOW
<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 "<data:post.title/>"</a></span> </b:if> <b:if cond='data:blog.pageType =="item"'><data:post.body/></b:if> </b:if>

Preview your blog and thereafter Save your template.

Customizing it to meet your needs

summary_noimg = 430;
[This is post cut lenght without having an image in your post]
summary_img = 340;
[This is post cut lenght with image in your post]
img_thumb_height = 100;
[This is thumbnail image height]
img_thumb_width = 120;
[This is thumbnail image width]
You can alter these numbers to meet your needs.

Posted in: Blog hacks and tricks,Blogging tips