Customise Read More Jumplink In Blogger|| Adding Image

Hello peeps, so today I’m sharing a tutorial on how to customise your Read More Jump Link, with an image.



How To Add Image

To add your own image instead of the Read more link, all you have to do is to go to – html – search for jump link (press command+f, search bar will appear type jump-link) and a code like this will appear,

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

Replace the code <data:post.jumpText/>   with  <img src=’DIRECT IMG URL’ />  so it looks 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’><img src=’DIRECT IMG URL’ /></a></div></b:if>

* ‘Direct Img Url’ = The URL of your image.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~


Add Hover Effect To The Image :


Now if you want a mouse hover effect over your read more image all you got to do is replace the original code with the following 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’><img src=”http://i59.tinypic.com/our6no.jpg” border=”0″ onmouseover=”this.src=’http://i59.tinypic.com/k3kt9x.jpg‘” onmouseout=”this.src=’http://i59.tinypic.com/our6no.jpg‘” /></a>
</div>
</b:if>

Change the highlighted image links with your choice of image links. Pink highlighted links are the original image link and the Yellow highlighted one is the hover effect image.

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Hope this was helpful 🙂 Don’t forget to share the link of your blog, if you are designing your own blog or have a beauty/lifestyle blog I would love too see.

Follow:
Share: