Turn “Read More” into an Image in Blogger

Now you are able to align your Jump Break in Blogger. No more customization available for Jump Break? You may never think of it or never seen in Blogger blogs. But many of Blogger users use an image instead of standard "Read More" link. There is no wonder or you don't need to use custom template to add this feature. You can turn your jump break link into an image in few easy steps. Let's figure out how to turn your jump break link into an image.

Steps:

1. Select an image you would like to use as a Jump Break and upload that image to an image hosting sites like Picasa, Flicker or your own web site which uploaded files can be accessible.

2. Copy URL of your uploaded image.

3. Go to Blogger Dashboard.

4. Click on your Blog Title.

5. Navigate to Template.

Note: Before editing your template, you may want to save a copy of it. Read How to Back Up Your Template.

6. Now click Edit HTML button.

7. Click Proceed button to view Template Editor.

8. Tick on Expand Widget Templates.

9. Find below code in your template.

]]></b:skin>

10. Now add following CSS style just before the line of code you have found in previous step.

.jump-link a img{

  border:0;

  float:left;

  margin:0px;}

Color Indication:

- This enables border for image. Set 1 to enable border, 0 for disable border around the image.

- This line enables you to change the alignment of the Jump Break by changing right side value of it. "Right" and "Left" are the possible values. Default set to 'left'.

- This line specify the gap between margin and your Jump Break Image.

11. Now search for code below in your template.

<data:post.jumpText/>

12. Replace the line of code you found in previous step with below line, after adding the URL of your image.

<img alt='Read More...' src='[Your Image URL]' title='Read More...'/>

Color Indication Information

- URL of Your Uploaded Image

13. Preview your blog and confirm the customization for Jump Break.

14. Save your template.

Enjoy :-)

Posted in: