February 3, 2010

Download, Modify and Use a Free Blogger XML Template and Learn CSS and HTML along the Way

There are several reasons why you might want to change the skin of your Blogger blog. One primary reason is for you to be able to place more AdSense or Amazon ads on it. The old Blogger templates do not have enough spaces to where you can place the new larger ads from both AdSense and Amazon.

Or, you might have just grown tired of the same old skin that almost everyone had used and tweaked but still fell short of how you wanted your blog to look. You have used the same old fonts that everyone had used and the same old two-column format and you wanted to experiment on bolder designs that use more daring colors.

There is a lot of Blogger XML templates that you can download and use from the Internet but none of them will fit exactly what you have in mind. The best approach seems to be to choose a template that is close enough to what you have in mind and then modify its underlying code to suit your requirements.

I have changed the skins of my three Blogger blogs and in only one of them had I made very minimal modifications. In one of them I had to try as many as four templates and yet the last one that I used still had some minor bugs that I just left untouched for I honestly did not know how to resolve the issue. It was a wonderful learning experience and an eye-opening one too in the sense that I realized that there is a lot of stunning designs out there but when you use them you'll discover how broken the underlying code is.

Before you finally decide to adapt and use a Blogger XML template, make a cursory survey of the code behind the design. A good template will have a clean code underneath it with lots of comments and the CSS and HTML codes are carefully organized. Since the templates are free, you really don't expect to find one that is of high quality. Most of the templates that you will find are just adaptations from existing designs where the designer was mainly interested in coming up with an attractive design with lots left-over codes that are reminiscent of someone who is just beginning to learn CSS and HTML.

Writing codes is just like writing using words in a particular language. You don't want to read a piece of written work that is sloppily done and full of grammatical errors. Just as a good piece of writing does not contain erroneous punctuation and misspelled words, a good piece of code should not contain codes that were found to be erroneous and were just commented out and left behind by the designer.

Programming languages have their own style of writing codes that are easy to follow and understand. Just like in writing an article or an essay, you would know by reading the contents of the written work how thoroughly prepared the writer was when he wrote his written work. A highly structured and organized writing exemplifies clear thinking and a full grasp of the subject matter being dealt with in the written work. A sloppy written output results from an unprepared mind in a hurry to beat the deadline set by one's superior.

All Blogger XML templates follow a standard format that had been established by the original designers of Blogger XML templates. However, the ones that are offered for free are those that have been modified several times already by several authors resulting in a code that is unorganized and full of errors that have been propagated through several generations of work done by different persons. Some templates are full of useless codes resulting from unfinished attempts that were carelessly left behind by those who have earlier worked on the codes.

One really valuable thing that you can do with your template is to revive the crosscolumn section that has been left unused by default on most of the freely downloadable Blogger XML templates. This will prove very useful if you want to place a 728-pixel wide banner on top of your web page. Some designers have already removed this piece of code on some templates so you have to find an old template that still has the original code in it and copy and paste it immediately after the menu or the header section of the code.

I have used this trick on my three Blogger blogs and I am pleased with the results. Some Blogger XML templates feature a menu bar for RSS feeds, home page and a shortcut to the Blogger site where you can edit your blog. The unordered list that populates the menu bar can be easily removed or commented out but be sure that you retain the DIV that contains the menu bar. Otherwise, you will lose some proportion when the space occupied by the DIV is removed from the design.

Aside from the 728-pixel banner that you can place at the top portion of your page, you can also put a 728-pixel wide link list just before the content wrapper of your page. The content wrapper is the larger DIV that contains the DIV for you post as well as any number of sidebars that may be included in the design. The 728-pixel link list is one of the most effective ads that you can place on your web page. It doesn't contain ads for specific companies or business but keywords that really look like a menu bar for your page. It is really very tempting for the users to click and yet users are well disposed to click on it because it doesn't look like the rest of AdSense ads and more like links to more information related to the keyword which it is really is except that you as the owner of the blog gets paid by Google when a link list in your blog is clicked by your user. This small-footprint advertising format can be a powerful tool cleverly used by savvy bloggers.

Another useful trick that you can use is to customize the colors of your Adsense ads to match the colors of your page. This can be easily done using the page element wizard on the Blogger home page. You can look at the code behind the design to determine the hexadecimal notation for the colors used in the design of your template. However, some designers use a customized color that is downloaded from somewhere in the Blogspot domain. In such a situation, you can just use a similar color that you can search for in the Internet. The idea behind this technique is to make the ads appear as integrated as possible to your web page. Just be sure, however, that they still stand out and get your readers' attention.

While you can put AdSense ads directly below your post, for me it ir preferable to put them in the sidebars for the reason that sometimes, a user may click on the month link on your archive and when your user does this, all your posts for a certain month will be displayed. And since you are allowed only three AdSense for Contents ads on your page, priority will be given to the ads on the post itself and whatever ads you have on the sidebar is left with a blank space with no contents. This can look awkward and so I usually avoid placing an AdSense ads on the post in my blogs.

The old Blogger XML templates featured very narrow sidebars where large format AdSense ads will not fit. Thankfully, most of the freely downloadable BLogger XML templates feature wide sidebars that can easily fit 250-pixel wide ads. Don't choose templates that have narrow sidebars if you plan to put wider ads in your site. Most template download sites provide for a live demo of the template in action so you can see how wide the sidebars are by looking at the live demo. You will have more flexibility on ad placements if your template has wide sidebars.

I choose to place my 600-pixel tall AdSense ads on the right sidebar of my blog's page. I just think that the sidebar on the left feels awkward so I prefer to have my sidebar on the right. I immediately place the 600-pixel tall ad after the Google search the blog widget. Again, I just think that the top part of the right sidebar is a powerful place to put the 600-pixel tall AdSense ads. They can be made to look like real blog links by playing with their background colors and the color of their font. It would be good practice to match the link colors of the ads with the link color of your template's style sheet.

But sometimes, you won't really know if the free Blogger XML template will work for your blog or not unless you try using it in your blog. You may have to try a few templates for size before you finally settle for the one that you are most comfortable with. Don't fret if a few templates will not work for you. Consider the time you've spent tweaking the template as a wonderful learning experience. You will really appreciate how CSS and HTML work together to build up the web page by modifying a free Blogger XML template.

So those are some of the tips that I can pass on to you in case you're planning to change your Blogger blog's skin by using a new template that you can download from the Internet. I hope you have gained a few ideas on how you would go on changing your Blogger XML template in the future. Choose a visually pleasing design but look at the code also because some of the codes on the freely downloadable templates are simply broken.

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