SOHO Network Management

Auto Read More/Continue Reading with Thumbnail For Blogger

This is a simple hack that will improve the look of your blog and avoid inserting "jump break" manually to every post. By adding few lines of code to the html template "Read more" / "Continue reading" is automatically added for every (old / new) blog posts.

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>

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

Step 2
Now look for <data:post.body/>

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

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

Step 3
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.

Note:

In stead of Read More you can write Read Full Article or Continue Reading… or insert an image or something like that. To make a change, edit the second code that you had to add below <data:post.body/> and edit that term Read More to whatever you want.

You can also add the post title to Read more links. To do this replace the code below <data:post.body/> with this code