I have been looking all over for a
Blogger script or hack to create a "
Read More" link on my blogs. I want to use it so that only the summary of my blog post is seen on the main page and viewers can click on the "Read more" (or for my blog,
"Continue reading...") to, well, read more or the whole blog post. Also, loading my main blog page will be faster.
There's a help page on
Blogger that shows you how to do it. I tried it and for someone like me who knows a bit about coding, it was hard to understand. Thankfully, I found this blog by
Vin:
Dummies Guide to Google Blogger Beta. If you click the link, it will go straight to his tutorial. However, I want to simplify it even more and give you tips based on what I did. So, continue reading if you want to know how I got it to work.
Before anything else,
SUMMARY is the only part of your blog post that will be shown on the main page. The
FULLPOST is your whole blog post.
Step #1: Before you do ANYTHING, backup your template! Just click on the
Download Full Template. In case you change something that's not supposed to be changed, you can revert to your original template/layout.
Step #2: On the Layout tab on your Blogger user page, make sure that the
Expand Widget Templates box is checked (see right). If you don't do this, you won't see the code that you need to look for on Step #4.
Step #3: Look for the
</head> on your template code. (You can use CTRL+F to look for this code). Now, add the code below right
BEFORE </head>:
<!-- READ MORE -->
<style>
<b:if cond='data:blog.pageType == "item"'>
span.fullpost {display:inline;}
<b:else/>
span.fullpost {display:none;}
</b:if>
</style>
Tip: I always put comments (
<!-- READ MORE -->) before the widgets or codes that I add to my template. It will be easier for me to remove or change it in the future.
SAVE THE TEMPLATE.
What was done? We defined a class called "fullpost". This will tell which part of your blog post should be shown only on the post pages and not on the main page.
Step # 4:
Look for
<data:post.body/> tag in your template code. Again, use CTRL+F to find it easier. Then, add the code below
IMMEDIATELY AFTER it:
<b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url' target='_blank'>Read more!</a>
</b:if>
Note: You can change the "Read more!" message to anything you like. For my blog, I changed it to "Continue reading...".
Also, this link will ONLY be shown on your
main page and
archives.
SAVE THE TEMPLATE.
Step # 5.a:
Now, we will create a Post template so you won't have to do it everytime you create a new post. However, read my notes after the instructions.
Click on your
Settings tab. Then, go to
Archiving and make sure that you set
"Enable Post Pages?" to "Yes".
Save settings.
Step #5.b:
Then, click on the
Formatting sub-tab. Look for the Post template at the bottom of this page and copy paste the following:
SUMMARY HERE
<span class="fullpost">
FULL POST HERE
</span>
Save settings.
Step #5.c:
From now on, whenever you create a new post, there's a post template for you so you won't have to do it everytime.
Note: Make sure that the
</span> tag is at the VERY BOTTOM of your blog post's HTML code.
Tip: I chose not to create this post template for my own blog. Why? I want to see how my blog post looks like first on my browser before I select which part of it I want people to see first on my main page. Once I figured out which one needs to go to the main page, I just copy and paste after that part the
<span class="fullpost"> code for the rest of my post to be shown on the post page.
There you have it! This is extremely useful if most of your posts are REALLY long. It won't take forever to load your main page and it won't look all cluttered.
IMPORTANT NOTE: This hack will create a "Read more" link to ALL of your blogs on the main page and archives. So, you need to edit ALL your posts. But, with mine, I only edited the last 7 blog posts. I'll just do this moving forward.
There's no hack yet that wouldn't put the "Read More" link on all your blog posts on the main page. I'll try to do this myself because that's what I want here.
TROUBLESHOOTING: I had problems making this work on my blog. Upon further inspection of my codes, I found out that the
<span class="fullpost"> was causing the problem. So, make sure that...
- You check if there are open tags on your codes. Make sure that <span> and </span> tags on your codes are closed properly.
- Check <p> and </p> tags. Make sure they are also closed properly.
- Clean up your tags/codes! Sometimes, editing your posts on Blogger will create multiple open tags.
Now, if you want this done automatically, check out the guide I found at It's a Fun Blog using Javascript. It will automatically truncate or cut your blog posts. I tried it myself but it wasn't for me.
If you're having problems getting this to work, leave me a message. I'll do my best to help you out.
I am a BIG fan of the reality TV show 
with them. for instance, i still can't understand everything they say. so whenever they tell a funny story, i look like a snob or stuckup coz i don't laugh or even react to what they're saying. i don't want to ask mai to translate everytime coz i'm doing my best to understand what they're saying but it's really hard. but i know i'll get used to it and i'll soon understand them well enough to laugh at their funny stories. (cross fingers)