Saturday, July 9, 2011

How To Style BuySellAds Empty Ad Spots With CSS?

Customize-BSA-adsBuySellAds is a name that is known to all. It is an advertisement service where you can buy and sell ads out of thousands of blogs and websites. Ads are displayed in different format sizes, the most popular being 125 by 125 and 468 by 60 and 300 by 250. By default the empty Ad Posts look dull and grey in color just like these,

468 by 60
125 by 125
I am sure no one would like the default look so lets play with some CSS!

Customizing BSA Ad Spots

Whether you are a blogger user or wordpress or a webpage holder, this tutorial works for all. We just need to add the CSS code to our style sheet and that's it. So follow up,
  1. Go To Blogger > Design > Edit HTML
  2. Backup your template
  3. Search for
  4. and just above paste the code below,
.adhere{ background:#ffffff !important; border-color:#B7DBFF !important; }
.adhere:hover{ background:#EAF5FF !important; }
    5.   Save your template and you are done!
View your webpage to see your Ad spots with a more attractive look as shown below,
Active Mode Look:
customized bsa ad spot
Mouse Hover Look:
You can observe clearly how the ad spot changes color when the mouse cursor is hovered on it. So lets customize the colors.
Make these changes,
  • To Change the border color, kindly change #B7DBFF . Our Color Generator tool or Color Chart can be helpful.
  • To Change background color in active mode, kindly change #ffffff
  • To change background color in Mouse Hover mode, kindly change #EAF5FF
That's All! :>
PS: To change the Advertise Here font style and color. Kindly edit it from your BSA account.

All Rights Reserved GprsBay | Blogger Template by Bloggermint