"Read More" Link or Expandable Blog Post for Blogger or Blogspot

Tweet

Pin It

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.