Create read more button on blogger to show the selected content or text

In this article I will describe you about "Read More" option for blogger. Many of blogger still facing such type of problem and finally they decide to change the valuable template of blog only for "Read More" option.

A "Read More" button is very useful if you have blogger having long articles. Here you can select the amount of text from the beginning of the post to display as a teaser. Here I will show you how to design "Read More" button. You can use simple text link but better to try image type of stylish button.

1. First of all you need to create and button (image) to use as background for the button. You can create that image by "Ms. Paint", "Photoshop" or etc.

2. Sign up for the photobucket or google page creator.

3. Place this given code in 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 above code after following line:

<data:post.body/>

4. Add CSS code to customize the "Read More" button

#read-more-button {

background-color:white;

background-image:url(http://i998.photobucket.com/albums/af103/sankpur/readmore.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;

}

Replace" http://i998.photobucket.com/albums/af103/sankpur/readmore.png" URL with the link you’ve copied at Step 2(photobucket).

Above first code is to enable "Read More" button and the second code is to customize 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 button, 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>

To show the only a select amount of text as a teaser from your content you will need to select the amount of text to show for each post separately. The content of the post is placed in a div but without the select part of the text. This display of that div is set to hidden so on the main page of the blog is visible just that part of the post what is not in that div. The full post is visible only on the post page. Code is given below

<b:if cond=’data:blog.pageType == &quot;item&quot;’>
<style>#full-post{display:inline;}</style>
<b:else/>
<style>#full-post{display:none;}</style></b:if>

Place the above code right after the

<data:post.body/>

5. Save the template and now edit your posts in the following way

This is the first part of the post, the teaser (the part of text showing up on the main page of the blog) <div id="full-post"> This is the rest of the post. This part of the post if visible only on the page of the post. </div>

The red marked code snippets are the starting and the ending tags of the div called full post. Place these tags in each of you posts in the same way as example shown above.

Related posts: