How To Replace Read More Link with Image or Button In Your Blog

Bloggers read more link in the Homepage.One more default feature that makes your blog's appearance look ugly.And thus it needs to be customized.

If your blog's read more link is just a simple link then you must have noticed that it doesn't just looks too good.And especially, when you are always trying to make your blog's appearance a heart conquering one.

So you need to customize it !! And that is just what I will be blogging about in this post.

What we will try to achieve is to convert this

into something like this.

You can put an image instead the text or use a button or change the text like "Keep Reading" or something similar to it according to your choice.


So let's Get Going

1.How To Change The Read More Link with An Image :

1.1 .Go to blogger dashboard and choose your blog.

1.2 .Get to the template section of the and click Edit Template.

1.3 .Now Press CTRL + F to get the search bar and search for this tag <div class='jump-link'>

1.4 .You will find something like the code given below

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

1.5 .Replace the red highlighted code with the following tag <img src='link to the image'width='52px' height='25px'>

1.6. The Final Code will look like the one below.

<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='link to the image' width='52px' height='25px'></a>

      </div>

    </b:if>

1.7 .Paste in the url of the Image that you want to display as your read more link.Try changing the Width and Height of the image if the image appears too big or small.

Just Save your Template and that's it refresh your blog.You will find the image instead of your read more link,Enjoy the changes.

Possible Errors :
       Some of the templates may not have this tag  <div class='jump-link'> .If you are one of them then I would recommend you to find the jump link in your template by searching for "Read More" in the search bar and you may find something like the code below.

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div style='float:right;padding-right:10px;margin-top:10px;'>
<a class='morer' expr:href='data:post.url'>Read More</a>
</div>
</b:if>
</b:if>

Just replace the red highlighted Read More with this tag <img src='link to the image'width='52px' height='25px'> .Paste in the url of the image and Save the Template and you'll have your problem solved.

  Note :
     If you found the jump link by searching for "Read More" then always use it to search jump link in your template and replace the codes I have given, with "Read More" in the code you found in the template instead of the codes I have highlighted in red,

2.How to Replace the Read More Link with a Button :

2.1 .Search for this tag in the Template </b:skin>.Paste the following code just above it.

.Ebpreadmore {
-moz-box-shadow:inset 0px 0px 0px 0px #ffffff;
-webkit-box-shadow:inset 0px 0px 0px 0px #ffffff;
box-shadow:inset 0px 0px 0px 0px #ffffff;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf) );
background:-moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf');
background-color:#ededed;
-webkit-border-top-left-radius:0px;
-moz-border-radius-topleft:0px;
border-top-left-radius:0px;
-webkit-border-top-right-radius:0px;
-moz-border-radius-topright:0px;
border-top-right-radius:0px;
-webkit-border-bottom-right-radius:0px;
-moz-border-radius-bottomright:0px;
border-bottom-right-radius:0px;
-webkit-border-bottom-left-radius:0px;
-moz-border-radius-bottomleft:0px;
border-bottom-left-radius:0px;
text-indent:-2px;
border:1px solid #dcdcdc;
display:inline-block;
color:#777777;
font-family:Arial;
font-size:15px;
font-weight:bold;
font-style:normal;
height:40px;
line-height:40px;
width:109px;
text-decoration:none;
text-align:center;
text-shadow:1px 1px 0px #ffffff;
}
.Ebpreadmore:hover {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #dfdfdf), color-stop(1, #ededed) );
background:-moz-linear-gradient( center top, #dfdfdf 5%, #ededed 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed');
background-color:#dfdfdf;
}.Ebpreadmore:active {
position:relative;
top:1px;

}

2.2 .Now search for this tag <div class='jump-link'>. Again the code will look something like the one given below

<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.3. Now replace the red highlighted code with the following tag.

<p class='Ebpreadmore'>Read More</p>

Customizations :
You can change the Width , Height and Background colour of the button by changing the the numbers and colours in pink in step 2.1.

Now Save Your Template and your read more link will be replaced by a Css button.

3.How To Change The Read More Link's Text :

3.1 .Assuming that you are still in the template edit section.Search for this tag <div class='jump-link'>. Again you will find the below 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>

3.2 .Change the red highlighted code with what ever text you want to appear in the read more link.

Save the template and your read more link's text will be updated.

4.How to Align Read More Link Left or Right : 

4.1 .Find the code mentioned in step 3.1

4.2 .Replace the code highlighted in red with the following one.

<p align='xxxx'>Read More</p>

Customization :
To make the Read More link appear left : Replace xxxx with Left
To make the Read More link appear right : Replace xxxx with Right
To make the Read More link appear in center : Replace xxxx with Center

Did It Worked ?
      That was all from the read more link.I guess I covered every bit of it but if still there is something that I forgot to mention or these codes aren't working for you then do leave a comment below and let me know what's wrong. Enjoy !!

Was the content worth a share?

• Facebook
• Twitter
• Google+
• Pinterest
• StumbleUpon
• Dig
• LinkedIn

Posted by Hamza Posted on 06:33 13 Opinions

Categories: Blog-Designing, How To - Blogging