Customize your Read more>>> or Jump link option in Blogger!

Related Search: 

read more html code for blogger, how to add button in blogger post, how to add read more on blogger, automatic read more for blogger, read more button design, read more btn t4p button, blogger continue reading, read more button css, blogger remove read more, remove jump break blogger, blogger design,how to add read more in blogger, how to add read more button in blogger, read more button design, how to add read more button in blogger post, automatic read more for blogger, blogger continue reading, insert jump break

If you are a Blogger user and have wish to customize your blog and Blogger template, You have come to the right place. Most of the blogger users use free template to start a blog. Most of the time this kind of users feel very much difficult to customize some blogger default settings such as Blogger's default Read More ........ So lets discuss about this issue and find out the solutions. 

Changing Jump Link Text:

By default Jump Link Text is Read more but you can Change it whatever you like. To change go to Layout > Blog Post > Edit > Main Page Options and change the Post Page Link Text Read more as you wish.

Manually you can do this from Edit HTML option. Go to  Template > Edit HTMLoption. Now search for  jump-link   and find out the following code.

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

<data:post.jumpText/>

</a>
</div>

Customzing Read more button to Match Template colour: 

Go to the Template opton to edit Template and search for this part of the codes ]]></b:skin>  pressing Ctrl+F button of your keyboard. If you have found out this codes, please do nothing. Now just look into the following CSS code that I have modified-

.jump-link { /* Style Entire Jump Link */ } .jump-link a { /* Style Jump Link Text Link */ } .jump-link a:hover { /* Style Jump Link Text Link On Hover Over */ }

Here the above code has three sections First one is for Jump Link, Second one is for Jump option's Tex link and Third one is Hover option or Jump Link Text Link. Please Modify the above code. If you have the minimum CSS knowledge. If not, then just See the following CSS code that I have modified.

.jump-link { text-align: right; /* Align Right of Post - can also use left or center */ background: #333333; /* Change Background Colour for full width of jump link */} .jump-link a { background: #333333; /* Change Background Colour for just the text part */ color: #eeeeee; /* Change Text Colour */ padding: 5px; /* Change Spacing Around Text */ border-radius: 5px; /* Change Radius of Background */ } .jump-link a:hover { background: #eeeeee; /* Change Background Colour On Hover */ color: #333333; /* Change Text Colour On Hover */ text-decoration: none; /* No Text Underline */ }

You can change the above red coloured value according to the colour and style of your template.Now if finish, paste the above code just before the

  ]]></b:skin>

Now just simply save the template. You will see the Styled Read more option like the following image.

Adding image or icon or button instead of Read more or jumplink
Search for the word jump-link and find the following code.

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

Now just Replace <data:post.jumpText/> with this image URL code-<img src='DIRECT IMG URL'/>

After Replacing the code your whole code will look 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'>
<img src='DIRECT IMG URL' />
</a>
</div>
</b:if>

You can now add image,icon or button replacing the url of above red colored part. After adding any one, hit Save button and see the preview. you have successfully added image, icon or button instead of Read more.

Removing Auto Jump:

When click on Read more option or Jump-Link, the whole page reloads and jumps after the lines of the Jump-break. This normally takes the few seconds to be re-load to the rest part. We can stop this function so that the whole post normally is loaded after clicking Read more. To do this do the following.
Search for  jump-link and find the following codes.

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

Now remove the above red part and Save the template. Now your page will not be re-loaded rather it will normally loaded after clicking Read more... 

Customizing  Jump link or Read more with Post Title:

To add the title of the post with the Read more text go to Template > Edit HTML > Format Template. Search for jump-link and find the following code

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

Add this title part-<data:post.title /> just after the above red colored part. Your Whole code will look 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'>
<data:post.jumpText/> <data:post.title />
</a>
</div>
</b:if>