It is very simple actually, i will teach you step by step on how you can setup your expandable post summaries. "Read More!" There are basically three steps to follow if you want to implement expandable post summaries in the new layouts template.
Styling your CSS
The First step is to style it into your CSS and this changes how posts display on different pages.
- Login to your account
- Go to 'Template'
- Go to 'Edit HTML'
Note that there is a ]]> tag just above the tag. Add the above code so that it lies between these two tags. What we did here was to define a class
called "fullpost".
Read More Entry>>
The second step is to add the Read More links which will appear after the paragraph summaries.
- Under 'Edit HTML', look on your top right and under 'Expand Widget Template' put a tick to open up more of your XML.
- Scroll down the code and look for this code
Read more Entry>>
Upon completing the code,save the template and ensure you have a backup copy of this previous template. You should see that the Read More Entry>> appearing on your blog.
Increasing your Font Size and Font Weight
Font Size
start with
End with
Font Weight
start with
End with
Using Both is another optional you can consider.
The Last Part to a Teaser look
To create the Final teaser look like and to allow users to read the full article with a click on Read more Entry, you got to hide your other half of the article post.
- Type your Teaser paragraph
- Leave this code on the next line to hide the rest of your post.
- and (In between this code will be the rest of your article content
Random Post
The Nine Habits of Highly Effective Bloggers
Learn to fail to be successful in making money online
10 Popular Firefox Addons for Better Blogging
7 tips to write a professional and effective article
Easy Steps to add Favicon for Bloggers
12 Responses to "Create expandable teaser summary for your blog"
Thanks for the expandable trick, i have been looking for this code for sometime already!
November 15, 2007 10:26 PM
Also check out .
November 25, 2007 2:56 AM
This did not work for me.
Too bad.
November 25, 2007 3:31 AM
Ahhh Very Good.
I didn't see that you had to put that "/span" "span" thing in there.
Thanks for the great tip,
Brad
http://daily-rambler.blogspot.com
January 11, 2008 3:41 AM
Thanks for you help. But it is a manual process. What about existing posts? You need to change html into your previous posts manually.
In the following link you will find a tutorial about creating expandable post summary. I have created a javascript function which makes summary automatically. So you do not need to change html manually.
January 11, 2008 6:05 PM
That is an extra great tip that you have showed, thanks for sharing.
September 11, 2008 6:20 AM
I am having the worst luck. How come I do everything perfectly and nothing ever works! :(
Is it because I have something above
< / head >?
November 2, 2008 11:16 AM
Thanks, but I'm facing some problems..
The Read more Entry>> did appears at the end of each post, but when I insert the step 3 command to hide the rest of the post, the Read more Entry>> also was hidden. Can you tell me which step went wrong?
December 24, 2008 3:29 PM
it didnt work for me either. everytime i would insert the codes, it will shrink my post area to a certain width and height and the picture i have for the post remain big.. thanks anyway
April 30, 2009 4:07 PM
it didnt work for new york asian escort me either. everytime i would insert the codes, it will shrink my post area to a certain width and new york escort height and the picture i have for the post remain big.. thanks anyway
June 23, 2009 1:24 AM
Hi Sir,
How would you make an expandable teaser summary while using Sharepoint?
March 24, 2010 2:45 PM
I have created a friendly tutorial for Blogger expandable post summary, it is new functionality added to the blogger editor. You can head on to this link article: New Expandable Post Summary from new Blogger Editor
Post a Comment
"Comments posted on Etienne Teo are moderated and will be approved only if they are on-topic and not abusive. Please use our contact or comment form for blogging or article related questions You may add your url but please don't spam - Thanks Etienne."