How to add a read more button to blogger posts - part 1

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:

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 {

background-color:white;

background-image:url(http://i645.photobucket.com/albums/uu178/coolboycsaba/read-more.png);

height:33px;

width:133px;

padding:2px 0 0 0;

background-repeat:no-repeat;

float:right;

}

a.read-more {

color:white;

font-size:18px;

color:white;

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: