Dexter wants to know how I created the "» Continue reading" links on the non-post pages to make the length of my posts shorter on the index and archive pages so that the readers can have a quick glance at the posts and click "» Continue reading" if they decide to read the complete post. With this trick, you can choose to display an arbitrary amount of text from any part of the post you desire to display. It is quite useful, especially on archive pages, where you have lots of long articles all on one page. This feature requires you to have post pages enabled.
Blogger's original instructions for expandable post summaries to the old Blogger template and Beta (now new Blogger / Blogger v.2) template is available here. However, that page is not without any faults and omissions like the other google.com pages, which are published in haste.
In Step 1: Conditional CSS (for layouts)
New Blogger templates or Layouts do not have a style-sheet by default. The styles are enclosed within the <b:skin></b:skin> tags. It is not possible to add the conditional <b:if cond='data:blog.pageType == "item"'><b:else/></b:if> tags within the skin tags. You have to add the conditional CSS within <style></style> tags outside the skin tags. Simply insert the following lines anywhere between the <head></head> tags.
Please note that using this hack will just reduce the amount of information that is displayed on the screen. The full content of the posts is still downloaded to the Web browser and available behind the screens (view page source) which means that there won't be any improvement in the download speed of the page. If you know of a hack that can help reduce the download speed of the index and archive pages by omitting the unwanted part of the posts from the page source, then please do hashout!
Blogger's original instructions for expandable post summaries to the old Blogger template and Beta (now new Blogger / Blogger v.2) template is available here. However, that page is not without any faults and omissions like the other google.com pages, which are published in haste.
In Step 1: Conditional CSS (for layouts)
New Blogger templates or Layouts do not have a style-sheet by default. The styles are enclosed within the <b:skin></b:skin> tags. It is not possible to add the conditional <b:if cond='data:blog.pageType == "item"'><b:else/></b:if> tags within the skin tags. You have to add the conditional CSS within <style></style> tags outside the skin tags. Simply insert the following lines anywhere between the <head></head> tags.
<style>
<b:if cond='data:blog.pageType == "item"'>
span.fullpost {display:inline;}
<b:else/>
span.fullpost {display:none;}
</b:if>
</style>
Please note that using this hack will just reduce the amount of information that is displayed on the screen. The full content of the posts is still downloaded to the Web browser and available behind the screens (view page source) which means that there won't be any improvement in the download speed of the page. If you know of a hack that can help reduce the download speed of the index and archive pages by omitting the unwanted part of the posts from the page source, then please do hashout!
If you enjoyed this post then Bookmark or Subscribe to HashOut for FREE!
Read more on Blogger, Blogger Hacks, Blogging
Newer Post
10 Comments:
Well, I tried exactly what you said (and redid it again) and it didn't work me. Any solutions?
As I said you have to follow the instructions on http://help.blogger.com/bin/answer.py?answer=42215&topic=8932 keeping in mind, if you are using the new Blogger Layout template, to add the Conditional CSS within separate <style></style> tags.
I did as you said and works but I can't put the code for the "Read more", can you put the rest of the code?
1. Go to Template > Edit HTML
2. Check Expand Widget Templates
3. Find <data:post.body/>
4. Insert the following lines immediately after that:
<b:if cond='data:blog.pageType != "item"'><a expr:href='data:post.url'>Read more!</a></b:if>
Hope that works. Any further doubts, please explain your problem in detail.
Great work Aziz!
but I have one question: is there anyway I can disable this hack on a certain short post? not on the first post but on the post that don't have a long content?
I tried not to put the "span" in edit post window, but it still appear on the bottom part of my post.
thanks in advance
Hi Ric! Nice question... As far as I can think it is possible by placing an HTML comment tag at the end of each post where you want the "Read More" or "Continue reading" link and then using JavaScript replace it with the "Read More" link, just like how we do it in Placing AdSense Ads in the middle of Blogger posts, but it would be quite an inefficient method.
If anyone of you know a better way of achieving this, please hash out!
Hi Aziz!
Thanks for your reply. Wow, that was quick! :o
As I keep looking for an answer to my question after I posted a question here, I've found a way on how to selectively put an expandable post on this new blogger.
Ramani of Hackosphere used a similar approach just like yours. You guys can check the full tutorial on his blog. It's very cool!
PS: His method won't remove the "Read More..." link on a much older post when you -- click the "Older Posts" -- which can be found at the bottom part of Blogspot.
Hi friend i went through whole process like you have written in your post but it didn't worked in my template . I am using blogger classic version and i created my template through psyc.horm.org which is a online tool . So can you tell me how we can add read more option in these template . If you can help me than i will send you my template codes via email or you can visit my blog and check it where i have to add codes to get expandable posts .
i have this popping out of my post.
expr:id='"post-" + data:post.id' >
since i'm new to this, could you please advice what i did wrong? many thanks!
Thank you for this explanation! I only have one problem. After I added this to my blog template, I can create exandable posts but I can no longer Add and Arrange Page Elements (the screen where you Click and drag to rearrange page elements on your blog). Instead I get this error message:
Error interpreting blog template
Invalid data reference post.url: com.google.layouts.framework.widgetview.GoogleMarkupException: No dictionary named: 'post' in: ['blog']
I'm using the Denim template by Darren Delaye in the newest version of Blogger.
Is there any way I can avoid this error?
Thank you!