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 125x125 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 -->
.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 -->

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

Drop Your Comments And Questions Below.

If You Enjoyed This Post Please Take 5 Seconds To Share It.

Stay Connected With Free Updates

Subscribe via Email


  1. CSS3 are eventually gonna replace the need for Javascript on a website. Thanks for sharing this great tip.

  2. Thanks for sharing, CSS3 is really amazing

  3. Can we add this to custom ads (I don't have BSA)

    1. I have a tutorial ready for that, will be published soon..

  4. thank you master..... how can we add that comment box on every post as yours

  5. Can we add this to custom ads tutorial please..

  6. please provide tutorial for custom ads

  7. nice...just implemented on my blog...thanks for sharing

  8. I add it to my blog under Advanced add Css but did't work, isn't there a gadget for this advertisements then I will be able to add it easily by going to Layout. Any way Nice work


Important - Make sure to click the "Subscribe By Email" link below the comment for to be notified of follow up comments and replies.If you use Name/URL don't use keywords as your name (You Know Who You Are).