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:
image

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






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








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

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


    ReplyDelete








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








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








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








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








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








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




Add comment


Load more...












BLOG_CMT_createIframe('https://www.blogger.com/rpc_relay.html');







-

這個網誌中的熱門文章

How to read a connectionString WITH PROVIDER in .NET Core?

圖片
6 I added .AddJsonFile("Connections.json", optional: true, reloadOnChange: true) in public Startup(IHostingEnvironment env) Connections.json contains: "ConnectionStrings": "DefaultConnection": "Server=(localdb)\mssqllocaldb;Database=DATABASE;Trusted_Connection=True;MultipleActiveResultSets=true", "COR-W81-101": "Data Source=DATASOURCE;Initial Catalog=P61_CAFM_Basic;User Id=USERID;Password=PASSWORD;Persist Security Info=False;MultipleActiveResultSets=False;Packet Size=4096;", "COR-W81-100": "Data Source=DATASOURCE;Initial Catalog=Post_PS;User Id=USERID;Password=PASSWORD;Persist Security Info=False;MultipleActiveResultSets=False;Packet Size=4096;", "MSEDGEWIN10": "Data Source=DATASOURCE; Initial Catalog=COR_Basic; Persist Security Info=False;Integrated Security=true;MultipleActiveResultSets=False;Packet Size=4096;Application Name="COR_Basic"", "server...
閱讀完整內容

Node.js Script on GitHub Pages or Amazon S3

圖片
0 I'm wondering if I can run a Node.js script in my Jekyll page from GitHub Pages or Amazon S3? I think it can't run on GitHub Pages since it doesn't support server side code. Not too sure. The code is below: var Airtable = require('airtable'); var base = new Airtable(apiKey: 'YOUR_API_KEY').base('appAnZVyYqusNPV5Q'); base('Invitee list').select( // Selecting the first 3 records in Complete list: maxRecords: 3, view: "Complete list" ).eachPage(function page(records, fetchNextPage) // This function (`page`) will get called for each page of records. records.forEach(function(record) console.log('Retrieved', record.get('Email')); ); // To fetch the next page of records, call `fetchNextPage`. // If there are more records, `page` will get called again. // If there are no more records, `done` will get called. fetchNextPage(); , function done(err) if (err) console.error(err); return; ); node.js ...
閱讀完整內容

Museum of Modern and Contemporary Art of Trento and Rovereto

圖片
Art museum in Rovereto TN, Italy Museum of Modern and Contemporary Art of Trento and Rovereto Museo d'arte moderna e contemporanea di Trento e Rovereto MART, Entrance Location Corso Angelo Bettini, 43, 38068 Rovereto TN, Italy Coordinates 45°53′38″N 11°02′42″E  /  45.8940°N 11.0450°E  / 45.8940; 11.0450 Coordinates: 45°53′38″N 11°02′42″E  /  45.8940°N 11.0450°E  / 45.8940; 11.0450 Type Art museum Director Gianfranco Maraniello Public transit access Trento train station. Taxis outside station. Website mart.trento.it The Museum of Modern and Contemporary Art of Trento and Rovereto (MART) ( Museo d'Arte Moderna e Contemporanea di Trento e Rovereto , in Italian) is a museum centre in the Italian province of Trento. The main site is in Rovereto, and contains mostly modern and contemporary artworks, including works from renowned Giorgio Morandi, Giorgio de...
閱讀完整內容