How To Change Read More Link With Image In Blogger

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!

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!

1.Click 'Design' > 'Edit html' for your blog.
(Tick the 'Expand widget templates' box)
2.Find this Code :
<data:post.jumpText/>

How to Replace the Read More link with an Image:

Replace the code highlighted in step 2 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 2 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 2 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!

Advertise Here Free