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

      3.   Copy the first peace of code snippet

       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.

        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.

      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.

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:

• Decide where to Show and Hide widgets

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

SHARES

Share

Pin it

Tweet

Share

Share

Print

Buffer

If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »

Mohammad 5/17/2012