Update:
On September 9, 2009 Blogger introduced “Jump Links” that incorporates the <-- more --> tag, much like WordPress. This allows Blogger users to display posts excerpts easily in their blog. For more information, please read the help article on creating Creating ‘After the jump’ summaries.
Many blogs may display only a few paragraphs of a post, and then provide a link to the rest of the post. These blogs usually publish rather large posts, and would like to display several posts on they home page, without the page getting too large.
WordPress has a tag that you can insert to create a post excerpt, but Blogger doesn’t have such a feature. In this post I will explain a work around you can use to create post excerpts in Blogger.
Create a Post Excerpt
The method that I will explain below is not one I created. I found it while looking through the Blogger help. Since it can be difficult to find specific help, I have decided to publish the technique in this post.
The technique involves using CSS to hide or display the post. To create a post excerpt in Blogger, use the following steps:
- Log in to your Blogger account.
- From the dashboard, click the Layout link to the blog you want to add a blogroll to.
- In the menu at the top, click Edit HTML to view the HTML for your template.
- In the head section of your template, include the following HTML snippet:<style>
<b:if cond=’data:blog.pageType == “item”‘>
span.fullpost {display:inline;}
<b:else/>
span.fullpost {display:none;}
</b:if>
</style>The above HTML snippet checks to see what page type is currently displayed, and builds the CSS depending on the page type. If the page type is item (or post), then the span tag with the class of “fullpost” is displayed. Otherwise, the span tag is hidden.
You will see where the span tag is inserted in a little bit.
- Search your template for data:post.body. Below that line, add the following:<b:if cond=’data:blog.pageType != “item”‘>
<p><a expr:href=’data:post.url’>Read more!</a></p>
</b:if>The above code will add a “Read more!” link to your post exceprt that will redirect your visitor to your post. You can change “Read more!” to whatever text you like.
- Once you have made the above changes, click the Posting tab, and create a new post.
- When you are finished writing your post, move your cursor to the end of your post excerpt and insert the following:<span class=”fullpost”>
- Move to the end of your post and insert the following HTML:</span>
- Save your post, and then view it in a browser. You should now see your post excerpt, and your link, on your home page. Clicking the link should take you to your post.
This will make your post look like the following:
<span class=”fullpost”>
This paragraph will only appear when a visitor clicks on the link to view the entire post.
</span>
The one downside to using this method is that the visitor will still download the entire post as the displaying of the post is controlled by CSS. This method, however, will allow you to display excerpts from each post, without the display of your page being too large.
When I used Blogger, I used this technique on my blog since I do write fairly large posts, but since I switched to WordPress, I use WordPress’ built-in method.
If you liked reading this post, consider following Technically Easy through the following:
on October 17, 2008 at 12:31 pm
Great info! I prefer to use the wordpress build in “read more!” or whatever it say. It’s also much easier to cut the post by just adding and viola.
Thanks
on March 25, 2009 at 11:07 am
It’s showing an error i.e “LHS of numeric is null before 28 in data:blog.pageType == “item” .
Any idea how to overcome that.
Thanks
Mohit
on March 25, 2009 at 8:06 pm
Ensure you have included all the necessay single and double-quotes in the code. You may need to retype the single-quotes if you copied the code into your template. There have been problems with the single-quotes in the past.
With regards to the error, I haven’t seen that one before. I would need to see the entire line in question to determine what the problem is.
on April 5, 2009 at 2:31 am
What does one do if there’s no data:post.body in the HTML code?
on June 27, 2009 at 9:08 pm
make sure the check box on ‘expand widgets’ is checked.
on July 3, 2010 at 5:23 am
Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: Open quote is expected for attribute “{1}” associated with an element type “cond”.
It shows this error please help…………
on September 11, 2010 at 2:11 pm
I had the same issue as you. I had to remove the tags and put the code right before the closing tag of the template skin. So it looked like this:
span.fullpost {display:inline;}
span.fullpost {display:none;}
]]>
on September 11, 2010 at 2:12 pm
Well, it stripped the code. Maybe this will work?
span.fullpost {display:inline;}
span.fullpost {display:none;}
]]>
on September 12, 2010 at 11:35 am
To display the code in comments, you will need to use the HTML character codes. For more information, please read How to Display HTML Code in Blog Comments.
on July 9, 2010 at 1:40 pm
Any idea how to do this on a classic blogger template?
on November 15, 2010 at 7:17 pm
great info! try this one to my blogger…
Cheap Android recently posted…LG Optimus GT540 – Middle Range Smartphone
on February 4, 2011 at 1:14 pm
Perfect! This is what I am looking for, since most of my posts are very long and I need to have the excerpt posted instead…
UnwiredTech recently posted…CSS Optimizer – clean your codes
on April 20, 2011 at 8:41 pm
The homepage looks good if only the post excerpts are showing. Thanks for sharing this tutorial.
on April 21, 2011 at 8:07 am
Hi Raymund. No problem. I like a blog’s homepage that shows only excerpts. It allows more posts to be displayed without increasing the size of the page.
on June 6, 2011 at 6:46 am
Nice post. very helpful for me. I was searching for this since long. finally my search ends on this blog.
Dheeraj recently posted…Angry Bird game for PC Download for Free
on June 12, 2011 at 7:30 am
Hi… I could not get the data:blog.body tag
and I also got an error showing “LHS of numeric is null before 28 in data:blog.pageType == “item”
Please help. Thanks..
on June 12, 2011 at 8:50 am
Hi… I re-did it again, the template saved but when I viewed my blogger page, it think it stripped the code.. Please help.
on June 13, 2011 at 8:18 am
Stripped the code? Do you mean that the code wasn’t saved with the template?
on June 13, 2011 at 8:21 pm
I was saved but when I viewed my blog, all my post was not displayed, leaving only widgets on the page… But it’s ok… I found out the ‘jump’ feature on Blogger.
Thanks anyway…
on September 3, 2011 at 7:55 am
Good trick bro! Thanks for share.
Latest News recently posted…Drake Puts Rick Ross in the Class of Biggie and Snoop Dogg
on September 27, 2011 at 8:25 am
Thanks for share this bro
It still can be used
on October 18, 2011 at 11:25 pm
good trick, it still works!
ravi recently posted…Best Android Tablets in India- October 2011
Twitter: allandroidplus
on November 22, 2011 at 3:05 am
I have already written about 220 blogposts and I now want to display an excerpt in every post.
How can I do this without being forced to change all of them ? This will take a little while……
Rasmus recently posted…2 olika webbtjänster som erbjuder dig möjligheten att börja tjäna pengar på Twitter
on November 22, 2011 at 8:31 am
I believe Blogger’s new way of displaying excerpts requires you to modify the posts, but I could be wrong. You will need to perform a search on Blogger as to the best way of displaying excerpts as Blogger has changed since this post was written.
on December 5, 2011 at 12:19 pm
Thanks for the info! This is just what I needed! If you have time please check out my blog on How To: Root DroidX2 DroidX Droid2 I’d appreciate it!
Josh recently posted…30 Days Of Droid – A new winner EVERY DAY for 30 Days in December
Twitter: rootyourdroid