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/AVvXsEj5D4eemrLUfP-bB6Hx6fXinf51w5oKyj3EezZNtxbFGZCxQgMp9DcSbfe2_TECIeZ1wLbb4CSEi66jrA2dIw2fAsZP-peqMzraEruW6HybNWRtqyKtOMHFD_g87sIbnFkv8_vXzz07GIOs/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/AVvXsEj5D4eemrLUfP-bB6Hx6fXinf51w5oKyj3EezZNtxbFGZCxQgMp9DcSbfe2_TECIeZ1wLbb4CSEi66jrA2dIw2fAsZP-peqMzraEruW6HybNWRtqyKtOMHFD_g87sIbnFkv8_vXzz07GIOs/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.
This will be useful whenever an advertiser wants to pay for a takeover ad. bookmarked it. Thx Jide
ReplyDeleteYes, this is exactly how to set up a takeover advert.
DeleteWill try it on my wordpress blog and will be glad if it works. Thanks for Sharing.
ReplyDeleteIt will...
DeleteNice write up , Let me try this
ReplyDeleteOK bro. Will be glad if you inform me of the outcome
DeleteI will experiment it. Recently all my blog images went blank, so I no longer uses images on my post. What could be the problem.
ReplyDeletewww.justhealthng.blogspot.com
so if you upload any image to your blog, it won't display?
DeleteJide, on your test blog, i observed that when you click on the navigation tabs, it pops open in a new page opening blogger.com and that's where the blog background image is linked to.
ReplyDeleteWow!! Thanks for the observation. I didn't notice that at all. Will work on it but this tweak works perfectly for wordpress blogs.
DeleteThis comment has been removed by the author.
Deletenice nice nice, I'll try this one on my blog, maybe that's why I'll put my blog logo, since all the logos I've been uploading refuse to work, thanks oga Jide.
ReplyDeletehow to hide files and folders on your Android
If I upload images, it will display. After a while it goes blank showing one triangle sign at the centre.
ReplyDeleteHi.. any solution for the blogger link problem?
ReplyDeleteThanks. Works Perfectly!!!
ReplyDeleteI tried this on my blogger blog but whole area (blog too) is clickable. :(
ReplyDeleteMy entire blog is now clickable using this code. It looks right but I can't click on the actual content anymore. Is there a way to ONLY make the background image clickable and not the entire blog?
ReplyDeleteJide, you still have not corrected the error of turning every clickable link into the supposed background image link. A correction will be of great help. Blogger blog concerned.
ReplyDeleteThanks Jide for the info. Initially when i tried using your own description,I also noticed the whole blog was click-able.Having observed that,i have corrected the css input thus : #blogbackground-link {
ReplyDeleteposition: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 0;
height: 5000em;
}
So readers,if you're experiencing similar issues on your blogger blogs,i suggest you edit the css code above and save. Simple! Check out mine here >>> www.gbelepawoonline.com
Your code still make the backround clickable. Please see how it is working at Www.ebnewsdaily.co.za. If you have a solution regarding this, Please do update.
Delete