Adding Background Image in Blogger "Read More" Link

adding image in readmore links
Recently, I made an updated version of adding "Read More" in blogger but that tutorial doesn't mention on how to replace the the "Read More" link with an image. In this tutorial we will add image on it in be half of the usual style of adding that widget in your blogger  without using any image. Please see first the live demo of what is that thing we are trying to achieve here.


Live Demo


Adding Background Image in Blogger "Read More"


Step 1. If you have not yet put the "Read More widget in blogger, please click it here for the tutorial.
Step 2. Now we will just make some changes on the code that you have you put in replacement of the code "<data:post.body>"  in step no. 7 in that previous tutorial.
The original code is:
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
</b:if>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>

<b:if cond='data:blog.pageType == "static_page"'><data:post.body/></b:if>

<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<div style='float:right;margin-right:10px;margin-top:5px;'>
<a expr:href='data:post.url'>Read More</a>
</div>
</b:if>
</b:if>


Step 3. Replace the orange bold texts above with code below:
<a expr:href='data:post.url'> <div class='readmore' style='float: right;'>
</div></a>
</b:if>
</b:if>

Step 4. To add the CSS code, look for the tag ]]></b:skin>  and just above it paste the code below:
.readmore {
background: url("Select image url below") no-repeat scroll 0% 0% transparent;
width: 120px;
height: 36px;
top: 88px;
left: -7px;
position: relative;
}

Customization:


  • You can change the background url (in red bold texts) with your own image url.
  • Adjust the margin of the image by increasing and decreasing the numerical value in top attribute (in orange color). High value will put the image on a higher position and lower value will put the image in lower position respectively.
  • Adjust the horizontal position of the image by customizing the numerical value (in light blue color). Higher value will place the image more in the right position while lowering the value will put it more in  the left position.
  • You can use  some of my images url below:

Image URL -  https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLyRCbRGDN86lO_UU_QHIvUljBsSRQ6kSksUfud08dTd281mpXY0PNTkGjwUyRahmyhg8O7BabVRViz6SqOxJ67zRRKsuk8qlcnMgwJ1rbun9dZa6qzme1icFgI09-chWFddcPujk6tzQ/130/readmore+background.jpg


Image URL - https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgglMOvX-ZUXfoZyO7lMXxCeISISpsYxiHQqlEUomiEVfIJatJPq-1YfKrlfd0Y7PZxzyD3Al4PfYHcgQGCO9nLy1qp-tsFkqemPdSEPDjENuGOLQjgGmTUW7o9PQjYdEKeJ8eLFMGw9Vk/1600/read+more+background451.jpg


Image URL - https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYG7Ctp-dcqgbuj0WzU4TV7CinI6oMp0f-6Ohcl3qA14CstMt2_YWJrF8gosEBwIKk0BoI1PkzT7go_X590jl278i2T_QDmXJ4Oo-YZsg7vWmE_tinraaZA2o_eSI7RRtaaxyVq06qfhI/1600/read+more+background1.jpg


Image URL - https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpRnjz6ZuzS64xHmNe_UjitM9oxKuN07oZrd3sUVdt1IjzJIqSkU71o0RyHgYLyvyYAImHq2V5GWEoIQWqsUFFMiUdyEXuTvQj-w-C-pqNs_nBuvECxTtMaaXN20lN2cL1iD2eXCNU7lo/1600/read+more+background3.jpg


Image URl - https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVtZTBocCX16rjSu7LUPALwZs60m1fr7Eo7jBY2pFVRXWy0PGt2hajHKox4tK8gR8cvviTXKhYFZ4MCSO3sUkhfvDXUloBHKkDzKkDkRjQ0X41k4j_i8AKqkzk1CtVpTYZDSh_WIiGYaY/1600/read+more+background+1a.png


Image URL - https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisqKnsADUnHvspHErOvS9q87c2VyskmGsMRHKxkuQAmGelu4LSfrAwvqZkj2VgVSmroah0FFCwONRQp3zlxjbpIA0ewhVf2xip388BKXr5KLbLJMEun-EgnEIgAA0FHJ3CPPmLQI0sMaE/1600/read+more+background10.jpg


Image URL - https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUu4I6kX92cxDjVFbm_JeQkb9vh_xFM7NC_BPrJJtOUEpXWfdbx0KaMFdQn9VblB3U4nkms0zR50qxD4NchRj_vawNKZWk-ybv585jvp9ui6RQG5btJbmOfbfdgDdc-CneDO56Qcsr7Uc/1600/read+more+background9.jpg

  • You can change the size of the above images by changing the red bold number. Higher value will increase the image size and lower value will also decreases the size of the image.

Step 5. Save your Template and Enjoy!
About the Author:
tilt  hover effect
Hello folks! This is GOLDEN WORKS TV, the admin of this blog. No words could described my grateful appreciations to all newbie and professional bloggers around the world and most especially to Almighty God who gave me the wisdom...Read More
Follow him @ Twitter |Facebook

No comments :

Post A Comment!

Post A Comment!
We love to hear your feedbacks and suggestions. We will try our best to reply to your queries as soon as time allows. Please keep in mind that all comments are moderated manually by our editors team to minimize spamming, and all the links are nofollow.

Note:
1. To add HTML code in the box, please use our HTML editor generator.
2. Please do not spam. Those type of comments will be deleted upon our review.
3. We should appreciate an individual and suggestive discussion.

Best Regards,

GOLDEN WORKS TV

Related Posts Plugin for WordPress, Blogger...