Let readers select your background image widget

B Share In the previous post you saw an example in which you can let readers to change the background color. This post is an extension of the above post & solution to baben's(blog mate) query which empowers your readers to change background image of your blog with the click. You can add this widget to your blog by making certain minor modifications to the code. Best use of this could be to change the background image of the footer which can be doen with few modifications Lets first see an example


Click below image to change background image

<div style="text-align:center;"> Do not like the bottom of the blog? </div><br /> Change it for another! <br /> <center><a href="javascript:void(0)" onclick="javascript:document.body.style.backgroundImage='url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgweoBCBuM2h0mtxrjCHz9B4DadMDzaAnmrso7MDOitgCOqm09TLZI4qnuQ7vxDbyAo2eVvM-OpXx4FRzUoZeo44uDnlCGdi0FMaOu3q0y6SY0i-wRveVVDx-Q4Lc5qhGpXX9nhOxYkiAqE/s400/orange.png)'; document.body.style.backgroundColor='none';"><img style="width:40px;height:40px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlF8E-PZ28b0PzM80cDA4sTHVfGahPsU0Kly5IRzXICvMZJF2sni6H8oSE5IjIMEIuM-43aazjzpTPTmMgYcqxMQk5bdyBrpxqS0BPu4BrK4QjZoASQlY-JXFTcEdY_RS2XzPzLYagtnTK/s200/body-orange.jpg" /></a> <center> <a href = "javascript: void (0)" onclick = "javascript: document.body.style.backgroundImage = 'url (http://3.bp.blogspot.com/_dsEG33PDaHw/S4A1JuFysnI/AAAAAAAAAKM/AJ1kNfl4Q44 / s400/orange.png) '; document.body.style.backgroundColor =' none';">< img style = "width: 40px; height: 40px;" src = "http://4.bp.blogspot. com/_dsEG33PDaHw/S4A2tyL2oXI/AAAAAAAAAK0/9NsvM2bvs-Y/s200/body-orange.jpg "/> </ a> <a href="javascript:void(0)" onclick="javascript:document.body.style.backgroundImage='url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJ71qgvBANVR-gsQJ2z1HzepSF6FP45tVOgUMxrrpEpVLCVtcX0vAvfDSKE2Yy_ZcJ2LPQpidxYP7ZssrV-tRMX4idS3xRhpG297uIcE8gRn9OVeKuvLGnraUnYIxAx-EPxDP1Ehyphenhyphen3y4ii/s400/luxury-lining.gif)'; document.body.style.backgroundColor='none';"><img style="width:40px;height:40px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5ldV5R1pLhSC4eKwHMDGmlAGaQD3R2GrNcZVoKd0CAycWksO3qsBz3x5OTrNIZlVkO14zwOAydNUwsP3pxmrWNoP_ps_LVevBS8c6IhH7Fus6qy9zZ1bvoeHCO1GG3mX8D5WKnRqHQfb-/s200/body-luxury.jpg" /></a> <a href = "javascript: void (0)" onclick = "javascript: document.body.style.backgroundImage = 'url (https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJ71qgvBANVR-gsQJ2z1HzepSF6FP45tVOgUMxrrpEpVLCVtcX0vAvfDSKE2Yy_ZcJ2LPQpidxYP7ZssrV-tRMX4idS3xRhpG297uIcE8gRn9OVeKuvLGnraUnYIxAx-EPxDP1Ehyphenhyphen3y4ii/s400/ luxury-lining.gif) '; document.body.style.backgroundColor =' none';">< img style = "width: 40px; height: 40px;" src = "http://2.bp.blogspot.com / _dsEG33PDaHw/S4A2ttOlZCI/AAAAAAAAAKs/UVjrJY9cDC0/s200/body-luxury.jpg "/> </ a> <a href="javascript:void(0)" onclick="javascript:document.body.style.backgroundImage='url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFz4OcWGTLj7XCMRCVpdSohf1WcK6ERrpvM7j7OCTgLPxYi_5m5CTWlhVK7gUJ-IMXNoJ1PAloZNcHZEXMikVNe8sms9h1qZxL9c-XYjoOuVXCH2WKP2RIljobqePN8pLGQaSIs-PpIaR3/s400/intertwined.gif)'; document.body.style.backgroundColor='none';"><img style="width:40px;height:40px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYVIIRDYb1oMsra38Y0pgRrn7o0XkQeecHL_juL7GqGfxyz-aKv3G2BW702FFGhpSMilUOktG5cRhFakLr6uJ9mtA0BQTa6heDOIKuyJC-QYktWj7f4CP2aV3InRLOdHk9Mp_4GH2I7VOF/s200/body-intertwined.jpg" /></a> <a href = "javascript: void (0)" onclick = "javascript: document.body.style.backgroundImage = 'url (https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFz4OcWGTLj7XCMRCVpdSohf1WcK6ERrpvM7j7OCTgLPxYi_5m5CTWlhVK7gUJ-IMXNoJ1PAloZNcHZEXMikVNe8sms9h1qZxL9c-XYjoOuVXCH2WKP2RIljobqePN8pLGQaSIs-PpIaR3/s400/ intertwined.gif) '; document.body.style.backgroundColor =' none';">< img style = "width: 40px; height: 40px;" src = "http://2.bp.blogspot.com/_dsEG33PDaHw / S4A2tQlatBI/AAAAAAAAAKk/-hYbABUFnEY/s200/body-intertwined.jpg "/> </ a> <a href="javascript:void(0)" onclick="javascript:document.body.style.backgroundImage='url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvRLXhvAYZKvnpa0Zg_78hbQtjFuAN5Fnp61W2Xoo65h7TtG_OFBswshr59l0_4TefpP5s5hgpVSYaDxQUOs2-p2aZ4C-jDEfHvMhg8XX98IY37jN8g2rpAZuByw7V2iC9zps94Qjd_lPt/s1600/dead-revolutionaries.gif)'; document.body.style.backgroundColor='none';"><img style="width:40px;height:40px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiK4YgwCSR4v5amN8fvqS4EnOQlsXgJBgl_VUNrNuJ5a391ApIepAqUO9iZh1pPd0Wg45md8ZEboKnNkvx0PYe-UPZnv1cXGzTFY3VLdnkm0wd6R0UuNy9itVB24C5iwJTkNK0rAauPkMXa/s200/body-deadrevo.jpg" /></a> <a href = "javascript: void (0)" onclick = "javascript: document.body.style.backgroundImage = 'url (https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvRLXhvAYZKvnpa0Zg_78hbQtjFuAN5Fnp61W2Xoo65h7TtG_OFBswshr59l0_4TefpP5s5hgpVSYaDxQUOs2-p2aZ4C-jDEfHvMhg8XX98IY37jN8g2rpAZuByw7V2iC9zps94Qjd_lPt/ s1600/dead-revolutionaries.gif) '; document.body.style.backgroundColor =' none';">< img style = "width: 40px; height: 40px;" src = "http://1.bp.blogspot .com/_dsEG33PDaHw/S4A2s33LNFI/AAAAAAAAAKU/zy1HfovQTDQ/s200/body-deadrevo.jpg "/> </a> <a href="javascript:void(0)" onclick="javascript:document.body.style.backgroundImage='url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLPfiQfo8-au2RMEMhO1_cT9avSXXB3gSNYMaco5B3AkXyBXsMYi7XbPdE1nHzjDmDYyV6d87z9nA36xlSBYwVOmQXefd86U1EeMZ3qoDvATgO8yUcCLb8i09WyaH59jBt1Jsxf_h9GSeZ/s400/horton.gif)'; document.body.style.backgroundColor='none';"><img style="width:40px;height:40px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCogkBxj4CjMsj3ZhsQjn-zbGMCrHMYcZQ1AHGVy89sDPyKMgH8ApkvMcZ2SOEattSttqeqH02laCCPd9qOM4NlXenOFEKiSwsGNmGcAW41Emay65CoFfeBtiNI-VvB7fdrEuRx96ma5j6/s200/body-horton.jpg" /></a> <a href = "javascript: void (0)" onclick = "javascript: document.body.style.backgroundImage = 'url (https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLPfiQfo8-au2RMEMhO1_cT9avSXXB3gSNYMaco5B3AkXyBXsMYi7XbPdE1nHzjDmDYyV6d87z9nA36xlSBYwVOmQXefd86U1EeMZ3qoDvATgO8yUcCLb8i09WyaH59jBt1Jsxf_h9GSeZ/ s400/horton.gif) '; document.body.style.backgroundColor =' none';">< img style = "width: 40px; height: 40px;" src = "http://1.bp.blogspot.com / _dsEG33PDaHw/S4A2tLdeyTI/AAAAAAAAAKc/A73MVxDHcUo/s200/body-horton.jpg "/> </ a> </center> </ center><a href="http://myfundoo-blog.blogspot.com/2010/02/let-readers-select-your-background.html"><span style="font-size: xx-small;">Background image widget</span></a>

You can add background images or change this sample, only replace the URL of the image (it is twice) for yours.

  < img style = "width: 40px; height: 40px;" src = "image URL" />  

The URL of the image sets twice where indicated, the first is to be applied as wallpaper and the second is an example for the reader to click.

If you enjoyed this post and wish to be informed whenever a new post is published, then make sure you subscribe to our regular Email Updates!

Kindly Bookmark this Post using your favorite Bookmarking service: