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:
Very cool master..
ReplyDelete
CSS3 are eventually gonna replace the need for Javascript on a website. Thanks for sharing this great tip.
ReplyDelete
Thanks for sharing, CSS3 is really amazing
ReplyDelete
Can we add this to custom ads (I don’t have BSA)
ReplyDelete
Replies
I have a tutorial ready for that, will be published soon..
Delete
thank you master….. how can we add that comment box on every post as yours
ReplyDelete
THANKS
ReplyDelete
Can we add this to custom ads tutorial please..
ReplyDelete
please provide tutorial for custom ads
ReplyDelete
nice…just implemented on my blog…thanks for sharing
ReplyDelete
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
what about 468 size ? how to add 468 a format ?
ReplyDelete
its amazing please tell me how to add 125×125 ad like you in my blog give the formate
KutebKhana
ReplyDelete