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'>where
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'/>
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"'>And you are Done. Click Save Template button and test your blog.
<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>
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.htmlhttp://arjudba.blogspot.com/2009/12/how-to-add-tag-cloud-category-to.html
No comments:
Post a Comment