Replace Blogger's Read More Link With An Image, Text Or Dynamic Button

If you are a Blogger user and use Jump Break in your posts, you must have noticed a "Read more >>" link below each of your blog post on the homepage. This tutorial will show you how to replace those text links with beautiful-looking dynamic buttons. This tutorial will also teach how you can align that link to the right, change it's text or even replace it with an image!

Replace the Read More link with a dynamic button:

1. Go to your blogger dashboard >> Template >> Edit HTML.

2. Find the following piece of code: (Press CTRL + F and copy the code in the box that appears)

 ]]></b:skin>

3. Copy the below code and paste directly above/before ]]></b:skin>

 @media \0screen{img{width:auto}}
div.techsperiareadmore
{font:.875em/150% arial;}
a:hover
{-webkit-opacity:1;-moz-opacity:1;opacity:1}
a.shortcode.button
{background:#333;text-transform:uppercase;color:#fff !important;font-size:10px;font-family:arial,sans-serif;text-decoration:none;opacity:.9;padding:4px 10px;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;-webkit-transition:background 200ms linear;-moz-transition:background 200ms linear;transition:background 200ms linear;-webkit-backface-visibility:hidden;margin:0 5px 5px 0;display:block;float:left}
a.shortcode.button:hover
{background:#000;text-decoration:none}
.shortcode.button:active{position:relative;top:1px}

Change the hash code highlighted in blue to change the background color of the button. Also, to change the background when the button is hovered, change the hash code highlighted in red.

4. Find the following piece of code:

 <div class='jump-link'>

On finding the above code, you will see something 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/></a></div>
</b:if>

5. Replace the code highlighted in blue with the below code:

 <div class='techsperiareadmore' style='float: right;'><a class='shortcode flat black button' expr:href='data:post.url' expr:title='data:post.title'>Read More</a></div>

The final code will look something like this:

 <b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<div class='techsperiareadmore' style='float: right;'><a class='shortcode flat black button' expr:href='data:post.url' expr:title='data:post.title'>Read More</a></div></div>
</b:if> 

6. Hit Save template and you're done! (You can replace Read More with any text you want)

Now, let's have some fun with those Read More links! Here are a few more tweaks that you can do with that link. Consider these tweaks as a gift or bonus from me (to you) for reading this post!

How to replace the Read More link with an image:

Replace the code highlighted in step 4 with the following code:

 <a style='float: right;' expr:href='data:post.url' expr:title='data:post.title'><img src="Your Image URL"/></a>

How to replace the Read More link with some other text:

Replace the code highlighted in step 4 with the following code:

 <a style='float: right;' expr:href='data:post.url' expr:title='data:post.title'>Whatever_Text_You_Like</a>

How to align the Read More link to the left, right or center:

Replace the code highlighted in step 4 with the following code:

 <a style='float: right;' expr:href='data:post.url' expr:title='data:post.title'>Read More</a>

Replace the code in blue with left, right or center (Any one)

There you go! I have now taught you every possible tweak you can do with those Read More links! Enjoy having fun with 'em!