There are many tips to make your blogger blog professional look and feel. One of the leading tips is to add "Read More" feature to your blog. This feature is very useful specially whenever user click on archive blog post or click on label that contains many posts under that label. There may be too many blog posts in the archive section and so loading time may be slower. Instead if you can display short story of the blog post and then add a link "Read More" then it will be more helpful.
Another reason to include a Read More link is to keep the visitors stay more times in your blog. In this case you will be benefited because if in your blog there will be more page loads, more time visitors will spend browsing and also advertisement (if any) loads more times in blog.
Step by step description for adding "Read More" feature is described below.
Step 01: Sign in to blogger.com and from http://www.blogger.com/home dashboard click layout and then click Edit HTML.
Step 02: Check the "Expand Widget Templates" checkbox. After you check the checkbox HTML textbox will be re-loaded. It will look like image below.
Step 03: Scroll down and find out the closing head tag i.e </head>
Just before this </head> tag add the following code:
<script type='text/javascript'>
var thumbnail_mode = "float" ;
summary_noimg = 230;
summary_img = 140;
img_thumb_height = 100;
img_thumb_width = 100;
</script>
<script src='http://oracle-in-world.googlegroups.com/web/excerpt.js?gda=vX7OozwAAACpV4QXH4wuT6KkbCExW2Uw7M0-zPcfYx8yiIHN6eVjGf7IDMbBIGglVJTmTj0R_Xz9Wm-ajmzVoAFUlE7c_fAt' type='text/javascript'/>
where
Thumbnail_mode: If you choose "no float", the image will not show thumbnails and if you choose to "float" it will display a thumbnail on the left of the posts on the homepage.
Summary_img and Summary_noimg: These two corresponds to the cutoff of the abstract when your post has no image and when it does, respectively. The value 50, for example, means "50 words".
Img_thumb_height and img_thumb_width: These two corresponds to height and the width of the thumbnails (thumbnail image).
and the contents of the javascript file
http://oracle-in-world.googlegroups.com/web/excerpt.js?gda=vX7OozwAAACpV4QXH4wuT6KkbCExW2Uw7M0-zPcfYx8yiIHN6eVjGf7IDMbBIGglVJTmTj0R_Xz9Wm-ajmzVoAFUlE7c_fAt
is,
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;
}
In the blog HTML it will look like,
]]></b:skin>
<script type='text/javascript'>
var thumbnail_mode = "float" ;
summary_noimg = 230;
summary_img = 140;
img_thumb_height = 100;
img_thumb_width = 100;
</script>
<script src='http://oracle-in-world.googlegroups.com/web/excerpt.js?gda=vX7OozwAAACpV4QXH4wuT6KkbCExW2Uw7M0-zPcfYx8yiIHN6eVjGf7IDMbBIGglVJTmTj0R_Xz9Wm-ajmzVoAFUlE7c_fAt' type='text/javascript'/>
</head>
<body>
Step 04: Now scroll down to find out this line: <data:post.body/>
Replace this line with following piece of code.
<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>
<b:else/>
<div expr:id='"summary" + data:post.id'>
<data:post.body/>
</div>
<script type='text/javascript'>
createSummaryAndThumb("summary<data:post.id/>");
</script>
<div style='clear: both;'/>
<span style='padding-top:5px;;float:right;text-align:right;'><a expr:href='data:post.url' rel='bookmark'><b>Read more >></b></a></span>
</b:if>
And you are Done. Click Save Template button and test your blog.
Related Documents
http://arjudba.blogspot.com/2009/08/how-to-increase-your-technorati.html
http://arjudba.blogspot.com/2009/07/how-to-setup-google-webmaster-tool-for.html
http://arjudba.blogspot.com/2009/06/how-to-get-targeted-backlinks-to-your.html
http://arjudba.blogspot.com/2009/07/draw-google-adsense-money-using-western.html
http://arjudba.blogspot.com/2009/06/different-types-of-web-hosting-services.html
http://arjudba.blogspot.com/2009/07/how-to-add-site-to-yahoo-directory.html
http://arjudba.blogspot.com/2009/07/how-to-add-site-to-google-directory.html
http://arjudba.blogspot.com/2009/12/how-to-know-when-googlebot-last-crawled.html
http://arjudba.blogspot.com/2009/12/how-to-add-different-meta-tags-to.html
http://arjudba.blogspot.com/2009/12/how-to-disable-or-remove-blogger.html
http://arjudba.blogspot.com/2009/12/scrolling-text-effect-html-code-with.html
http://arjudba.blogspot.com/2009/12/how-to-post-larger-images-in-blogger.html
http://arjudba.blogspot.com/2009/12/how-to-transfer-or-sell-blogger.html
http://arjudba.blogspot.com/2009/12/how-to-add-email-subscription-form-to.html
http://arjudba.blogspot.com/2009/12/how-to-add-favicon-to-blogger-blogspot.html
http://arjudba.blogspot.com/2009/12/how-to-add-tag-cloud-category-to.html
2010
