, ,

How to Make "Read More" (Expandable Post Summaries) in Blogger Templates

Thursday 3 September 2009 Leave a Comment

If you have changed your blog template, you might feel there is something missing from the new look of your blog. Take a look, your blog article looks too long isn’t it? If you make a certain length articles, the entire article will be displayed. This makes your blog look less attractive and give some trouble to the reader to see all titles of articles on the front page of your blog.

It happened because you have not added the code "Read More" (Expandable Post Summaries) in your template. If you already added this "Read More" (Expandable Post Summaries) code, then only a part of your article will be displayed. The rest will be hidden and only displayed when the reader interested to continue reading and hit the "Read More" link or button.


If you are interested to make it, you can following this:

1. Log in to your blogger. com account
2. Check “settings” menu and then check “formatting” page
3. add the following code in the “post template” box

<span class="fullpost">

</ span>

Then Save.
4. Go to “layout” page, then check edit template
5. Check the expand templates widget box
7. It is better to download all of your templates first. If there is a mistake you'll easy upload it back.
8. Find the following code:
<div class='post-header-line-1'/>
<div class='post-body'>

(Can be also like this:
<div class='post-body entry-content'>

Just find the most similar)
9. If so, add the following code 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>

10. Look down, there will be this code:
<p> <data:post.body/> </ p>
<div style='clear: both;'/> <! - clear for photos floats ->
</ div>

11. Among the code:
<p> <data:post.body/> </ p>

and
<div style='clear: both;'/> <! - clear for photos floats ->

Add the following code:
<a expr:href='data:post.url'> Read More .. </ a>
</ b: if>

12. If you've done, then save your template.


Now try to edit one of your post:
1. Check Edit HTML on your post page
Choose the section you want as your article summary, or which will appear on your blog page. Put code:
<span class="fullpost">

afterwards.
2. Put the code:
</ span>

on the bottom, so that the rest of your article will be among the code
<span class="fullpost">

And
</ span>

2. If you have done, save your article back.
3. Now, please check at the new look of your blog.
4. Done.



RELATED ENTRY:



Widget by Scrapur

1 comments »

  • kakve-santi said:  

    nice info, tengs.., :)

  • Leave your response!

    Im really appreciate if you:
    Dont spaming, or promote your blogs, and dont use inappropriate contents or words in this comment box. Thanks.