Auto Image Thumbnail & ReadMore Link For Blogger Post

Blogger is a good platform for blogging. It has many different pre built templates for its users. These templates are good enough for novice and beginners, but if you are expert or pro you need your own custom template. Custom templates help both you and your visitors in posting and viewing respectively. Customizing a blogger template is not an easy task since it is written in XML. Still there are many tweaks and hacks that can help you in customizing your blogger template.

The tweak or hack that I am going to share today is Auto Read More link with Image Thumbnail. In default every blogger has to put a line break manually in its posts for summarizing them. It is impossible to summarize the post with image and equal number of words, so that it looks beautiful at first page. The features, installation and customization method is so easy that anybody can make it to his taste.

Auto Read More with image thumbnail is a great tweak for blogger blogs. It give them beauty as well as ease of access. Visitors will find Auto Read More with image thumbnail a great thing, helping them understand and visualize what a post about is and what is explained in it. A picture worth’s thousands of words therefore a post summary with image thumbnail makes the blog itself a worthy thing and help authors increase visitors and viewers.

Features and Installation technique is defined under specific headings so that everyone can understand easily what he or she is going to add to his or her blog.

Features

• No need to manually enter Line Break in every post.
• First image of the post will be chosen as the summary image.
• Width and height of summary image is customizable.
• Custom settings for both with or without image summary.
• No external file, therefore no worries about the stopping of the code.

Installation

1. Login to your Blogger account.
2. Go to Dashboard > Template > Edit HTML.
3. Copy paste first code before </head>.
4. Search for <data:post.body/>.
5. Replace <data:post.body/> with the second code
6. Customize the first code if you want.
7. Save template, and you are done.

First Code

<!-- Auto read more script Start -->
<script type='text/javascript'>
var noImgSum = 200;
imgSum = 100;
iHt = 320;
iWd = 240;
</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 autoReadMore(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = noImgSum;
if(img.length>=1) {
imgtag = '<img id="autoReadMoreImg" src="'+img[0].src+'" width="'+iWd+'px" height="'+iHt+'px"/>';
summ = imgSum;
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>
<!-- Auto read more script End -->

Second Code

<!-- Auto read more Start -->
<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == "static_page"'>
<data:post.body/>
<b:else/>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'> autoReadMore("summary<data:post.id/>");
</script>
<a id='readmore' expr:href='data:post.url'>Read More ...</a>
</b:if>
</b:if>
<!-- Auto read more End -->

Customization

• In the first code you can Customize these values
• var noImgSum = 200; 200 is the characters in no image summary.
• imgSum = 100; 100 is the characters in image summary.
• iHt = 320; 320 is the height of summary image.
• iWd = 240; 240 is the width of the summary image.
• In the second code you can change Read More ... to your desired sentence.

Still have any queries, feel free to ask.