Turn Jump Break into an Image in Blogger

As you wanna improve your homepage and not to make it heavy, you may use jump breaks in your posts, so full post or article doesn't appear on homepage. Else users may need to wait some time until your homepage get loaded and have to scroll long way down if you've got somewhat lengthy posts. We have already discussed about jump break links and learnt how to customize the alignment of jump break earlier via How to Align Jump Break in Blogger post. As I needed to add needed to do customizations with it, I have managed to convert jump link which is a hyperlink into an image at last. Wanna know how?

If you are using jump breaks on your posts, you may like to give it more color to be match with your blog design as you prefer. Converting jump break link to a image is not a big deal or it doesn't increase pageviews for your content. But it's all about designing of your blog. You can add more color to your blog and let your readers find it very interesting by using a meaningful image instead of standard jump break hyperlink. If you wanna convert your jump break into an image, proceed with steps below.

Steps:

1. Select an image you would like to use instead of jump break hyperlink.

2. Upload that image to an image hosting sites like Picasa, Flicker or on preferable hosting site where you can access it easily.

3. Copy URL of your uploaded image.

4. Go to Blogger Dashboard.

5. Click on your Blog Title.

6. Navigate to Template.

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

7. Now click Edit HTML button.

8. Find below code in your template.

]]></b:skin>

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

.jump-link a img{

border:0 !important;

float:left !important;

margin:0px !important;}

Color Indication Information

   - 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 link by changing right side value of it. Right and Left are the possible values.

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

10. Now search for code below in your template.

<data:post.jumpText/>

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

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

13. Save your template.

Enjoy :-)