Saturday, October 3, 2009

Expandable Post Summaries

Expandable Post Summaries

Hello, my friends
Syazchess wants to follow up one of the question from the bloggers.
The question is 'How to create expandable post summaries in Blogger?'

It is easy!
Just follow my Steps below. By following these Steps you'll be able to make the summaries of your post instead of showing the entire post on the front page of your blog. Then when people want to read the rest of the post, they can click a “read more” link to see the full post. This is very handy if you have lots of long articles all on one page.
(Note that you'll need to have post pages enabled in order to make this feature work.)

Step #1.
First, go to 'Layout' tab and choose the Edit HTML section ( Layout>Edit HTML )

Step #2.
For this step you need to backup your template (click the 'Download Full Template' to backup your template)

Step #3.
To start editing your template, please click the 'Expand Widget Templates'

Step #4.
Use Ctrl+F to find this </head> tag. Then paste this code just before this </head> tag:

Code: Select all
<script type='text/javascript'>var thumbnail_mode = &quot;no-float&quot; ;
summary_noimg = 500;
summary_img = 450;
img_thumb_height = 100;
img_thumb_width = 120;
<script src='' type='text/javascript'/>

You may change the numbers, as per your wish. If a post doesn't have images then the length of the summary will be 500.
If a post contains image, then text length will be 450, and the first image that will be displayed will have these dimensions:
width= 120, and
height= 100.

Step #5.
Again, use Ctrl+F to find this <data:post.body/> tag. Then, REPLACE that line, with this code:

Code: Select all
<b:if cond='data:blog.pageType != &quot;item&quot;'> <div expr:id='&quot;summary&quot; +'><data:post.body/></div> <script type='text/javascript'>createSummaryAndThumb(&quot;summary<>&quot;);</script> <span class='rmlink' style='float:right;padding-top:20px;'><a expr:href='data:post.url'> read more &#8220;<data:post.title/>&#8221;</a></span> </b:if> <b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

Step #6
Save template.



Post a Comment


Blogger Tips and Style Copyright © 2009 Community is Designed by Free Blogger Template