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/AVvXsEgZzrYFRT3Q5EN5iiH6dYI1r-QXKRmJgS5Nz0e3V9k1xHVj3aSECswVeD4BiLMIeDdej_UaobYdmXPkNaf0GjDI-NQpDyjncS3uR9CnJ25YSe9In5VLZf27n-PO4zn2k2ii0CYCUpyBPjY4/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/AVvXsEgZzrYFRT3Q5EN5iiH6dYI1r-QXKRmJgS5Nz0e3V9k1xHVj3aSECswVeD4BiLMIeDdej_UaobYdmXPkNaf0GjDI-NQpDyjncS3uR9CnJ25YSe9In5VLZf27n-PO4zn2k2ii0CYCUpyBPjY4/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.
No comments:
Post a Comment