Banner Ads is one of the most popular format for advertisers and publishers alike. That’s because banner ads often occupies the best piece of a blog’s real estate, that is the blog header or on the top of the contents. These areas are the most visible to anyone visiting the blog and those who have a huge readership base charges the most for any banners placed in these places.
Adsense gurus have stated many times that banner ads in the header is not as good a click converter as the large rectangle Ads inside the top portion of the blog post. It is something I agree to, but if you sell ad space, that is the golden area. People who buys Advertisement wants the most visible part of a blog and hence banner ads in the header will fetch a higher price.
To place a banner in your header, you will need to have a header wide enough to accommodate the banner. So if you intend to place a 728 X 90 pixel banner, make sure your header is wide and big enough for that. Also you must take into consideration your header logo and make provisions for that to be displayed fully with the banner.
As always we start with adding a new selector or a div as I like to call it because it is less confusing for noobs. You just need to set the attributes to float the banner and set the margins to align the banner properly. You can omit declaring the width and height as this would allow you to add banners of any size. A simple example will look like this.
.ads {float: right; margin-top: 40px; margin-right: 10px; }
You can of course set your own preferences like floating to the left or have different margins.
Next, go to your header php file and look for the div id of your header image. It will normally looks something similar to this. <div id="header">. If you cannot decide which is which, then go back to your stylesheet and look for the css codes that has your header’s image or logo set as background. That particular selector will be the div id that you are looking for.
Now that you have found it, you MUST insert the banner codes within that id, which means it should be before the closing div tag. If you place it outside the closing tag, you banner will either not appear or if it do, it will not be inside your header. Like for example if your div id is ‘header’, you will have something like this.
<div id="header"> Your header id
<div class="ads">Your new div class that you have created just now must be within this id.
All your banner ad codes here
</div> Closes the div id
</div> Closes the div class
Of course there will be many more lines inside your header php, that’s just a rough guide. As long as you do not delete anything and remember to close your class tags, everything should be okay. In cases where you see the banner not siting properly, you can always go back to your style sheet to re-write the margin spacings. It is a trial and error thing.
Related posts:
- How To Add A Second Header To Your WordPress Theme Just added a second header to my Theme. When I created this Theme, there was no plans at all of wanting a second header as I don’t have anything that’s worth occupying that prime piece of blog estate, but since I am on a subscriber increment campaign, I thought...
- Making A Header Image For The StudioPress Theme Finally had some time and the mood to do some WordPress Theme modding again. As promised earlier, I put the StudioPress Theme to task again, this time using the codes given to me by Darran of LimeTouch. Read more on Making A Header Image For The StudioPress Theme… ...
- Kubrik Theme – Adding Navigation Links After adding the sidebar to the Singles Post of the Kubrik Theme which comes in default with your WordPress Installation, there is another missin item that you might like to add. There are no navigation links in the Default Theme. The only link that your readers can click back...
- Align Image In Post WordPress 2.7 More than a year ago, I posted the stylesheet codes for aligning images in your WordPress posts. Times have changed and WordPress has added many new advanced features. One of them is the ability to align your images perfectly when you insert your image in your post editor. The only...
- Display Thumbnail Images In Post Excerpts Maybe for some reasons or another, you do not like to use plugins to display images in your post excerpts. Using plugins do have limitations. For one, you cannot control the images to be displayed and the post the images to be displayed in. Doing it manually lets you...
{ 1 trackback }
{ 1 comment… read it below or add one }
Thanks, man.
I added a blog to my site and the template had an “empty” ad right in the header. With your help I finally succeded in replacing the spaceholder with a real ad!
Way to go!
John