Friday, November 30, 2012

an easy way to add auto jump break in blogger


AUTO READ MORE/JUMP BREAK FOR BLOGGER
Hi dear Bloggers! How are you today? I'm gonna share with you "Auto Read More" tip now.Most of you know it as "Insert Jump Break" however it doesn't know where to cut the writing, so a strange shape comes up.Our writings must very good but at the same time it must show itself to reader's eyes charming.Nowadays it's very hard to getting readers to like a content.They are digging all corners.An "Auto Read More/Jump Break" hack will your writing make nicer,and will protect you thinking of where to add the "Jump Break" link in the post.
1-We'll use a Javascript and some HTML tags to do this.Let's add Javascript first.Login Blogger account with gmail account and Go to Dashboard >> Design >> Edit HTML >> Expand Widget Templates
search for the code </head> with the CTRL + F key combination,add bellow script just before/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, 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

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.
Congratulations! You've added "Auto Jump Break" hack into your blog,from now on you don't have to push the button "Insert Jump Break", feel free writing the you have added will create a summary of article and will add a "Read More" link underbeneath of first image in the post.

0 comments:

Post a Comment