Pages

Tuesday 17 May 2011

How To Add Post Excerpt on Blogger Home Page

A simple step by step instruction explaining how to add post excerpt on Blogger.


Blogger now recognizes <!--more--> so just add it after the text which you want to show in excerpt and it will work.

Here is the another and tedious method, which used to work on old template? I tried it but it didn't work.

I wanted to show post excerpt and thumbnail on the home page on this blog. It is not easy to do so.
I'll explain here how to add post excerpt on Blogger

Step 1

Enable Post page option from Settings->Archiving

If you see Post Page option disable then follow my tutorial - Enable post pages greyed out in Blogger

Step 2 
Next step is to modify the template.
Visit Design->Edit HTML

Add the following code  between <style></style> or just below opening <head> tag.

<b:if cond='data:blog.pageType == "item"'>span.fullpost {display:inline;}
<b:else/>
span.fullpost {display:none;}
</b:if>



 Next add following code after <data:post.body/> tag


<b:if cond='data:blog.pageType != "item"'><br /><a expr:href='data:post.url'>Read More...</a>
</b:if>


If you see any error in saving template then delete the " and ' character and renter it from your keyboard.

 Last is to add following code in every post which you want to show excerpt. You wil have to do it in Edit HTML mode and not in compose mode.
<span class="fullpost"></span>


The content between  <span class="fullpost"></span>  will show in single post page and the content above this tag will show in home page as excerpt. 

E.g.

This is excerpt and it will show on home page. 
<span class="fullpost">This is the rest of psot content which will not show in the excerpt on home page but will be visible on the single post page.</span>  

No comments: