Thursday, September 24, 2020
Home Blogging Tips & Tweaks Advertisement Space Banner For Blogger and Website

Advertisement Space Banner For Blogger and Website

Gone are the days when blogging used to be just a hobby. People have now realized how important and lucrative it is to own a blog which has a very wide readership. Every now and then, you see bloggers asking questions like “How do I make money from my blog”? Usually what they get as answer to their question is to apply for Google Adsense or its alternatives but unfortunately, Google has a very strict rule pertaining to how they accept publishers. This sometimes makes one look elsewhere for other options which can benefit them monetarily.

The truth is that you will not make much from Google Adsense and its alternatives if you don’t have massive stream of traffic to your blog. So for this reason, I think the best alternative for you is to sell space on your blog page to advertisers who will willingly pay you for that space if they find your blog’s contents interesting and useful for their business. Now creating a space in your blog for advertisers to advertise on can be done in so many ways but if you want advertisers to be attracted to the space, then you will have to create a very eye catching banner which should definitely draw their attention.

For today’s post, we shall be looking at how we can create a perfect advert space sale on your blog page which will have a hover effect. This type of banner is good for your blog because it won’t in any way have an impact on your page load speed since it is made purely of CSS. So to add it to you Blogger blog or website, simply follow the procedure below

Adding to Blogger:

  • Login to your Blogger Dashboard.
  • Navigate to Layout >>> Add a Gadget.
  • Scroll down the pop up page and select HTML/JavaScript.
  • Now copy the code below and paste inside the HTML/JavaScript box.
<style>

#text{-moz-transform:rotate(-5deg);-o-transform:rotate(-5deg);-webkit-transform:rotate(-5deg);color:#FFF!important;font-family:arial;font-size:60px;font-weight:300;letter-spacing:-5.5px;line-height:45px;text-align:center;margin:20px 10px}

#text a{color:#333;text-shadow:1px 1px #000, 3px 3px #EEEEEE, 5px 5px #DDDDDD, 7px 7px #AAAAAA, -1px -1px #000;text-transform:lowercase;-moz-transition:all .3s ease-in 0;-webkit-transition:all .3s ease-in 0;-o-transition:all .3s ease-in 0;-kmoz-transition:all .3s ease-in 0}

#text a:hover{-moz-transition:all .3s ease-in 0;-webkit-transition:all .3s ease-in 0;-o-transition:all .3s ease-in 0;-kmoz-transition:all .3s ease-in 0;text-shadow:1px 1px #000, 3px 3px #EEEEEE, 5px 5px #DDDDDD, 7px 100px transparent, -1px -100px transparent;color:transparent}

inf{color:#d2a}

#text a:focus,#text a:active{color:#eee!important;-moz-transition:all 0 ease-in-out!important;-o-transition:all 0 ease-in-out!important;-kmoz-transition:all 0 ease-in-out!important;-webkit-transition:all 0 ease-in-out!important}

</style>

<div id="text" class="rent"><a href="REDIRECT_URL" target="blank"><blink>&#8669;</blink>Free Advert space.<br />Click to<inf> contact Admin</inf><blink>&#8668;</blink></a></div>
  • Now change/replace the REDIRECT_URL with the URL of the page you wish the advertisers to be redirected to (your blog’s contact page will do if you don’t have a page specially designed for this purpose).
  • Finally click on Save to add the widget to your blog page.

Adding to a Website:

To add this banner to your website,

  • Open the HTML file of the page you want to add it to using a HTML editor.
  • Add the below CSS code just below <head> tag.
<style>

#text{-moz-transform:rotate(-5deg);-o-transform:rotate(-5deg);-webkit-transform:rotate(-5deg);color:#FFF!important;font-family:arial;font-size:60px;font-weight:300;letter-spacing:-5.5px;line-height:45px;text-align:center;margin:20px 10px}

#text a{color:#333;text-shadow:1px 1px #000, 3px 3px #EEEEEE, 5px 5px #DDDDDD, 7px 7px #AAAAAA, -1px -1px #000;text-transform:lowercase;-moz-transition:all .3s ease-in 0;-webkit-transition:all .3s ease-in 0;-o-transition:all .3s ease-in 0;-kmoz-transition:all .3s ease-in 0}

#text a:hover{-moz-transition:all .3s ease-in 0;-webkit-transition:all .3s ease-in 0;-o-transition:all .3s ease-in 0;-kmoz-transition:all .3s ease-in 0;text-shadow:1px 1px #000, 3px 3px #EEEEEE, 5px 5px #DDDDDD, 7px 100px transparent, -1px -100px transparent;color:transparent}

inf{color:#d2a}

#text a:focus,#text a:active{color:#eee!important;-moz-transition:all 0 ease-in-out!important;-o-transition:all 0 ease-in-out!important;-kmoz-transition:all 0 ease-in-out!important;-webkit-transition:all 0 ease-in-out!important}

</style>
  • Now search for the <body> tag and add the below code anywhere you want the banner to appear (make sure the code is in between <body> and </body> tag).
<div id="text" class="rent"><a href="REDIRECT_URL" target="blank"><blink>&#8669;</blink>Free Advert space.<br />Click to<inf> contact Admin</inf><blink>&#8668;</blink></a></div>
  • Replace REDIRECT_URL with URL you want the advertisers to be redirected to.

Having any trouble or question? Just let me know. Enjoy!

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular

List of All JavaScript Arithmetic Operators With Examples

JavaScript offers several operators to help us work with numbers. All these operators are binary operators, which means they operate on two operands. The operands...

How to Find a Website’s RSS Feed’s URL

Having access to the RSS feed of a website gives you the opportunity to stay up-to-date on everything that website publishes. Whether that’s a...

Laravel: String data, right truncated: 1406 Data too long for column (SOLVED)

I was working on a project today when i ran into the error message "String data, right truncated: 1406 Data too long for column...

How to Enable or Disable Chrome’s Autofill on Android Devices

Storing your login details and other information in Chrome and/or your Google Account isn’t as secure as using an encrypted password manager, but it’s...

Recent Comments