How to add BuySellAds like 125×125 ad section in blogger blogs

• Tweet

• Tweet

Blogger blogs  are widely used by millions of users to promote what they like, love or at least care about. Opening a blog is pretty easy, you have themes within blogger, so if you like one of the defaults you can choose it, or change to a custom one that you have downloaded from somewhere else or made it yourself.

After some time your blog will become successful and you will get revenues in different ways, such as Google Ads and Chitika, but an other way to get some revenue is by placing 125×125 ad boxes to your site.  Usually they are places vertically in the right sidebar, but the place you will be placing them still remains a choice of yours. You can also charge differently for horizontal under the title, differently for vertical ones in the left or right sidebar. This one I have created to look exactly like the one BuySellAds has.

The widget looks like this:

Advertise here Advertise here Advertise here Advertise here

Widget by Dip In IT

To add this to your blogger blog first of all you will need to login to your blogger account and click on Design.

Under the Page Elements Section go to Add a Gadget.

From the given list find and choose HTML/JavaScript.

Paste the code in the new window and click Save. Go back to your blog and preview it.

The Code

Here is the code that you will need to enter:

Source code

<style>
.ads {
    display: block;
    width: 280px;
}
.ads a {
    width: 125px;
}
.ads a img {
    padding: 0;
}
.ads a em {
    font-style: normal;
}
.ads a {
    color: #888888;
    display: block;
    float: left;
    font-family: verdana,sans-serif;
    font-size: 11px;
    margin: 0 7px 7px 0;
    overflow: hidden;
    text-align: center;
    text-decoration: none;
}
.ads img {
    border: 0 none;
    clear: right;
}
.ads a.image {
    background: none repeat scroll 0 0 #E7E7E7;
    border: 1px solid #CCCCCC;
    color: #666666;
    font-size: 12px;
    font-weight: bold;
    text-align: center;
}
.ads a.image:hover {
    background: none repeat scroll 0 0 #DDDDDD;
    border: 1px solid #999999;
    color: #333333;
}
.ads a {
    line-height: 100%;
}
.ads a.image {
    height: 125px;
    line-height: 1000%;
    width: 125px;
}
html > body .ads a.image {
    height: 123px;
    width: 123px;
}
#credits {
    float: right;
    font-size: 10px;
    margin-right: 35px;
    margin-top: -10px;
}
</style>
<div id="advert">
<div class="ads">
 
<a href="location_of_link" class="image">Advertise here<img src="location_of_image" /></a>
<a href="location_of_link" class="image">Advertise here<img src="location_of_image" /></a>
<a href="location_of_link" class="image">Advertise here<img src="location_of_image" /></a>
<a href="location_of_link" class="image">Advertise here<img src="location_of_image" /></a>
</div>
<div id="credits">
<p>Widget by <a href="http://www.dipinit.com">Dip In IT</a></p>
</div>
</div>

Notice

You have noticed that lines 65 to 68 are highlighted. There you will need to change your links and locations of your images. You can leave them as this which will point to a bad page of your blog, or you can create a page on your blog where you tell the visitors how much are you charging for your ads and point those to the page you created by changing the location_of_link and also if someone bought your ads will give you a 125×125 image that you will upload to your site and put its link to location_of_image. Also you will want to delete the Advertise here text when you place an image and a link.

How to add in wordpress

But if you are a WordPress user, just login to your WordPress Dashboard, under Appearance section click on Widget. From the Widgets available find Text, click on it and drag and drop it on the sidebar, paste the code and save it.

Enjoy your BuySellAds like ad section!