Sunday, May 06, 2007

Creating "Read More" Blogger Articles

I have been asked to explain how I get my articles to show in two parts: an excerpt on the main page with the full post on the article page only. There is more than one way to do this, but the following requires only three easy steps.

Please note that if you have made additional alterations to your template this may get more complicated, and since I have made such mods, I don't know if this explanation will work completely or perfectly for all people. Use at own risk. Etc. Etc.

1. Modify style

Edit your template. Somewhere near the end of the HTML header, eg. before the </head> tag, put the following style code:
<style type="text/css">
.fullpost {display:none; margin-top:0em;}

.fullpost {display:inline; margin-top:2em;}
This utilises the Blogger tags that restrict which pages code will appear on. On the main or archive pages, layers with class "fullpost" will be styled so that they do not display. On item pages such layers will be displayed inline, with a suitable top margin.

2. Modify post formatting

Again, edit your template. Somewhere at the end of the <div class="post"> layer you need to add code that displays the "more" link.
<div class="more">
<a href="<$BlogItemPermalinkURL$>"
title="read article">more</a>
[The anchor link should be on one line but is split here for ease of reading.]

Like before, this code is contained in Blogger tags that restrict its use to main or archive pages. You can customise the look of this link if you wish. But the important thing to remember is that this will appear for every article.

3. Create a post template

In your blog configuration, click the "Settings" tab and then the "Formatting" link. At the bottom of the page is an area where you can enter a "Post Template". Though confusingly named, the purpose of this is simple. Any new post you author will begin, not with empty content, but with whatever you have here.

Enter the following, to act as a reminder of what you need in each article:
<div class="fullpost"></div>
That's it! You are ready to begin.

Authoring a post.

Each time you start a new article it will begin with the code above. Put any content you want to appear in the excerpt before that div. Put the remainder of the article within the div. The last thing in each article should be the concluding </div> tag.

Please note that this does not reduce the size or loading time of your main page, since the entire contents of each article are still present, merely hidden. But it does improve the readability, since the page can be scanned easier for articles of interest.



Arif Maftuhin said...

Thanks a lot. I love to learn this and I will try for my blog

Leon said...

I use the old classic template, since I'm too lazy to do otherwise. I am also too lazy to figure out how to stop the 'read more'/'continue' link from appearing as a default. Help! Thanks.

don_ser said...

wow... but sad to say... mine is wordpress

Post a Comment