How To Add Colorful Css Animations To BuySellAds Banners




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

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

14 comments:

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

    ReplyDelete
  2. Thanks for sharing, CSS3 is really amazing

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

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

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

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

    ReplyDelete
  6. please provide tutorial for custom ads

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

    ReplyDelete
  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

    ReplyDelete
  9. what about 468 size ? how to add 468 a format ?

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

    ReplyDelete
  11. I Have A Question.. I Want To Apply For BSA..
    BSA Accepts Blogs(Except English)? My Blog Is In Urdu..
    @Paul Crowe

    ReplyDelete



Important - If you ask a question make sure you tick the "Notify Me" box below the comment form to be notified of follow up comments and replies.


Hire Us