Align ‘Read More’ Link/Image To Right Or Left

Read more is the common button/link in a website.Each Customized or a Default template has it’s own read more button/link.But Beginners don’t know much about CSS and HTML.If one wants his read more button/link at right side while he is having at left and one wants his read more button/link at left side and he is having at right side so he must follow this post.

1. Login to your blogger account
2. Go To Design > Edit HTML > Expand Widget Template

How to Align A Read More Link

1. Find this type of code just below  <data:post.body/>

<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>

    2. And Replace it with:

<b:if cond='data:post.hasJumpLink'>

<div class='jump-link'>

<a expr:href='data:post.url + &quot;#more&quot;'><p align='right'><b>Continue Reading-&gt;&gt;</b></p></a>

</div>

</b:if>

• You can change the highlighted code with left to align it at left
• You can change the link text  which is in italic font above ‘Continue Reading’ and if you do not want your link bold then simply remove <b> and  </b> and if you want to show the link in italic font simply add <i> before the link text and </i> after the link text

How To Align A Read More Image/Button

If you have a button/image then just below  <data:post.body/> tag you will find the code some thing like this:

<span class='rmlink'><a expr:href='data:post.url'><img src='Url Of Your Image OR Button'/></a></span>

Just replace this code with and put your image url:

<span class='rmlink'><a expr:href='data:post.url'><p align='right'><img src='Url Of your Image’></p></a></span>

• Replace highlighted code with left to align it at left side

If you enjoyed the post Please like and share it if you have any problem drop a comment below