ADD THIS STYLISH SIMPLE CSS AD BANNER ON YOUR BLOG

Views

One of a good thing about blogging is having an opportunity to earn money  thru advertising. Creating an impressive banner ads makes a good impression to your future advertisers. Perhaps you already see this kind of CSS banner that has a beautiful hover feature.This banner has a size of 125x125 pixels and has a multiple background hover color, You can always change the background color of any combination you want.  So, lets start and install this very easily on your blog.

• 

• go to your Blogger Dashboard
• Layout
• Add a gadget
• Choose HTML/JAVASCRIPT
• And paste this code

<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:#0022FF !important;">
<a href=”URL ADVERTISERS PAGE”>
<img height="120" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsUC9asjBmHUJk5kJAK1B2SkbqBD4U-f_dPw-C0pmtrqcSgZB8koJMlSqIBGFoW9YSBKDgwtkdg5s3yYFRQWZF0Up8Gmb0NVx6HHXGo-nsADfDr4zDzPMaodfcaavzP-3i-xAZ1pAkZyU/s1600/29.jpg" width="120" /></a></li><li style="background:#FF0D00 !important;">
<a href=”URL ADVERTISERS PAGE”>
<img height="120" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsUC9asjBmHUJk5kJAK1B2SkbqBD4U-f_dPw-C0pmtrqcSgZB8koJMlSqIBGFoW9YSBKDgwtkdg5s3yYFRQWZF0Up8Gmb0NVx6HHXGo-nsADfDr4zDzPMaodfcaavzP-3i-xAZ1pAkZyU/s1600/29.jpg" width="120" /></a></li><li style="background:#00FF04 !important;">
<a href="URL ADVERTISERS PAGE">
<img height="120" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsUC9asjBmHUJk5kJAK1B2SkbqBD4U-f_dPw-C0pmtrqcSgZB8koJMlSqIBGFoW9YSBKDgwtkdg5s3yYFRQWZF0Up8Gmb0NVx6HHXGo-nsADfDr4zDzPMaodfcaavzP-3i-xAZ1pAkZyU/s1600/29.jpg" width="120" /></a></li><li style="background:#FF00FF !important;">
<a href="URL ADVERTISERS PAGE">
<img height="120" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsUC9asjBmHUJk5kJAK1B2SkbqBD4U-f_dPw-C0pmtrqcSgZB8koJMlSqIBGFoW9YSBKDgwtkdg5s3yYFRQWZF0Up8Gmb0NVx6HHXGo-nsADfDr4zDzPMaodfcaavzP-3i-xAZ1pAkZyU/s1600/29.jpg" width="120" /></a></li>
</ul>
</div>

• URL ADVERTISERS PAGE  change this with your own URL
• https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsUC9asjBmHUJk5kJAK1B2SkbqBD4U-f_dPw-C0pmtrqcSgZB8koJMlSqIBGFoW9YSBKDgwtkdg5s3yYFRQWZF0Up8Gmb0NVx6HHXGo-nsADfDr4zDzPMaodfcaavzP-3i-xAZ1pAkZyU/s1600/29.jpg  If you want to put your own image change this.
• 0022FF , FF0D00, 00FF04, FF00FF Change this with your own desired hover color.

And see it perfectly working on your blog.

If you have any difficulties implementing and/or following this tutorial, Feel free to keep in touch with me and ill try my best to work it out.