How to Create Expandable Post By Using “Read More” Option at Blogger (Blogspot)

Sometimes this expandable feature is drastically needed, whether to beautify the main page (front page of blog) or giving the main page more space for posts. If you add a Read More option on your blog; your blog post will show a first selected paragraph of your post in the main page and the rest of the post will be summarized by a “Read More” button at the end of this post.

But the sorrowful matter is that – in Blogspot (Blogger) blog you don’t have the authority to use any plugin and this is why you have to do some hacks(adding some html codes) to manipulate the expandable post feature with a “Read More” button.

So, if you use the WordPress Blogging platform; you don’t have to worry about the Code Mess up fact during adding some HTML codes on your page. There are lots of Plugin to create a “Read More” expandable option in your blog post.

Now, I am giving you some easy tricks to add “Read More” expandable button on the below of your blogspot or blogger blog post.

There are two way to do this. One is for if your blog the blogger (blogspot) default theme installed and another is if your Blog have any third party template installed.

In Case of Default Blogger (Blogspot) Theme:

• When you are finished to write a post on the Blogger new post box, define where the “Read More” option will be placed. Put your cursor on that position.

• Now find the “Jump Break” icon from the Toolbar which just above on your Post Editor box.  See the image below to find the location of “Jump Break Icon”.

• Click on the “Jump Break” icon. A break space will be added on your post. It is moveable; so move it within the post whenever you want to place the “Read More” button. Otherwise the “Read More” button will fixed into the right place where you placed your cursor.

• Now publish the post. Go to your blog’s front page. You will definitely see that, your post has been summarized with a “Read More” button at the end.

In case of Third Party Blogger Theme (Blogspot Theme):

Sometimes it is seen that, the “Read More” option works well in some Third Party Templates too. But if it not works, there is a code for you to do this hack easily.

• Go to your Blogger dashboard and click on the “Layout” tab on your desired blog.

• Click on “Edit HTML”.

• Back Up your template by “Download Full Template”. (It is recommended. You should do it, because if you mess up with the codes it’s possible to recover your template by using this downloaded XML file).

• Now Click on “Expand Widget Template” to expand the HTML codes.

• Press “Ctrl + F” from your keyboard. A search box will be showed at the bottom of the HTML Code editor box.

• Type   <data:post.body/>  on the search box. It will take you to the exact codes.

• Now copy the Code mentioned below –

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"'><data:post.jumpText/></a>
</div>
</b:if >

• Paste the copied code just below the <data:post.body/> text on your template.

• Save your template. It’s done!

• Now during writing any post, place your cursor in the right place and click on the “Jump Break” icon from the toolbar.

• Your post will show a “Read More” button at the end of the summarized post in the front page.

If you have any trouble still too, let me know it. I must help you.

Related posts:

1. How To Place Google Adsense Ad Below The Post Title of Blogger/Blogspot Blog?
2. How To Use HTML Alt Tag in Image of Blogger (Blogspot) Blog?
3. How To Add Retweet Button Just Below The Post Title of Blogger Site
4. Setup a Blog For Free in Blogger.Com (Blogspot) [For Newbies]
5. SEO For A Post | Steps That Every Blogger Should Know
6. Why Attractive Post Title Is Important?