January 30, 2010

How you can Modify your XML Blogger Template to Make the most of your AdSense Ads

So you have found a really nice XML Blogger template that you want to use in your blog. You just have grown tired of your old worn out template that had been used by a lot of bloggers. You want your blog to have a unique look and you want it to grab the readers' attention. You've finally found a stunning design that you want to use in your blog.

But will it work? How do you use it? Will it support all the gadgets that you're using in your blog? What if the new template messes up your blog thoroughly, can you still go back to your old template?

Template designers are creative artists who make beautiful homepage designs that are pleasing to the eyes and that grab your attention. You need also to be concerned with the mechanics of the structure underneath the design. You are primarily interested in putting more and better ads in your blog so you have to check on the page elements inside the template to see if they meet your requirements.

To be able to understand the XML Blogger template, you need to have an adequate knowledge of Cascading Style Sheets (CSS) and Hypertext Mark-up Language (HTML). A lot of CSS and HTML tutorials are available in the Internet so search for them and learn how CSS and HTML are used to specify the look and feel of your web page.

Understand that all of the XML Blogger templates are adapted from the original standard developed by Blogger so they follow a consistent pattern set by Blogger when it designed the basic template. From the XML Blogger template's perspective, your blog's page basically consists of the header, the content portion which includes your post and the sidebars, and the footer where copyrights and other information about your blog are placed. The XML template describes how the elements of your blog's page will look and behave and it provides for an outline on how your web page is to be constructed.

The first rule that you must always remember when changing XML Blogger templates is to always save your old template in your computer before uploading your new template on the Edit HTML page of the Blogger Layout tool. You may already have added some modifications to your old template which you don't want to do all over again if you're going to use the same template as before.

Also, you might have some Google tools HTML code that you have manually included in the template that you want to be preserved so it is imperative that you save a copy of the latest status of your template in your computer. Then, if you soon find out that the new template will never work well with your blog, you can always upload your old template file and your blog will work fine as it had before.

When you make your first look at the Blogger XML template that you like, imagine already where you want to put your AdSense ads. Decide how big your ads are going to be and visually check the design if your size will fit in. If you're not sure if a 250 pixel ads can fit on the sidebar, download the template and look at the CSS code behind the template. The Blogger XML template provides for the width of the header and of the content part of your web page.

When changing the widths of the elements in your web page, always make sure that any change that you make is compensated with corresponding changes on the related elements. For example, if you change the left margin of the main content element, you have to make a corresponding change on the size of the right margin. You cannot just get some pixels from thin air. If you want to add more pixels just to one side of a pair of elements, then you have to add corresponding pixels to all elements that contain the particular element that you're changing.

You are allowed to place three AdSense for Contents ads and three AdSense link units on your page. You may also want to place Amazon products ads on your web page so there must be some extra space where you could place them. You would want your web page not to look boring so you may want to place a variety of ads designs on your web page. Is there for example a way by which you could place long ads directly after the header?

The original XML Blogger template provides for a means by which you could place long ads on the space directly below the header but it is turned off by default. You have to tweak the HTML code behind the template to turn it on. Look for the crosscolumn switch on the template and change this setting by removing it and thereby turning on this very valuable feature. This is the only way by which you can place 728 pixel wide banner AdSense ads on your web page.

You may want to place 250 pixel wide ads on your sidebar also so check how wide the sidebar is by looking for the width of the sidebar on the CSS style sheet included in the Blogger XML template. You don't just add pixels to the sidebar if they fall short of your requirements. You have to increase the overall width of the page by increasing the width of the element that contains both the sidebar and the content of the page. You need to maintain the proportion set by the original designer of the template.

If you will not be putting a menu bar on your web page don't choose a template that has a menu bar on them. I mistakenly used a template with a menu bar in it and I found that the menu bar is not easily removed so I just let it sit there but I did not set the links up so nothing happens when you click them. My CSS and HTML know-how somehow felt short to resolve this simple issue. But I know I would be able to resolve this in time.

In one template that I used, there was no blank line between the older and newer pager and the link to view the Atom feed of the blog. If this is true with your template, then you have to add a one em margin at the bottom of the pager element.

If you're using long banners and link lists on your blog, there is no automatic provision to place a blank line between them. They won't look good without that horizontal line in between so what you can do is to insert a text gadget with only blanks in them. This will make sure that a white space appears between the banners and link lists.

The XML Blogger template contains some legacy codes that today interfere in the printing of your web page. I found this out when I researched this issue a long time ago. There were some codes that were placed on the original template to account for how the different browsers display documents. But now, they interfere in the correct printing of the web page. So if you're having some problems with printing your web page, just remove all mentions of overflow: auto or overflow: hidden on the CSS code of your template.

There may be some copyright notice and links to the designer's web site at the bottom of your XML Blogger template. As per the provisions of the Creative Commons license, you can make changes on the template to suit your needs but you cannot remove any copyright notice or links to the web site of the template's designer. We have been given this wonderful opportunity to make use of a creative work done for us by these designers. The most we can do for them is to respect this provision and retain all text at the bottom of your XML Blogger template.

For you to be able to modify your XML Blogger template, you need to have a good enough knowledge of CSS and HTML. There is a lot of information on the Internet for learning these two vital web standards. You can more confidently change your Blogger XML template if you have gained an adequate know-how on both of these languages. I hope you have learned something on how you can modify your XML Blogger template so that you can fit in more ads on your blog.

Read my article on what you need to know and how you can use the XML Blogger templates in your blog at: http://publishtoweb.blogspot.com/2010/01/what-you-need-to-know-about-and-how-you.html.

Read my other article on how to use the law of thirds in composing your photographs at: http://sites.google.com/site/ournewapproach/how-to-use-the-law-of-thirds-in-framing-a-good-photo-shot.