Create "Read More" Button in Blogger

Blogger’s users or blogspot users used to create "Read More" be a tedious task. We used to have tweak some complex codes and sometimes can’t work. But now with Google Sidewiki, it will be pretty easy job to do. You can add "read more" or expanded post or post summary after you add <!-- more --> . Here the steps :
1. Login into your account in Blogger.com
2. Click "Setting" than choose "Basic"
3. Scroll down to "Global Setting" check the button "Update Setting" then "Save Setting". Done.
4.Go to Layout. Click "Post Body" in the template.
5.There are some option like if you want to add "stars rating", "adsense codes" etc. You should find the option "Read More". Choose it. After done, click Save.
If you are using non-default template or third party template, you have to do this :
1. After the no "5" step above. Click "Edit HTML".
2. Back up your template in case something happen, do it with click "Download Full Template" button.
3.Now, after it done. Click "Expand Widget Template"
4. Find out this code on your HTML template :
<data:post.body/>
5. After you find it, just paste codes below right after the code above :
<b:if cond=’data:post.hasJumpLink’>
<div class=’jump-link’>
<a expr:href=’data:post.url + "#more"’><data:post.jumpText/></a>
</div>
</b:if >
6.After that click "Save Changes".
How to Posting :
Now, lets try this new feature. You can try posting new articles or edit your old articles. This "Read More" function only appear on your main page.
1. Go to Post Editor in Blogger.com. Type an article that do you want.
2. Now decide where you want to add "Read More" option. I mean, there should two part from your article, one is the part that you wanna show and the second part is hidden and only shown if the readers click the ’read more’ button.
E.g you choose the fourth sentences to show and the rest of articles will be hide and only can read when the readers click "read more".
4.After you decide, click "COMPOSE" (if the post editor not in Compose Mode)
5. Now find tab ’ Insert Jump Break" in the post editor. It is in right side. Click this tab between part of article you want to show and part of article you want to hide.
E.g put your mouse cursor after the 4th sentence like no.2 example. Then click the tab "Insert Jump Break". In "COMPOSE" mode, you’ll see grey bar at the cursor point.
6. If you click click "Edit HTML" on the post editor, you’ll see this code : <!-- more -->
7. Now your done. Click "publish" and see your posting. You should see "Read More" on your post.
Learn more here or here

Posted in: Tips and Trick