BuySellads is a direct advertisement banner platform that acts as a middle man between publishers and advertisers. You apply for BuySellAds.com and get approved, you can then create AdSpot (as you would notice on this blog or in the picture below.
 |
| Default BuySellAds AdSpot Styling |
 |
| CSS3 Leaf Stylization |
Before we were approved by BuySellAds , i didnt had an idea how exactly we could create an AdSpot. I believed that this entire process is done manually and BuySellAds only plays their part to bring up banner advertisers.
Buy fortunately, their system is much more advanced and works like a charm. You just need to create AdSpot and set their prices.
Tip: How To Price Your BuySellAds BSA Ads? The FORMULA!
Once done, they provide you with a java script code that is unique for that particular AdSpot. So for the headers banners, you would create an in depended code. Once thats done, you would notice AdSpots with a 'default' stylization as shown in the first picture above.
Those AdSpots are pretty much used by all BuySellAds publishers. To get an extra edge and to provide more value to the advertisers, the CSS3 leaf effect stylization performs pretty well and would really show great results when it comes to attract advertisers.
Tip: Top 10 Popular Alternatives To BuySellAds That Pay Well!
How does this BuySellAds CSS3 Leaf Effect Helps Advertisers?
Basically its all about drawing readers attention. While reading this particular posts too, you might have noticed the AdSpots in the header and sidebar. The CSS3 stylization makes the reader click the ads more than the usual styling (provided by BuySellAds).
Thus the more clicks your ads gets, the more chances are for you that your Ads get renewed next month too by the advertisers (if they are satisfied with the results).
This is the very purpose of providing this CSS3 leaf effect code, that was asked by many readers too.
Tip: How To Choose A Professional Looking Template For Your Brand New Blog
Pump Up Your BuySellAds Game: Stylize AdSpots with CSS3
For Blogger.com users
Navigate to your Blogger Dashboard >> Layout >> Add a Gadget >> HTML/JavaScript and paste the following code with in it.
<style>.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:#6D87A8 !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}</style>
For WordPress Users:
Go to your Style.css file and paste the code shared above, BUT without <style> </style> tags in the starting and ending. Save your file and you would notice the AdSpots shaping up.
How does it work?
Every individual ads with in a certain AdSpot is defined by its own unique CSS3 class. So the 4 banners in the headers (though are working under the same JavaScript code), but each banner is calling a different CSS3 class.
So the first banner would call
.ad1 {bla bla bla}
So what the CSS3 code shared above does it, it overrides the default class (provided by BuySellAds) and stylize them in a much interesting way.
Tip: BuySellAds Dashboard Overview: Getting To Know Basics
Interesting?
Did you find these stylization of the BuySellAds AdSpots interesting?
You may like to read:
Credits: Spiceupyourblog (The original styling was brought up by Paul Crowe together with Harish from Custom Blogger Templates and Way2Blogging)
No comments