28 July 2010

Auto Read More/Continue Reading Hack With Thumbnail For Blogger

Advertisements

In my old post you know how to add add read more link using "Insert jump break" by blogger. How about a simple hack that will do this automatically for us. Also it will improve the look of our blog. You will never have to click on "Insert jump break"again and again. You have to just add two codes in your template.


Live Demo of this hack is available.

Installation of this hack

Step 1
Go to Dashboard >> Design >> Edit HTML >> Download Template (for back up) >> Click on Expand Widget Templates and look 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>


Step 2

Now look for <data:post.body/>

Add following code ABOVE <data:post.body/>

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

Also add following code BELOW <data:post.body/>

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

Save your template.

Customization
summary_noimg = 430;
is post cut height without image

summary_img = 340;
is post cut height with image

img_thumb_height = 100;
is thumbnail image height

img_thumb_width = 120;
is thumbnail image width

You can change these values as per your needs.

Thanks to http://www.vietwebguide.com/

Related Posts

5 comments

June 12, 2011 at 5:50 PM

i tried this but it didnt work i only got the read more link but my post is still shown full on my homepage. My blog is www.ifwaxtel.tk

June 13, 2011 at 2:22 AM

Did you added all codes care fully. Try it on your test blog.

December 21, 2011 at 9:39 PM

It worked! Great post, thanks a lot!

January 5, 2012 at 12:07 AM

Really, it works! Thank you for such improving!

June 1, 2013 at 1:07 PM

I want to disable right clicks on the summary thumbnail image using "oncontextmenu='return false;'". This works fine on an image by image basis within a post. However, when I tried to add it to the img tag code you gave here things got messed up - it still disables the right click but it also makes it so the entire post shows up for some reason. Any thoughts on how I could incorporate this?

Post a Comment

Share

Twitter Delicious Facebook Digg Stumbleupon Favorites More