Add Auto ReadMore And Remove The Initial JumpText Link To Blogger

Blogger jump-text is a summary of all your recent post depending on the amount of posts you selected to appear on your homepage, this jump-text contain an image, summary of the post and a link that will lead the reader to the main page of the post
Now adding an auto read more can help you to select the amount of characters to display on the homepage, the size of the image and  its position either to the right or to the left.

 In this simple and short tutorial, you will get to learn how to add the auto read-more and how to remove the initial read-more blogger read more or jump-text link to your blogger

Add Auto Read-More 

-> Go to blogger.com
-> log in to your account
-> on the dashboard environment click on the drop down list then click on the template option in there.
-> on the template page click on the edit html
-> then expand widget checked after loading

Now use CTRL f to bring out the find box then look for this code

</head>

 from the codes there

 paste this code bellow, immediately above the </head> code

<!-- www.tipsupload.blogspot.com Auto read more script Start here --> <script type='text/javascript'> var thumbnail_mode = "yes"; //yes -with thumbnail, no -no thumbnail summary_noimg = 300; //summary length when no image summary_img = 300; //summary length when with image img_thumb_height = 100; img_thumb_width = 100; </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(thumbnail_mode == "yes") {     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> <!-- www.tipsupload.blogspot.com Auto read more script End here -->

To Adjust the size of the image and the amount of characters to be displayed find 
summary_noimg = 300   change the value 300 to your desirable numbers of character to display when there is no image
summary_img = 300 change the value 300 to your desirable numbers of character to display when there is  image
img_thumb_height = 100  change the value 100 to your desirable numbers for the readmore image thumbnail height
img_thumb_width = 100   change the value 100 to your desirable numbers for the readmore image thumbnail width

 After the above procedure find

 <data:post.body/>

probably the second one from the three you will see there and replace it with the code bellow

<!-- www.tipsupload.blogspot.com Auto read more code Start here --> <!-- http://www.BloggerSentral.com --> <b:if cond='data:blog.pageType == &quot;item&quot;'> <data:post.body/> <b:else/> <b:if cond='data:blog.pageType == &quot;static_page&quot;'> <data:post.body/> <b:else/> <div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div> <script type='text/javascript'> createSummaryAndThumb(&quot;summary<data:post.id/>&quot;); </script> <a class='more' expr:href='data:post.url'>Read more ...</a> </b:if> </b:if> <!-- www.tipsupload.blogspot.com Auto read more code End here-->

that is all preview your blog then
Save
regards to blogger sentral

How to remove the initial read-more or jump-text link

from the hrml codes, look for

<data:post.jumpText/>

    

Enclose the above code with html comment code (<!-- the code here  -->)
example

here is the line of the code 

<a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>

now enclose it this way 

<a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><!--<data:post.jumpText/>--></a>

preview then you will not find the second read more that is the blogger read more link the auto read more link will be the one to now display

now save 

you can still use this tip to learn how to customize the auto read more link 

just find the "read more" the use this tips to customize it with css

thanks for reading
Don't forget to share this tips with your friends and tell us what you feel about the post with the comment box