Thursday, 26 June 2014

Make Background Image Of Your Blog Clickable With This CSS Tweak

receive our updates directly to your phone now SMS follow techrul to to starts Now!!!(MTN USERS ONLY and SMS is Free)

UPDATE 



+Kanyi Okeke alerted me via comments that once you implement it on a Blogger blog, it automatically links anything on the page to the link in the code above.I will find a solution to this and update this post asap.




Earlier today, +Temi Baby  asked me how to make the background image of her blog clickable and probably link to an external website, while also ensuring that the link opens in a new tab/window. Initially, I thought such won't be possible on a Blogger blog but after making some research, I realized it's possible and can be achieved with css.



You can see a demo at www.wizkid-download.blogspot.com. Clicking on the background image on desktop and mobile view of the blog takes you to blogger.com + it opens in a new window/tab without taking you away from the blog page.



So, let me assume you've already added a background image to your blog.



==> Log in to www.blogger.com, go to your blog dashboard, click "Templates" > "Edit HTML"



==> Click inside the HTML editor, press CTRL F on your keyboard to find < body



==> Directly under < body, paste the code below:



<a href="http://www.nairaforsms.com" id="blogbackground-link" target="_blank"> </a>



==> Replace www.nairaforsms.com with the link you want the background to open when clicked.



==> Click "Save Template".



==> Click inside the HTML editor again and use CTRL F to find ]]></b:skin>



==> Paste the css code below, directly above ]]></b:skin>




#blogbackground-link {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    z-index: 1;

    height: 4000px;

}



==> Click "Save Template".



View your blog, click on the background image and it should open your link in a new tab/window.



That's all.



Don't know how to add background image to your blog?



Paste the css code below, directly above ]]></b:skin>




body {

    background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZRfe9awv1CgJDCiKhekmJ397ztSxVo8WBWNaFM7JjsjuH4tEQKC14faAH0nYZpFhvIZ876Ea54pm6Wf3NXXSs2hE9MHHTjBdx3FwZA8yod1IGk30hegy9XJmKOTVJzA7f4XhDEjGCt2ax/s1600/Nairaforsms-300x250AD_optim.jpg');   

    background-position: top center;

    z-index: 1;

    background-attachment: scroll;

    background-repeat: repeat-y;

    background-color: grey;

}



Carefully replace the highlighted link; https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZRfe9awv1CgJDCiKhekmJ397ztSxVo8WBWNaFM7JjsjuH4tEQKC14faAH0nYZpFhvIZ876Ea54pm6Wf3NXXSs2hE9MHHTjBdx3FwZA8yod1IGk30hegy9XJmKOTVJzA7f4XhDEjGCt2ax/s1600/Nairaforsms-300x250AD_optim.jpg with the link to your background image.



That's all.



NB: If you are a WordPress user,  copy and paste the code below, directly below the <body tag.



<a href='http://www.nairaforsms.com' id='blogbackground-link' target='_blank'> </a>



Thereafter, you can paste the css code in your custom css file.



==> Replace nairaforsms.com with the link you want to use



I hope it works for you. Let me know via comments, if there are challenges.
receive our updates directly to your phone now SMS follow techrul to 40404 to starts Now!!!(SMS is Free)

SHARE THIS

Author:

0 comments: