Advertise Here Banner for Blogger Using CSS3


Best Commentator: Apple iPhone 7 Plus (256 GB) WINNER: Michalina Logan
To claim your prize, please send us an email.


advertise here banner for Blogger
some Blogger beginners don't know about how to make money online. Also Google Adsense never give ads for blogs which is not old more than 6 months. So its not easy. Then how to make money online with your blog? Advertise here banners is a great way to make money from your blog and you can add a stylish CSS3 Ads Here banner with hover effect to your blog.



zoom icon png Benefits of Advertise Here banner
There have many Advertisers in the online market who want to applay their ads on the high traffic blogs and Websites. You should try to add some Ad slot for the advertisers and you can earn a good amount of money by just selling some ad space if your blog is getting high amount of traffic (organic Traffic).

demo icon png Wanna see a demo banner
Before we get into the trick, please take a click on the demo button shown below ▼ to get an idea of what we are going to make here. 


online demo button for ads here banner

 How to add Advertise Here your blogger blog
You can see the demo of this advertise here banner widgets. Its made with CSS3 and you never wanna add seperate css code in your blogger template. Its all in one code. Which means just Copy below code and paste on your Blogger gadget. Let me explain in detail.

  • Go to Blogger Dashboard >Layout
  • Click on Add a Gadget
  • Copy and paste the below code ▼ in it

<style>
.squarebanner ul{list-style-type:none;margin: 0px auto;padding: 10px 0px 0px 0px;overflow:hidden;}.squarebanner ul li{list-style-type:none;margin: 0px 1px 0px 3px;float:left;display:inline;background:orange;-webkit-transition:all 0.2s ease;-moz-transition:all 0.2s ease;-o-transition:all 0.2s ease;border-radius:100%;-webkit-border-radius:100%;-moz-border-radius:100%;-o-border-radius:100%;}.squarebanner ul li:hover {-webkit-transition:all 0.3s ease;-moz-transition:all 0.3s ease;-o-transition:all 0.3s ease;-o-border-radius:15%;-webkit-border-radius:15%;-moz-border-radius:15%;border-radius:15%;}.squarebanner ul li:active {-webkit-transition:all 0.2s ease;-moz-transition:all 0.2s ease;-o-transition:all 0.2s ease;-o-border-radius:50%;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;}.squarebanner ul li a img{-webkit-box-shadow:0 0 8px rgbaundefined0,0,0,0.5);-moz-box-shadow:0 0 8px rgbaundefined0,0,0,0.5);box-shadow:0 0 8px rgbaundefined0,0,0,0.5);padding:3px;}
</style>  
<div class="squarebanner ">
<ul>
<li style="background: blue !important;">
<a href="http://labstrikes.blogspot.in/p/contact.html">
<img src="http://4.bp.blogspot.com/-B85RYMTw264/UCXwRP5yAYI/AAAAAAAABWk/1YCYLYojmI8/s1600/Your-advertise-here.png" /></a></li>
</ul>
</div>

customization icon png Please do the following customization
Before you saving your gadget do this changes in above ▲ highlighted lines. The changes are following. So read it carefully.


Click Save button and you're done. Please share and comment if you like. Happy blogging:)