How To Add Colorful Css Animations To BuySellAds Banners

I’m sure you will all have noticed the effect i have added to the BuySellAds.Com ad banners on this blog.I think the effect is awesome and brings more attention to the ads which keep our advertisers happy.The first time i seen this type of effect was on the awesome Css Tricks by Chris Coyier.With the help Of Harish from Custom Blogger Templates and Way2Blogging i managed to get a version for this blog.I have had many requests for the code in the past but as the idea was originally from Chris i was slow to share it.However as Css Tricks no longer use the effect and i have seen it used on lots of other blogs which i presumed viewed the source of this blog to copy the code I think it’s the right time to do a tutorial.The effect is created using only Css.

Remember this is set up to work only with ads and Advertise Here banners from BuySellAds.Com.For the 125×125 banners your sidebar will need to be at least 300px wide.Wordpress and other users can add the Css from the scroll box below to their style sheet , below i have a Blogger tutorial.

Add Colorful Animated Css Effects To BuySellAds Banners On Blogger

Remember Always Back Up Your Template Before You Make Changes – How To Back Up A Blogger Template

Step 1. – In Your (New Design) Blogger Dashboard Click The Drop Down Menu For Your Blog > Choose Customize > Advanced > Add Css, as shown in the video below.

Step 2. Copy and Paste the following code into the Css Section then click Apply To Blog.

This is a scroll box make sure to get all the code.

<!-- Start BSA Css http://www.spiceupyourblog.com -->
.bsap a{text-shadow:1px 1px 1px #111 !important;color:#eee !important;padding:7px !important;margin:0 10px 10px 0px !important;overflow: visible !important;-webkit-transition:all 0.2s ease;-moz-transition:all 0.2s ease;-o-transition:all 0.2s ease;border: 0 none !important;-webkit-border-top-left-radius:80px;-webkit-border-bottom-right-radius:80px;-moz-border-radius-topleft:80px;-moz-border-radius-bottomright:80px;border-top-left-radius:80px;border-bottom-right-radius:80px;}
.bsap a:hover{-webkit-border-top-left-radius:40px;-webkit-border-bottom-right-radius:40px;-moz-border-radius-topleft:40px;-moz-border-radius-bottomright:40px;border-top-left-radius:40px;border-bottom-right-radius:40px;}
.bsap a img{border: 0 none !important;-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 !important;}
.bsap .even{margin-right:0 !important;}
.bsap .ad1{background:#e42b2b !important}
.bsap .ad2{background:#ff8400 !important}
.bsap .ad3{background:#a800ff !important}
.bsap .ad4{background:#49a7f3 !important}
.bsap .ad5{background:#41d05f !important}
.bsap .ad6{background:#B24700 !important}
.bsap .ad7{background:#FFE500 !important}
.bsap .ad8{background:#007D47 !important}
.bsap .ad9{background:#330000 !important}
.bsap .ad10{background:#990000 !important}
.bsap .ad11{background:#f70000 !important}
.bsap .ad12{background:#80FEC8 !important}
<!-- End BSA Css http://www.spiceupyourblog.com -->

That’s it check out your BSA ad zones with the cool effect., make sure to check out more of our Css tutorials.