How to Add Simple CSS3 Powered Ad Banner

One of the things that makes Blogger such a great blogging platform is the facility to add advertising to your Blogger blog and make money from it. In this article I will be discussing "How to Add Simple CSS3 Powered Ad Banner" on your Blogger blog and make money from ad banners.

These ad banners catches everyone's attention on them and visitors/advertisers make click through. Now lets get started and see how to add this cool sticky bar to blogger blog.

Live Demo

How to Add Simple CSS3 Powered Ad Banner With 1 Click

• Go to Blogger Dashboard
• Click On Image Below
• Click On Add Widget

<style type="text/css"> /*<![CDATA[*/ .squarebanner ul{list-style-type:none;margin: 0px auto;padding: 10px 0px 0px 0px;width:300px;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 rgba(0,0,0,0.5);-moz-box-shadow:0 0 8px rgba(0,0,0,0.5);box-shadow:0 0 8px rgba(0,0,0,0.5);padding:3px;} /*]]>*/ </style> <a href="http://www.blogsdaddy.com" title="Free Blogger Widgets" ><img src="http://img1.blogblog.com/img/blank.gif" /></a> <div class="squarebanner "> <ul> <li style="background: blue !important;"><a href="URL"><img height="120" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWAptSItWr6HzwltXdX4S00K9jHd5ATcTkcV6YmKXS2JTfYgKY8eo2Q46C4eTruHQkbl0fT3vU_hX2Cmt7NhvIXQ4_K_GK1Opp1slp3t9L3vwM3ldzKGVCF8qMaKxwYIldiFRuEjmZFsU/s1600/29.jpg" width="120" /></a></li> </ul> </div>

How to Add Simple CSS3 Powered Ad Banner Manually 

• Now Go to Blogger Dashboard > Layout
• Then Select Add a Gadget > HTML/JavaScript

<style>
.squarebanner ul{list-style-type:none;margin: 0px auto;padding: 10px 0px 0px 0px;width:300px;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 rgba(0,0,0,0.5);-moz-box-shadow:0 0 8px rgba(0,0,0,0.5);box-shadow:0 0 8px rgba(0,0,0,0.5);padding:3px;}
</style>
<div class="squarebanner ">
<ul>
<li style="background: blue !important;">
<a href="URL">
<img height="120" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWAptSItWr6HzwltXdX4S00K9jHd5ATcTkcV6YmKXS2JTfYgKY8eo2Q46C4eTruHQkbl0fT3vU_hX2Cmt7NhvIXQ4_K_GK1Opp1slp3t9L3vwM3ldzKGVCF8qMaKxwYIldiFRuEjmZFsU/s1600/29.jpg" width="120" /></a></li>
</ul>
</div>

• Copy and Paste Above Code Into That Gadget and Click On Save
• It's Done, Visit Your Blog & Enjoy Blogging

Note - Make sure you change the URL with your own and If you want to change banner image simply change new banner URL with blue color Image URL.