Add CSS Hover Effect Advertise Banner in Blogger

1. Go to your Blogger Dashboard.
2. Click on Layout.
3. Click on Add Gadget and Select HTML/JAVASCRIPT.
4. Copy the below codes and Paste it on your Gadget then Save it. <style> .smriti-banner ul{list-style-type:none;margin: 0px auto;padding: 10px 0px 0px 0px;width:300px;overflow:hidden;} .smriti-banner 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%;} .smriti-banner 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%;} .smriti-banner 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%;} .smriti-banner 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> <br /> <div class="smriti-banner "> <ul> <li style="background: #FF9900 !important;"> <a advertisers="" href="https://draft.blogger.com/%E2%80%9Durl" page=""> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbKpeYmOGsqCXov3HXQmnxa5o1E-Xy8Jrrcg-pLYlwZUEOeWWfeaX1c8skSqzszqakx5xzlZBL_ReqTkftoccddmfPrbOI4_EycCiAaSO7DJ8nlhMpGX0VTs-GkwCAtKY4txR7jStfBy7E/s1600/advertise_here.png" height="120" width="120" /></a></li> <li style="background: #FF0D00 !important;"> <a advertisers="" href="https://draft.blogger.com/%E2%80%9Durl" page=""> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbKpeYmOGsqCXov3HXQmnxa5o1E-Xy8Jrrcg-pLYlwZUEOeWWfeaX1c8skSqzszqakx5xzlZBL_ReqTkftoccddmfPrbOI4_EycCiAaSO7DJ8nlhMpGX0VTs-GkwCAtKY4txR7jStfBy7E/s1600/advertise_here.png" height="120" width="120" /></a></li> <li style="background: #00FF04 !important;"> <a href="https://draft.blogger.com/URL%20ADVERTISERS%20PAGE"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbKpeYmOGsqCXov3HXQmnxa5o1E-Xy8Jrrcg-pLYlwZUEOeWWfeaX1c8skSqzszqakx5xzlZBL_ReqTkftoccddmfPrbOI4_EycCiAaSO7DJ8nlhMpGX0VTs-GkwCAtKY4txR7jStfBy7E/s1600/advertise_here.png" height="120" width="120" /></a></li> <li style="background: #FF00FF !important;"> <a href="https://draft.blogger.com/URL%20ADVERTISERS%20PAGE"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbKpeYmOGsqCXov3HXQmnxa5o1E-Xy8Jrrcg-pLYlwZUEOeWWfeaX1c8skSqzszqakx5xzlZBL_ReqTkftoccddmfPrbOI4_EycCiAaSO7DJ8nlhMpGX0VTs-GkwCAtKY4txR7jStfBy7E/s1600/advertise_here.png" height="120" width="120" /></a></li> </ul> </div>
   
5. Check on your Blog and Enjoy...

#Add CSS Hover Effect Advertise Banner in Blogger