How To Add Colorful Css Animations To BuySellAds Banners

Posted : Tuesday, February 07, 2012 | Post Author : Paul Crowe | 13 comments

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.

13 comments:

  1. Very cool master..

    ReplyDelete

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

    ReplyDelete

  3. Thanks for sharing, CSS3 is really amazing

    ReplyDelete

  4. Can we add this to custom ads (I don’t have BSA)

    ReplyDelete

     

    Replies

     

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

    Delete

  6.  

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

    ReplyDelete

  8. THANKS

    ReplyDelete

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

    ReplyDelete

  10. please provide tutorial for custom ads

    ReplyDelete

  11. nice…just implemented on my blog…thanks for sharing

    ReplyDelete

  12. 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

    ReplyDelete

  13. what about 468 size ? how to add 468 a format ?

    ReplyDelete

  14. its amazing please tell me how to add 125×125 ad like you in my blog give the formate
    KutebKhana

    ReplyDelete