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.
<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>
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:
<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>
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.
