Go back to surfing session

Subscribe to our feed!
A Read more... button is very useful if you have very long articles, because you can select the amount of text from the beginning of the post to display as a teaser. This post is the first part, in this post i will show you how to design your own read more button, because a stylish button is always better then a simple text link.

1. First we need an image to use as background for the button. I will use this image as example:
read more
Please don`t use my image, try to create your own with any image editor program like Photoshop or even with Paint.

2. Now we need to place a code snippet inside of the template code :
<b:if cond='data:blog.pageType != &quot;item&quot;'> <div id='read-more-button'><a class='read-more' expr:href='data:post.url'>Read more...</a></div></b:if>
Place the code right after the following line: <data:post.body/>
This code snippet will place a simple Read more... link after all of your posts.

3. Now we will add some CSS code to customize the button:
#read-more-button {
padding:2px 0 0 0;
a.read-more {
font-weight: normal;
margin:0 0 0 18px;
This is the code what i have used for my button. The first part of the code is responding for the button ,the second part for the text of the button. The height and width tags from the first part of the code are defining the size of the button, use the size of your image. The padding is the distance from the button and the objects around it. The first number is defining the top margin, the second number the right margin, the third is number the bottom ,and the last number the left margin. The padding is defining the space between the text inside the button, the values are the same as the margin. Place this code right BEFORE this code: ]]></b:skin>
If you don`t understand something just ask!

Save your template and read the second part of the post: How to add a read more button to blogger posts -part 2
Related tutorials:


great post, with some good code info. really like your blog theme as well. did you create yourself?

Thanks , and yes , this is my template own but I`m still working on it

thanks for yourusefull information you have showen
a good step by step method to add a Read more button.also you have given the code

I keep reading tweets and news articles either questioning, or in some cases flat out stating that blogging is dead. I’m here to say that regardless of what other websites have to say about this, blogging is not dead. Most of the articles point to Twitter or Facebook as the new craze. These sites definitely add to the social experience of the web, and add value to social media. Blogging may be on the decline as web usage changes over time, but blogging is here to stay.

Post a Comment