How to create Expandable Posts in Blogger (Classic Templates)
Blogger.com gives the option to choose the number of blog posts to display on the main page and then displays the contents of the posts in their entirety. When posts are long or composed of a considerable number of lines, it may be a good idea to show partial content to the user with a "Read More" link that shows the whole post. The article will explain how to create blog posts with partial content displayed or more aptly termed as 'Expandable Posts'.
- First, set 'Enable Post Pages' to 'Yes' in the blog settings. Doing this will give a separate HTML page to each individual post.
- The next step involves adding some CSS within the <style> tags of the blog template. The opening style tag looks like this: <style type="text/css"> and the closing tag: </style>
The CSS to be added should be somewhere in between the opening and closing tags above - to be safe, put it right above the closing tag. This is what needs to be added:
For Classic Templates:
<MainOrArchivePage>
span.fullpost {display:none;}
</MainOrArchivePage><ItemPage>
span.fullpost {display:inline;}
</ItemPage>
Your blog skin/theme is either a template or a layout, but not both. If there are elements that start with '<$' and end with '$>' it is a Classic Template; else it is a Layout.
- The third step is to add the 'Read More' link code within the <body> tags of the blog template. This code should be added right after the <$BlogItemData$> (for classic templates):
For Classic Templates:
<MainOrArchivePage><br />
<a href="<$BlogItemPermalinkURL$>">Read more!</a>
</MainOrArchivePage>
The 'Read More!' can be replaced to any other alternative message such 'Keep Reading', etc.
For example, for Classic Templates, this is how it would look:
<$BlogItemBody$>
<MainOrArchivePage><br />
<a href="<$BlogItemPermalinkURL$>">Read more...</a>
</MainOrArchivePage>
At this stage, save the template changes done so far.
- The final step is to add the <span> tags whenever a blog post is made.
On the right-hand top corner of the editor, click on 'Edit HTML'.
Put the partial content that is to be displayed above the <span class="fullpost"></span> and the rest of the content to be hidden between the opening and closing <span> tags.
3 Comments:
THIS IS NOT CORRECT PROCEDURE....AND U R CHARGING VERY HEAVY PRICE FOR UR PRODUCTS.....I AM INTERESTED IN DOING BUSINESS WITH U ...I WANT TO BASICALLY DEVELOP A WEBSITE FOR MY COMPANY, WHICH IS ONE AND A HALF YEAR OLD,IS IN EXPANSION MODE...I WILL CONTACT U SOON REGARDING THAT MATTER..BUT TELL ME ONE THING THAT YOUR COMPANY'S WEBSITE IS NOT LOOKING ATTRACTIVE HOW WILL YOU MAKE MY WEBSITE ATTRACTIVE???WRITE UR COMMENTS ON THIS PAGE I WILL READ IT LATER ON....
The procedure that has been scripted here is what was used to create "Expandable Posts" in this blog itself. Can you pinpoint what exactly is wrong?
Please look into our portfolio of website designs. You are always welcome to do business with us.
The procedure scripted here was followed to create Expandable posts on this blog itself! Can you pin-point what exactly is wrong?
Please look into our portfolio of web designs. You are always welcome to do business with us.
Post a Comment
Subscribe to Post Comments [Atom]
<< Home