--> Ad Sales Widget: Create Advertise Page With BuySellAds | Experience Lab - Online business creation and development guide for bloggers and startups

Ad Sales Widget: Create Advertise Page With BuySellAds

Buysellads recently introduced their first ever Ad sales widget that displays your Ad spots price listing right on your very own blog. Th...

AD SALES WIDGET

Buysellads recently introduced their first ever Ad sales widget that displays your Ad spots price listing right on your very own blog. This tool can be added easily to both wordpress and blogger blogs.  Sponsors and direct advertisers can buy an ad spot from you using the advertise page. You don't need to manually update the prices on your static Advertise page. Using this Ad Sales widget, the prices and Page impressions will update automatically. You can display Ad inventory type, available ad spaces, ad spot price, size and Ad description. You can also display your BSA blog description using this tool.

However your Facebook, twitter, PageRank and RSS readers stats wont display here. Available spots are shown as green in color and sold listings (waiting list) appear dull grey. Click the "Buy Now" button will take the advertiser to his Buysellads dashboard where he can confirm his Ad purchase. In today's tutorial we will learn to create a stunning and attractive "Advertise Here" page that will be customized using custom stylesheet dosed with CSS3 effects. We hope this is the first tutorial of its kind. Lets cook some delicious design recipe!


Live Demo

Who can use this Widget?

Anyone who has an approved BuysellAds publishers account and has active ads running on his blog. So this tutorial is concerned with BSA current users.

Why Add Ad Sales Tool?

  1. To attract direct advertisers
  2. This tool will make it easy for advertisers to buy an Ad spot from you without having to look for you at the market place. Most bloggers often do not share their BSA marketplace URL and this badly effects the rate of spot sale. For fast Ad spot sales, BSA strongly recommends display "Advertise here" empty spots or at least a link. This tool will fulfill all requirements and will surely Increase the chances of Ad spot purchase.
  3. Gives a professional touch to your blog
  4. Interested sponsors will judge your traffic stats via the advertise page price listings and page impressions

Adding Ad Sales Widget to blogger

Follow these easy steps:

  1. Log into your buysellads account
  2. Navigate to Dashboard and then click on the Tools tab as shown below

tool settings

      3.   Copy the first peace of code snippet

ad sales widget code

       You will see two check boxes. The first box would hide your blog title and the second one will hide the description that appears on your BSA public marketplace page. Since it looks nice to write a well formatted description yourself using rich text editor of blogger therefore I would recommend that you choose to hide only description.

       4.   Now Log into blogger and create a new Page.

  • To create a Page select Pages from settings menu and then choose Blank Page by clicking on New Page button.

create a new page

        5.   Give this page a short title like "ADVERTISE US"   and write a few lines of description about your blog niche, its range of audience, traffic stats and rankings. Once done, click on the HTML button next to Compose and paste the code you copied in step#3 just at the end of all text present in HTML view. See a demonstration below for our page.

HTML view

      6.  Finally publish this page by clicking the Update button. You are half way done!

Visit your Advertise page and you will see that the Ad sales tool is working just fine but you will find something missing? The colors!

Customize the Sales Tool

  1. Go To blogger > Template
  2. Backup your template
  3. Search for ]]></b:skin>
  4. Just above it paste the following CSS code

/* MBT Styles For BuysellAds Ad Sales Widget */

.bawi_title {

margin: 0;
color: #222 !important;
font: bold 16px/14px arial !important;
line-height:14px !important;
display:block;
}

.bawi_desc, .bawi_specs, .bawi_right{
font: 14px/20px Arial,Helvetica,Sans-serif !important;

}

.bsa_adwidget_title {
margin: 10px 0px 30px 0px !important; font-family:Verdana, Georgia, serif !important;
font-weight:bold !important;
font-size:20px !important;
border:1px solid #ddd !important; padding:10px !important;
background:#0CBA0C !important; color:#ffffff; !important;
border-radius:5px !important;
-webkit-border-radius:5px !important;
-moz-border-radius:5px!important;
}

