Friday, July 6, 2012
Blogger: In home page, How to display only first few lines of the post with an option " Read More "
Login
to your Blogger
Go To Template
Then Click On “Edit HTML”
Check Mark “Expand Widget Templates”
Go To Template
Then Click On “Edit HTML”
Check Mark “Expand Widget Templates”
Press Ctrl+F and search for this line </head>
Now, copy below script and
paste it above the </head> tag:
<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>
<script
type='text/javascript'>
var thumbnail_mode =
"no-float" ;
summary_noimg = 530;
summary_img = 440;
img_thumb_height = 180;
img_thumb_width = 180;
</script>
|
Press Ctrl + F again and
search for the below code:
(we are going to replace this code in next step)
<div class='post-header'>
<div
class='post-header-line-1'/>
</div>
<div
class='post-body entry-content'>
<data:post.body/>
<div
style='clear: both;'/> <!-- clear for photos floats -->
</div>
***The below one is optional, you can keep it or replace
it!*
<b:if
cond='data:post.hasJumpLink'>
<div
class='jump-link'>
<a
expr:href='data:post.url + "#more"'
expr:title='data:post.title'><data:post.jumpText/></a>
</div>
</b:if>
|
Replace it with below
code:
<div class='post-header'>
<span class='post-author vcard'>
</span></div>
<b:if
cond='data:blog.pageType != "item"'>
<div
class='post-body entry-content'>
<div
expr:id='"summary" + data:post.id'><p><data:post.body/></p></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<div
style='clear: both;'/> <!-- clear for photos floats -->
</div>
</b:if>
<b:if
cond='data:blog.pageType == "item"'>
<p><data:post.body/></p>
</b:if>
<div class='singleinfo'> <div style="float: right;"> <div style="font-weight: bold" class='readmore' > <b:if cond='data:blog.pageType != "item"'><a expr:href='data:post.url'>Read More >>></a> </b:if></div></div> </div> |
Save the template/blog
and your blog is ready as you like.
Suggestions are always welcome..! Without signing also you can send your comments.
Labels:
general
Subscribe to:
Post Comments (Atom)
No comments:
Post a Comment