How To Show Post Excerpts On Blogger Homepage.
Here in this blog we have provided you many tweaks and tips of Blogger. Today we are here again with a different blogger tweak. This post is about how to show post excerpts on homepage instead of full posts. This tweak will show thumbnail of your post and a continue reading link on homepage. Full instruction is given below, follow them.
Steps To Follow :
It is always advisable to backup your template before doing any kind of tweaking in your codes.
1) Log in to your Blogger Account and goto your Blogger Dashboard.
2) Go to Template>Edit HTML>Proceed.
3) Tick the 'expand widgets' box.
4) Press Ctrl+f and Search </head>. Just above the </head> tag, copy and paste the code given below.
5) Now Find the portion of code that looks like the code given below:.
You can change the continue reading "<data:post.title/>" to any text (for example, READ MORE, Full story etc.).
6) For Styling part i.e for CSS part:-
Search ]]></b:skin> and above it paste the following code
7) And finally save the template.
You are all done and now check your blog. Drop comment if finding any kind of problem.
For more Blogger tips and tricks, browse this blog. Keep visiting this blog for more updates.
Steps To Follow :
It is always advisable to backup your template before doing any kind of tweaking in your codes.
1) Log in to your Blogger Account and goto your Blogger Dashboard.
2) Go to Template>Edit HTML>Proceed.
3) Tick the 'expand widgets' box.
4) Press Ctrl+f and Search </head>. Just above the </head> tag, copy and paste the code given below.
<script type='text/javascript'>
var thumbnail_mode = "no-float" ;
summary_noimg = 300;
summary_img = 350;
img_thumb_height = 200;
img_thumb_width = 300;
</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 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>
var thumbnail_mode = "no-float" ;
summary_noimg = 300;
summary_img = 350;
img_thumb_height = 200;
img_thumb_width = 300;
</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 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>
5) Now Find the portion of code that looks like the code given below:.
<b:if cond='data:blog.metaDescription == ""'>
<!-- Then use the post body as the schema.org description, for good G+/FB snippeting. -->
<div class='post-body entry-content' expr:id='"post-body-" + data:post.id' itemprop='description articleBody'>
<data:post.body/>
<div style='clear: both;'/>
<!-- clear for photos floats -->
</div> <b:else/>
<div class='post-body entry-content' expr:id='"post-body-" + data:post.id' itemprop='articleBody'>
<data:post.body/>
<div style='clear: both;'/>
<!-- clear for photos floats -->
</div>
</b:if>
<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 the code given below:<!-- Then use the post body as the schema.org description, for good G+/FB snippeting. -->
<div class='post-body entry-content' expr:id='"post-body-" + data:post.id' itemprop='description articleBody'>
<data:post.body/>
<div style='clear: both;'/>
<!-- clear for photos floats -->
</div> <b:else/>
<div class='post-body entry-content' expr:id='"post-body-" + data:post.id' itemprop='articleBody'>
<data:post.body/>
<div style='clear: both;'/>
<!-- clear for photos floats -->
</div>
</b:if>
<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>
<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>
<b:if cond='data:blog.pageType == "static_page"'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'>
<data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>"); </script> <span class='rmlink' style='float:right;padding-top:20px;'><a expr:href='data:post.url'> continue reading "<data:post.title/>"</a></span> </b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if> </b:if>
<b:if cond='data:blog.pageType == "static_page"'><b:else/>
<b:if cond='data:blog.pageType != "item"'>
<div style='padding-top:3px;float:right;text-align:right;'><span class='rmlink'><a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick' style='margin-right:10px;'>Add Your Opinion</a></span><span class='rmlink'><b:if cond='data:blog.pageType != "item"'> <b:if cond='data:post.allowComments'><a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 Opinion<b:else/><data:post.numComments/> Opinions </b:if></a> </b:if> </b:if></span>
<div style='clear: both;'/>
<div style='clear: both;'/>
</div>
</b:if>
</b:if>
</b:if>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>
<b:if cond='data:blog.pageType == "static_page"'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'>
<data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>"); </script> <span class='rmlink' style='float:right;padding-top:20px;'><a expr:href='data:post.url'> continue reading "<data:post.title/>"</a></span> </b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if> </b:if>
<b:if cond='data:blog.pageType == "static_page"'><b:else/>
<b:if cond='data:blog.pageType != "item"'>
<div style='padding-top:3px;float:right;text-align:right;'><span class='rmlink'><a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick' style='margin-right:10px;'>Add Your Opinion</a></span><span class='rmlink'><b:if cond='data:blog.pageType != "item"'> <b:if cond='data:post.allowComments'><a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 Opinion<b:else/><data:post.numComments/> Opinions </b:if></a> </b:if> </b:if></span>
<div style='clear: both;'/>
<div style='clear: both;'/>
</div>
</b:if>
</b:if>
</b:if>
You can change the continue reading "<data:post.title/>" to any text (for example, READ MORE, Full story etc.).
6) For Styling part i.e for CSS part:-
Search ]]></b:skin> and above it paste the following code
.rmlink a{color:#fff; text-decoration:none; float:right; font-family:Arial,Helvetica,sans-serif; padding-left:5px; padding-right:5px; padding-top:-2px; font-size:13px; font-weight:bold; text-align:center; background:#444343; -moz-border-radius:5px; -webkit-border-radius:5px; height:22px}
.rmlink a:hover{color:#FFF; text-decoration:none; background:#007EC4; -moz-border-radius:5px; -webkit-border-radius:5px}
7) And finally save the template.
You are all done and now check your blog. Drop comment if finding any kind of problem.
For more Blogger tips and tricks, browse this blog. Keep visiting this blog for more updates.
Subscribe to:
Post Comments (Atom)
Hi I'm Satyakam Pradhan from Bloggers, I'm very grateful for following your blog. Thanks for this great post. I just tried it on my blog and it was wow
ReplyDeleteThanks 4 dropping your valuable comment here.
Deletehi Abhijit for this tutorial.
ReplyDeleteI've been trying to get this done for a while but haven't been able. There are 3 lines that finish with the data:post.title tag. What can I do?
Thanks!
Give me the link of your blog here.
Deletehttp://muymajobv.blogspot.it/
DeleteYou are getting 3 data:post.body/ tags. Replace the second one with the code given above in the post.
DeleteI've just done it and it didn't work :(
DeleteI can do it for you if you are ready to give me your blogger username and password. Just mail me here - something619a@gmail.com
DeleteI just tried it! It works. Thanks for the tips!
ReplyDeletewww.blog.thednalife.net
Thanks 4 ur comment...
Deletenice tips..10nx 4 sharing..
ReplyDeletehttp://www.i-world-tech.blogspot.in/
Thanks...and you're doing gr8 bro...(y)
Delete