125×125 ad banners can be an effective way to monetize your blog. But if your ad banners are not displayed attractively, they are not likely attract the attention of the reader. Optimizing your blog for advertising includes making your ad layout as appealing as possible. Ad banners are most effective at generating income streams when they are displayed in a centered grid in your blog sidebar.This tutorial will show you, in 3 simple steps, how to arrange 125×125 ad banners using simple CSS & HTML. You have two options to choose from: a grid that is 2 ads across for narrower sidebars or a grid layout 3 ads across.
Sidebar Widths For The Two Display Options
For the 2 across grid your sidebar must be able to hold elements that are 262 pixels wide. The 3 across option requires that your sidebar be able to display elements that are 393 pixels or wider.Here are some images that illustrate how the banners will be displayed in the two options. Please note that no borders will be added to the actual display code. They were added on the diagrams below for aesthetic reasons.
I’m not going to have you scour your CSS files to find out if your sidebar is wide enough. The easiest way to know is to a try out this method. If your sidebar is wide enough, your 125×125 ad banner grid will display as expected.
If your sidebar is not wide enough then your ads will either be hanging out beyond the confines of your sidebar or will be visually cut off, depending on your blog layout and design. So just eyeball it and if you think it will fit, give it a shot and find out for sure. Removing the code is easy if it doesn’t work for your sidebars. Simple as deleting a widget in your blog editor.
Why CSS And Not Tables For Ad Banner Layout?
Some people advocate the use of tables for laying out 125×125 ad banners. This is not good web design practice. Several years ago, there was a move away from using tables for HTML layout purposes. Instead, today we use CSS to control how elements are styled and laid out on a web or blog page.HTML is a markup language used on the web to define what role an element will take on a web page, not how it should be layout. It defines things such as paragraphs, headings, lists, etc. Tables are intended as a way to display data on a web page. They should not be used for the layout your 125×125 ad banners or any other elements on a web page.
The preferred method is to use CSS to control the way elements are styled and laid out on a web page. CSS is easy to use and implement on your blog. This is the method we will be using.
I’m not going to go into great gory detail about HTML and CSS. I am going to give you a brief explanation of what you are doing. Then I will give you some code and show you where to copy and paste it in your blog template or theme. Three steps, simple and straightforward.
1. The CSS That Will Control Your Ad Banner Layout
The CSS will instruct the browser how to display your 125×125 ad banners in your blog template or theme. Simply copy the appropriate code snippet below into your clipboard. The code for a grid layout 2 ads wide is in the first box, the code for a display grid 3 ads wide is shown in the second box. Make sure you copy the right one for the width of your sidebar.Copy the code, from the first box below,for 2 ads across (narrow sidebar). Then scroll down for the instructions on how to add it to the Blogger or WordPress CSS files.
.two-across-125 {
width:262px;
margin:0 auto;
overflow:hidden;
}
.two-across-125 a img, .two-across-125 img a {
padding:3px;
margin:0;
border:none;
float: left;
}
Copy this code , shown in the box below, for 3 ads across (narrow sidebar). Then scroll down for the instructions on how to add it to your Blogger or WordPress CSS files.
.three-across-125 {
width:393px;
margin:0 auto;
overflow:hidden;
}
.three-across-125 a img, .three-across-125 img a {
padding:3px;
margin:0;
border:none;
float:left;
}Login into your Blogger dashboard and click on the Design option:
Now click on the Edit tab option. You are now in the Blogger Template editing area.
Use your browsers search function to find the end skin tag: </b:skin>
Use the return key to insert a couple of spaces just above the </b:skin> tag, just to keep everything neat. Then paste your copied CSS code snippet above the tag in the space you created right above the </b:skin> tag. Click the image below for clarification:
You can now proceed to Step 2. (Close this window.)
Now click on the Edit tab option. You are now in the Blogger Template editing area.
Use your browsers search function to find the end skin tag: </b:skin>
Use the return key to insert a couple of spaces just above the </b:skin> tag, just to keep everything neat. Then paste your copied CSS code snippet above the tag in the space you created right above the </b:skin> tag. Click the image below for clarification:
Click Image For Full Sized View.
Login into your WordPress Admin area and click on the Appearance dropdown menu. Click on the Editor option, to open the WordPress Themes Editor.
Check to see if the css.styles file has opened in the editor by default. If not look through the list to the right of the editor. The styles.css file is usually near the bottom of the list. Click on it to open it in the themes Editor. Click the image below for a larger view to help you understand these instructions:
Scroll all the way to the bottom of the style.css file. Hit return a couple of times to add some space at the end of the file, just to keep things neat. Then paste your CSS code snippet at the very bottom of the file. Click on Update File to save the style.css file.
You are now ready to proceed to Step 2. (Close this window.)
Check to see if the css.styles file has opened in the editor by default. If not look through the list to the right of the editor. The styles.css file is usually near the bottom of the list. Click on it to open it in the themes Editor. Click the image below for a larger view to help you understand these instructions:
Click image for a larger view.
You are now ready to proceed to Step 2. (Close this window.)
2. Creating a Container For Your 125×125 Ad Banners
You are going to be creating a container, using HTML DIV tags, that will hold your banner codes. This DIV container will also have a “class”. This class will reference the CSS styles that will control the layout of your banners. These are the styles you pasted into your blog’s template files in step one.Open your blog editor, then copy and paste the appropriate code from below into a TEXT/HTML widget for your sidebar. Copy and paste the code from the first box for a narrow sidebar and a layout that will be 2 ads wide. Use the code from the second box if you have a wide sidebar and want your ads to display in a grid that will be 3 ads wide.
<div class="two-across-125">
</div>
<div class="three-across-125">
</div>
Now copy and paste all the codes for your ad banners between the two DIV tags as indicated in the diagram below. Please note that this shows the two across option. You will be pasting your code in the exact same place in the three across layout option, between the div tags. The only difference will be that the class will reference CSS styles for displaying the ads in a 3 across grid.
Here is an image of the div tags with a number of ad banner codes pasted between them:
When you are done pasting all your codes between the DIV tags, save and close the widget editing window. Open or refresh your blog page in your browser. Your ads should now appear in your sidebar.
Post Source :- http://blogswithwings.com/
Tags : monetize ,monetization ,wordpress themes ,wordpress ,twitter ,traffic ,sidebar ,monetizing ,wordpress plugins ,widget ,product ,marketing ,make money online ,internet ,how to ,google adsense ,download ,design ,widgets ,tutorial ,text link ads ,text link ,social media ,search ,rss feed ,reviews ,revenue ,products ,popularity ,networks ,kontera ,income ,google ,dennis ,contest ,business ,blogosphere ,blogging tools ,blogging ,bloggers ,blogger ,blog post ,blocks ,banner ads ,banner ad ,audience ,affiliate marketing ,affiliate link ,advertisers ,advertiser ,advertisements ,adsense
0 comments