How To Make Your Website/Blog Background Photo Clickable?

Tuesday, September 12, 2017
Share:
Making your background clickable is a convenient way to use any available space on your website/blog interface.

You can use the background space for putting adverts, collecting emails, and notifying readers of something new on your site. It’s like the Billboard of your website. Here is what you will need to do.
    Adding a Clickable Background photo in your Blogger
  1. You will need to upload your background image by going to Theme > Customize>Background then upload your preferred picture.

  1. You will need to add the following link just below your first <body> HTML code.
<a class='takeover' href='https://twitter.com/MikeTsire' target='_blank'/>


<div class='container'>


</div>
  • Change the link to the page you want to redirect to when readers click the background.
  • Put the following CSS code to make only the preferred section on your background clickable and not every space. To put CMS on a Blogger site you can use two steps. (a), go to your HTML code and search(by using Ctrl+F) and paste ]]></b:skin> and paste the code just ABOVE it. (b), by going to Theme>Customize>Advance>Add CCS.
.takeover { 


    position: absolute; 


    display: block; 


    width: 100%; 


    height: 100%;


    z-index: 1; 


    cursor: pointer;


}


.container { 


    position: relative; 


    z-index: 999; 


}
  • Paste and Save the code above then Save. Your background will be clickable and will redirect to your preferred site when clicked.
  • If the whole section of the background become clickable, you will have to switch your width and height percentage and manipulate them to fit your website height and width.

On this blog, only 20% of the height and 20% of the width were used for this blog)













Labels:











Share: