Adding Read More rollover image to blogger

blogger have now help its user which are using a long posts to break into small parts where in the main page you can see a small portion of the post and clicking on the read more link you can see full post this can be easily done with help of inserting a small code

<-- more -->

or by clicking the page breaker

but once again the boring effect is that they will generate only the read more text links really weird. so to modify the this link you have to do some css hacks which will replace that text link with a rollover image

just simply paste this css snippet code in to you blogger css code as show in below image

here is the css code which you have to paste

.jump-link {
display:block;
width:150px;
height:50px;
background:url(http://hitesh1987.superfreehost.org/readmore.png)  no-repeat 0 0;
text-indent:-10000px;
}
.jump-link a {
display:block;
width:100%;
height:100%;
}
.jump-link a:hover {
background:url(http://hitesh1987.superfreehost.org/readmore.png) no-repeat 0 -50px;
}

i am using image which is transparent and png format and i am having a slight problem or bug using this image format in IE 6 version really IE sucks the transparency is not maintained in IE 6

here is the image which i have used

this is 150 x 100 res png format image

you can upload this image to your favorite image hosing site and replace the image url used in this code snippet with that url don’t forget that this a single image only in which rollover effect is gained with the help of css techniques 

if you want more different types of image than just make a comment i will make it for you