Auto jump break for Blogger

How to add an auto jump break in blogger ?

Hello everybody, I'm going to show you how to add an “auto jump break”, “/Read More” automatically for all posts page-wise to show on homepage. This post is useful to those Blog beginners who have just started blogging and looking to modify and enhance the appearance of their basic blog sites and not want to use any other third party registered advanced templates available on net.

As most of us knows to "Insert Jump Break"for the post, but have to do manually on all post. Thus here I'm sharing you to insert an “Auto Jump Break” for all post which you have already posted and for future post. No more any need to manually use "Insert Jump Break".

Follow the instructions:

1. Go to Dashboard > Design > Edit HTML > Expand Widget Templates
search for the code </head> with the CTRL + F key combination,add bellow script justbefore/above it

JAVASCRIPT CODE:

<script type='text/javascript'>var thumbnail_mode = &quot;no-float&quot; ;
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>

2. You are in Edit HTML tab and more to do so, don't leave yet, with the CTRL + F key combination again search for the tag <data:post.body/> and replace it with bellow code group. You will find three places for the same search and have to replace on both 3 places.

HTML CODE:

<b:if cond='data:blog.pageType == &quot;static_page&quot;'><br/>
<data:post.body/>
<b:else/>

<b:if cond='data:blog.pageType != &quot;item&quot;'>

<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> <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 == &quot;item&quot;'><data:post.body/></b:if>
</b:if>

3. Last step "Save" template.

Now you've added "Auto Jump Break" into your blog. 

From now you don't have to insert manually the button "Insert Jump Break", to every post, go for writing your blog and will automatically create a summary of article and will add a "Read More" link under beneath in the posts.

Also, if you want to modify you summary details. You can edit by changing the value in “JAVASCRIPT CODE” indicated in red, code “summary” for text and “img” for image or thumb.

<script type='text/javascript'>var thumbnail_mode = &quot;no-float&quot; ;
summary_noimg = 430;
summary_img = 340;
img_thumb_height = 100;
img_thumb_width = 120;
</script>

Save the changes after modifying your value.

Have fun with your blogs.