Customize Blogger Read more Button

Change Read more button, Change text, Add images or animations. How to customize Blogger read more button. There are the topics we are going to learn on this post. If you don't know about blogger Jump breaks, You can readHow to add Jump Breaks to Blogger posts article. Blogger will add " Read more >> " Text as default Jump Break text. we can easily change this text and its attributes like font, size align using basic Html and Css codes. We also can link an image file for it. Have you seen animating read more buttons? It's very easy to do. Just make animating button and save it as .Gif image. now you can link that image to your Jump break as we learn on this post.

First you have to check if your blogger template already supporting Jump Links or you must add Jump break support manually. If you are using a basic blogger template or your own template, you have to add Jump break support manually. Read How to add Jump break support widget to blogger template

Change Jump Break Text

First you have to open the Edit Html mode in design tab. Go to Blogger Dash board then open Edit Html on Design Tab like the following Screen shot

Now find this code on your Template code


<data:post.jumpText/> 


Now replace it using this code


<P> Your Text </P>

You can enter any character, Number or a symbol in blue color "Your text" part. 

Change alignment and other text properties of a Jump Break text 

You can align your Read more button using "left" , "right" or "center" properties of Paragraph tag. For a sample lets use "Continue reading..." as our jump text button in center of the article page.. then that code will be like this.

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

    expr:title='data:post.title'>

<p align='center' >Continue reading...</p></a>
</div>
</b:if>

Add an image for the Jump Break

Adding an image to the read more button is very easy. Just upload your read more button and get the direct image link. you can upload it to blogger or your picasa web album. easy way to get the direct link to a new image is create a new post and upload your image. then publish it and go to the published page, right click the image , click copy image location, now you can delete that post. once you have the direct link to the uploaded image you can use <img> tag to link the image to Read more button.

Now find this code on your Template code


<data:post.jumpText/> 


Now replace it using this code


<P> <img src="image direct link"/></P>


You can use your image url in the blue color text.  you can directly resize your image using width and height properties like this  


<P> <img src="image direct link" Width="change" height="change" /></P>

How To Add Read more Button to Blog posts | Insert Jump Beark

Adding jump breaks to blogger posts is very easy. most new custom blogger templates comes with auto jump break widget. if you are using a basic template from blogger, you have to manually add jump breaks to your post. in this post lets learn what are the jump breaks, How we can usejump breaks, Thy they are so important and what are the advantages of adding jump breaksmanually. Jump breaks will show "Read more >>" by default. but you can change it's text and appearance ( Font, Size, Font color and background color ) Also you can add an image for it. Read this info to learn about adding and customizing blogger jump breaks.

What are these Jump Breaks .

We use Jump breaks to add Read more button to our blogger posts.  When you have added a jump break on your blog post, it will divide your post to two parts. when you open your home page or a label page it will show your post until the Jump break and after that you will see read more text or an image. when you click on it you will see the full article on same tab.

Advantage of using Jump Breaks .

When someone open your home page they can see lots of posts with some information ( part before Jump break ). So you can atleast show 5 posts without making the page too much longer. visitor doesn't have to scroll down to see the next post. when he see a interesting post he will click on the post title or Read more button. then it will open a new page. that means another page view. that's good for your blog traffic and adsense. new page views means more impressions to your account. 

Add a Jump Break Manually.

if you are using a basic blogger template you don't have auto Jump Breakwidget installed. so you have to manually add it. When you type your post keep the mouse pointer at the place which you want to add the Jump break. now click "Insert Jump Break" button on blogger tool bar. or you can go to the Edit html view and type <!-- more --> where you want to addJump break. now save that blog post and see how is your post appears. you will see the text before the Jump break with read more text.

In our next post lets learn how to add auto Jump break widget to our blog and how to customize jump break link. you can change the Jump breaktext or you can add an image for it.