29 January 2013
How to show post summaries with thumbnail on homepage for blogger Post 2013
Wordpress users might have seen
the Wordpress excerpt thing, which displays a summary of your post. Now
we have something similar for blogger.Actually i should say it is
really amazing..This hack will automatically create post summaries with
thumbnails.. you needn't need to add any extra code in every BlogSpot
that you make..These summaries will be displayed on all pages other than
the post page..Here in my blog i am using a modified version of the
same which displays summaries on pages other than the post page and
homepage.Check out some of my labels to see the hack in action..
First of all, this hack was developed by Blogger Sphera . I will try to explain his hack to you guys..
First of all Edit your blogger template
Find this code
and replace it with
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<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://bloggergadgets.googlecode.com/files/excerpt_min.js'
type='text/javascript'/>
</b:if>
</b:if>
</head>
Off course you can edit these parameters..
Now Find
<data:post.body/>
Replace it with
<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == "static_page"'>
<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.canonicalUrl' rel='bookmark'><b>Read more >></b></a></span>
</b:if>
</b:if>
And you are done.. now you should have the post summaries on your homepage,search results,archive and label pages..
0 comments:
Your feedback is always appreciated. We will try to reply to your queries as soon as time allows.
Note:
1. To add HTML CODE in comments then please use our HTML Encoder
2. You can always Test the tutorial on our HTML Editor
3. Please do not spam Spam comments will be deleted immediately upon our review.
Regards,
Imtiaz Ahmed