How To Style BuySellAds Empty Ad Spots With CSS?

BuySellAds 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,

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,

Go To Blogger > Design > Edit HTML

Backup your template

Search for

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.

8
comments

PLEASE NOTE:

We have Zero Tolerance to Spam.

Chessy Comments and Comments with
'Links'
will be deleted immediately upon our review.

(function() {
var items = ['id': '4009146084837547912', 'body': '@Amitx3cbr /x3ex3cbr /x3eNothing new in it buddy. Everyone enjoys monetizing the blog for it is the only source of income that helps us to maintain and run the blogs and provide you with free tutorials. Its the only right we have. :x26gt;', 'timestamp': '1307783234826', 'permalink': 'https://www.mybloggertricks.com/2011/06/how-to-style-buysellads-empty-ad-spots.html?showCommentx3d1307783234826#c4009146084837547912', 'author': 'name': 'Mohammad Mustafa Ahmedzai', 'avatarUrl': 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggot5slWGpvs6tNYI0QV_ueCyhuL5rTNQC9X8z9BpYkqwcV5bxSRa3Hki39OryVlf2crGMZPWRdhv5TWdo-21scpi4m55gLRy-wTIJuWRxUTAfJGE8ItZ1umcfOmiwGlJu6Av_iotOSjs/s35/384304wl3ygq6tre.jpg', 'profileUrl': 'https://www.blogger.com/profile/11681339458447132019', 'displayTime': 'Jun 11, 2011, 2:07:00 PM', 'deleteclass': 'item-control blog-admin pid-1736397285', 'id': '8268991637212220536', 'body': 'Ads space can be directly customized in admin panel of BSA.', 'timestamp': '1307980358461', 'permalink': 'https://www.mybloggertricks.com/2011/06/how-to-style-buysellads-empty-ad-spots.html?showCommentx3d1307980358461#c8268991637212220536', 'author': 'name': 'Digital Bunch ~ SEO Tips', 'avatarUrl': '//img1.blogblog.com/img/blank.gif', 'profileUrl': 'http://www.digitalbunch.com', 'displayTime': 'Jun 13, 2011, 8:52:00 PM', 'deleteclass': 'item-control blog-admin pid-196371278', 'id': '4412447740176646122', 'body': '@Digital Bunchx3cbr /x3ex3cbr /x3eBrother we can only customize the font appearance and not the hover effects. You can try them yourselves the results are always poor.', 'timestamp': '1308089416042', 'permalink': 'https://www.mybloggertricks.com/2011/06/how-to-style-buysellads-empty-ad-spots.html?showCommentx3d1308089416042#c4412447740176646122', 'author': 'name': 'Mohammad Mustafa Ahmedzai', 'avatarUrl': 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggot5slWGpvs6tNYI0QV_ueCyhuL5rTNQC9X8z9BpYkqwcV5bxSRa3Hki39OryVlf2crGMZPWRdhv5TWdo-21scpi4m55gLRy-wTIJuWRxUTAfJGE8ItZ1umcfOmiwGlJu6Av_iotOSjs/s35/384304wl3ygq6tre.jpg', 'profileUrl': 'https://www.blogger.com/profile/11681339458447132019', 'displayTime': 'Jun 15, 2011, 3:10:00 AM', 'deleteclass': 'item-control blog-admin pid-1736397285', 'id': '5039551299366815012', 'body': 'Is it possible to create account and get payment in Pakistan without having paypal account?x3cbr /x3ex3cbr /x3eis there any other method available for Pakistanis?', 'timestamp': '1319642696115', 'permalink': 'https://www.mybloggertricks.com/2011/06/how-to-style-buysellads-empty-ad-spots.html?showCommentx3d1319642696115#c5039551299366815012', 'author': 'name': 'Saqib', 'avatarUrl': '//lh3.googleusercontent.com/zFdxGE77vvD2w5xHy6jkVuElKv-U9_9qLkRYK8OnbDeJPtjSZ82UPq5w6hJ-SAx3ds35', 'profileUrl': 'https://www.blogger.com/profile/12843197693518683712', 'displayTime': 'Oct 26, 2011, 8:24:00 PM', 'deleteclass': 'item-control blog-admin pid-709971877', 'id': '8597786080043296516', 'body': '@saqibx3cbr /x3eUnfortunately thatx26#39;s the only highgly used way. Other alternatives are no less than a headache. Please read this post: x3ca hrefx3dx22http://www.mybloggertricks.com/2011/05/how-to-use-paypal-in-iran-egypt-and.htmlx22 relx3dx22nofollowx22x3eUSe paypal in Pakistanx3c/ax3e', 'timestamp': '1319654107033', 'permalink': 'https://www.mybloggertricks.com/2011/06/how-to-style-buysellads-empty-ad-spots.html?showCommentx3d1319654107033#c8597786080043296516', 'author': 'name': 'Mohammad Mustafa Ahmedzai', 'avatarUrl': 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggot5slWGpvs6tNYI0QV_ueCyhuL5rTNQC9X8z9BpYkqwcV5bxSRa3Hki39OryVlf2crGMZPWRdhv5TWdo-21scpi4m55gLRy-wTIJuWRxUTAfJGE8ItZ1umcfOmiwGlJu6Av_iotOSjs/s35/384304wl3ygq6tre.jpg', 'profileUrl': 'https://www.blogger.com/profile/11681339458447132019', 'displayTime': 'Oct 26, 2011, 11:35:00 PM', 'deleteclass': 'item-control blog-admin pid-1736397285', 'id': '1747881272372110673', 'body': 'ads on mbt never irritate me but rether i visit every time i get surprise the ads are placed is amazing just amazing mbt knows how to use each and every corner of limited space without interrupting visitor.x3cbr /x3ex3cbr /x3eRegards,x3cbr /x3efor All file hosting Premium account Download Unlimited From any File Hosting @ goo.gl/18WXh', 'timestamp': '1322803570017', 'permalink': 'https://www.mybloggertricks.com/2011/06/how-to-style-buysellads-empty-ad-spots.html?showCommentx3d1322803570017#c1747881272372110673', 'author': 'name': 'Unknown', 'avatarUrl': '//lh3.googleusercontent.com/zFdxGE77vvD2w5xHy6jkVuElKv-U9_9qLkRYK8OnbDeJPtjSZ82UPq5w6hJ-SAx3ds35', 'profileUrl': 'https://www.blogger.com/profile/11449374407778022739', 'displayTime': 'Dec 2, 2011, 10:26:00 AM', 'deleteclass': 'item-control blog-admin pid-645818569', 'id': '3203520369722407057', 'body': 'How to add a background to an ad spot with animations?x3cbr /x3ex3cbr /x3eI saw this on many blogs. It looks professional. There are many ad spots with different colors, and if we hover on them they expand. I too want to customize my blog like that. Mustafa bro please give a tutorial on that. x3cbr /x3eThank You', 'timestamp': '1326014934042', 'permalink': 'https://www.mybloggertricks.com/2011/06/how-to-style-buysellads-empty-ad-spots.html?showCommentx3d1326014934042#c3203520369722407057', 'author': 'name': 'Pinku', 'avatarUrl': '//lh3.googleusercontent.com/zFdxGE77vvD2w5xHy6jkVuElKv-U9_9qLkRYK8OnbDeJPtjSZ82UPq5w6hJ-SAx3ds35', 'profileUrl': 'https://www.blogger.com/profile/11311558233250449456', 'displayTime': 'Jan 8, 2012, 2:28:00 PM', 'deleteclass': 'item-control blog-admin pid-315757656', 'id': '7389918371934199646', 'body': 'Hi Dear i cannot create the space of ad buy/sell in my blog.please explain where and how the above code is to paste.?', 'timestamp': '1360932349056', 'permalink': 'https://www.mybloggertricks.com/2011/06/how-to-style-buysellads-empty-ad-spots.html?showCommentx3d1360932349056#c7389918371934199646', 'author': 'name': 'Abid Hussain', 'avatarUrl': '//lh5.googleusercontent.com/-GYg7jMfGAyQ/AAAAAAAAAAI/AAAAAAAAACM/_glKL7636K4/s35-c/photo.jpg', 'profileUrl': 'https://www.blogger.com/profile/10779022831078508515', 'displayTime': 'Feb 15, 2013, 5:45:00 PM', 'deleteclass': 'item-control blog-admin pid-289861841'];
var msgs = 'loadMore': 'Load more...', 'loading': 'Loading...', 'loaded': 'No more!', 'addComment': 'Add comment', 'reply': 'Reply', 'delete': 'Delete';
var config = 'blogId': '8193278726666811965', 'postId': '8007676871350709919', 'feed': 'https://www.mybloggertricks.com/feeds/8007676871350709919/comments/default', 'authorName': 'M. Mustafa Ahmedzai', 'authorUrl': 'https://www.blogger.com/profile/11681339458447132019', 'baseUri': 'https://www.blogger.com', 'maxThreadDepth': 2;
// 0)
cursor = parseInt(items[items.length - 1].timestamp) + 1;

var bodyFromEntry = function(entry)
if (entry.gd$extendedProperty)
for (var k in entry.gd$extendedProperty)
if (entry.gd$extendedProperty[k].name == 'blogger.contentRemoved')
return '' + entry.content.$t + '';

return entry.content.$t;

var parse = function(data)
cursor = null;
var comments = ;
if (data && data.feed && data.feed.entry)
for (var i = 0, entry; entry = data.feed.entry[i]; i++)
var comment = ;
// comment ID, parsed out of the original id format
var id = /blog-(d+).post-(d+)/.exec(entry.id.$t);
comment.id = id ? id[2] : null;
comment.body = bodyFromEntry(entry);
comment.timestamp = Date.parse(entry.published.$t) + '';
if (entry.author && entry.author.constructor === Array)
var auth = entry.author[0];
if (auth)
comment.author =
name: (auth.name ? auth.name.$t : undefined),
profileUrl: (auth.uri ? auth.uri.$t : undefined),
avatarUrl: (auth.gd$image ? auth.gd$image.src : undefined)
;

if (entry.link)
if (entry.link[2])
comment.link = comment.permalink = entry.link[2].href;

if (entry.link[3])
var pid = /.*comments/default/(d+)?.*/.exec(entry.link[3].href);
if (pid && pid[1])
comment.parentId = pid[1];

comment.deleteclass = 'item-control blog-admin';
if (entry.gd$extendedProperty)
for (var k in entry.gd$extendedProperty)
if (entry.gd$extendedProperty[k].name == 'blogger.itemClass')
comment.deleteclass += ' ' + entry.gd$extendedProperty[k].value;
else if (entry.gd$extendedProperty[k].name == 'blogger.displayTime')
comment.displayTime = entry.gd$extendedProperty[k].value;

comments.push(comment);

return comments;
;
var paginator = function(callback) {
if (hasMore()) {
var url = config.feed + '?alt=json&v=2&orderby=published&reverse=false&max-results=50';
if (cursor)
url += '&published-min=' + new Date(cursor).toISOString();

window.bloggercomments = function(data) {
var parsed = parse(data);
cursor = parsed.length

Mohammad Mustafa AhmedzaiJun 11, 2011, 2:07:00 PM

@Amit

Nothing new in it buddy. Everyone enjoys monetizing the blog for it is the only source of income that helps us to maintain and run the blogs and provide you with free tutorials. Its the only right we have. :>

ReplyDelete

Digital Bunch ~ SEO TipsJun 13, 2011, 8:52:00 PM

Ads space can be directly customized in admin panel of BSA.

ReplyDelete

Mohammad Mustafa AhmedzaiJun 15, 2011, 3:10:00 AM

@Digital Bunch

Brother we can only customize the font appearance and not the hover effects. You can try them yourselves the results are always poor.

ReplyDelete

SaqibOct 26, 2011, 8:24:00 PM

Is it possible to create account and get payment in Pakistan without having paypal account?

is there any other method available for Pakistanis?

ReplyDelete

Mohammad Mustafa AhmedzaiOct 26, 2011, 11:35:00 PM

@saqib
Unfortunately that's the only highgly used way. Other alternatives are no less than a headache. Please read this post: USe paypal in Pakistan

ReplyDelete

UnknownDec 2, 2011, 10:26:00 AM

ads on mbt never irritate me but rether i visit every time i get surprise the ads are placed is amazing just amazing mbt knows how to use each and every corner of limited space without interrupting visitor.

Regards,
for All file hosting Premium account Download Unlimited From any File Hosting @ goo.gl/18WXh

ReplyDelete

PinkuJan 8, 2012, 2:28:00 PM

How to add a background to an ad spot with animations?

I saw this on many blogs. It looks professional. There are many ad spots with different colors, and if we hover on them they expand. I too want to customize my blog like that. Mustafa bro please give a tutorial on that.
Thank You

ReplyDelete

Abid HussainFeb 15, 2013, 5:45:00 PM

Hi Dear i cannot create the space of ad buy/sell in my blog.please explain where and how the above code is to paste.?

ReplyDelete