.bsa_adwidget_desc  {
text-align:justify !important;
}

 

To change the color of the widget header that says "Advertise with xyz"  make these changes:

  • To change the green background color edit 0CBA0C
  • To change the font color edit #ffffff
  • To change the font size edit 20px

      5. Save your template and you are all set!

Visit your advertise page now and see it in a completely different look. We have provided you with most of the CSS classes that are required to change the tools' theme. You can play with it further to create a perfect matching tool  for your blog.

Where should you display the advertise link?

The best position to display the link to your advertise page is your primary navigation menu at the top just below header. You will need to insert this link inside the menu manually.

advertise link

Hide Social Networking Buttons on Advertise Page

You must keep the advertise page clean and neat. you may not display Adsense Ads there nor any social sharing buttons or counters. To control the display of widgets in blogger please read:

Need help?

I just hope this tutorial may prove helpful for all of those who kept asking us how we embedded the buysellads Ad gadget inside our blog. The tutorial is helpful for anyone running buysellads whether he is using Blogger as the platform or some other platform like wordpress and joomla. You only need to paste the first code inside your advertise page and the second code inside your stylesheet page. That simple! If you need any help with regard to customizing the background colors and look of the tool then feel free to post your queries. Peace and blessings buddies. :)

COMMENTS

Name

Affiliate Marketing,12,Announcement,34,Bing,9,Bitcoin,38,blog,7,Blogger Resources,42,Blogger Templates,4,blogger tricks,156,Blogging ethics,70,Blogging tips,198,Bugs and Errors,34,Business,9,Copyright Violation,9,CSS and HTMLTricks,95,Designs,8,drop down menu,7,eBook,12,Email Marketing,7,Events,30,Facebook,30,Facebook tricks,49,Google,157,Google AdSense,42,Google Analytics,7,Google Plus,51,Google Plus Tricks,38,Guest Posts,112,home,2,How To,77,Internet,1,JSON Feeds,25,Kitchen Recipes,2,Label Based Sitemap Themes,1,Make Money Online,108,Marketing,16,MBT Blogger Templates,7,Menus,1,News,146,Pages,1,Posts,10,presentations,15,Responsive,10,Reviews,7,SEO,307,Settings,6,Shortcode,15,Sitemap Themes,1,Social Media,155,Technology,7,Templates,1,Tips,2,Tools,1,Traffic Tips,80,Video,19,Web Designing,62,web hosting,18,Webmaster Tools,97,Widgets,199,wordpress,26,
ltr
item
Experience Lab - Online business creation and development guide for bloggers and startups: Ad Sales Widget: Create Advertise Page With BuySellAds
Ad Sales Widget: Create Advertise Page With BuySellAds
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-RtEgI2VCuuBKXXtMrxNnH_K2XjzqyRt09J96HyeEBbRCvsz7ppt_WDMSlWDzyb9Z2Ff0uhL6upILMVIDM1L1w2nFeUNTnL48vyMYAch7RsoqkrfvIE1WCN2qXFINjISciEWaknd9Pw8/?imgmax=800
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-RtEgI2VCuuBKXXtMrxNnH_K2XjzqyRt09J96HyeEBbRCvsz7ppt_WDMSlWDzyb9Z2Ff0uhL6upILMVIDM1L1w2nFeUNTnL48vyMYAch7RsoqkrfvIE1WCN2qXFINjISciEWaknd9Pw8/s72-c/?imgmax=800
Experience Lab - Online business creation and development guide for bloggers and startups
https://www.experiencelab.info/2012/05/ad-sales-widget-create-advertise-page.html
https://www.experiencelab.info/
https://www.experiencelab.info/
https://www.experiencelab.info/2012/05/ad-sales-widget-create-advertise-page.html
true
2959477579779989044
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share. STEP 2: Click the link you shared to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy