Redesigning my Blog with a New Blogger Template
I Spent the afternoon redesigning my blog. I cruised around the internet for about half an hour doing some research and found many different Free blog templates. I was looking for a 3 column blogger compatible template in particular, because I like the way the 3 column layout looks.
There are some very nice free blogger templates out there. I selected a few that I thought might work and downloaded them, then proceeded to load them up on one of my test blogs. I decided I liked this template best and started the task of integrating it into my blog.
Warning: If looking at HTML code makes you want to run home to mommy, you may need to hire a professional to install a custom blog template, you need to at least be able to search through html code and replace some text and hyperlinks that may not be correct after you upload a new template to your blog. You don't need to know html, you just need to know enough to look through it for items that may reference links that have nothing to do with your blog.
Finding Compatible Templates
When searching for a blog template make sure the one you want to use will work for your blogging platform. There are some very nice wordpress templates, however they won't work on blogger without some serious modifications. Here are some great templates compatible with Blogger, some have been converted from very nice WP templates. Blogger Blog Templates
If you are looking for a professional level Wordpress Template, I recommend Theme Forest.
Backing Up Your Old Blog Template
Nothing like a good backup to save the day when you need it. Before you begin the task of integrating a custom template its a good idea to back up your current template. I also keep offline backups of my templates and all the articles I have written, just in case.
To backup your template go to:
Dashboard -> Layout ->Edit Html ->Download Full Template.
This will save your template in a state that you can reload in the event that you want your old blog template back, or you can load the saved template onto a different blog.
The easiest way to backup the blog articles you've written is to look at your RSS feed. If you click the RSS feed icon at the top of your blog you should see every article all in one long feed. Your blog articles should not be affected when you upload a new custom template, I just like to back stuff up to be safe.
In addition to backing up the template itself you may want to back up some of the Widget data, because you may have custom widgets that you will want to add back in after you upload a new custom template. To get the widget data go to:
Dashboard -> Layout -> Page Elements
Then click edit on any widgets you want to save, and make sure to cut and paste any custom html, or links into a temporary text file.
Unless you know a lot about the widgets on your blog, it might also be a good idea to make some written notes of all the widgets you are using, so that you can replace them later. Especially the name and types of each widget.
Installing a New Fresh Custom Blog Template
Now your old blog is all backed up
Once you find and download a blog template you like, decompress it and unzip the .xml file into a folder that you can find easily. Then log into Blogger and go to Dashboard -> Layout -> Edit Html, click Browse, then find your xml template file, select it and then click Upload.
At this point you may see a warning that some of your widgets are going to be deleted. That is when you look at the list and double check that you have all of those widgets saved somehow. When you are confident that you can replace any widgets that might get removed, then it's ok to proceed with completing the template upload procedure.
Integrating the New Blog Template Design
Reload your blog front page and make note of all the things that may not be correct, like links that go to different sites than you want, or advertisements that do not have the correct affiliate codes. Many of the incorrect items can be changed through the widgets that are now installed under the Page Elements Tab.
Try to correct what you can through the widgets, be a little careful here, you may see some widgets that appear to be empty, but they are working from the template code. Sometimes with those 'empty' widgets you can input the desired html code directly into the widget and it will come out perfectly. For instance a widget that displays a banner ad in the top of your page.
After correcting what you can through the widgets and removing widgets you don't like or don't need, there may still be items in the template html code that need to be changed. To view the template html code go to:
Dashboard -> Layout -> Edit Html then check the box Expand Widget Templates.
Going through the Html Code
Look through the html code at least one maybe 2 times real carefully and remove or correct any items that obviously point to the wrong website, reference an affiliate id other than your own, or contain text or meta data that is not correct. I like to expand the widget temples checkbox, then I copy and paste the whole chunk of code into a local text file for editing, that way I can use my local editor's search functions to find little bits of text or links and change them to suit my blogs layout.
I keep one copy of the un-modified code in a local file in case I make a mistake, and edit the code in a second text file. When I've made a significant change, I paste the code back into the blog 'Edit html' page and click save template. Then I reload my blogs front page in another firefox tab to insure that each change looks the way I want. Unless you are very skilled, do not make a whole bunch of changes all at once, make small changes and test as you go, so you will know exactly where any mistakes that might be your fault are.
Redirecting Urls that Call Graphics
There may be references in the template code to little graphics that effect the way your blog looks. These images may be hosted on a third party free hosting server under someone elses account. You may want to redirect these url references in the template code to protect the look of your blog. That way your not hot-linked off of third party image hosting which you have no control of. If the image host stops serving a particular little .gif that your blog template relies on, your blog will look like junk until you fix it.
To redirect these little links, you must find them in the html code, if you look carefully you will find them, they look sort of like this:
'http://img236.imageshack.us/img236/8066/468x60xr1.gif'
(That one was actually a kind of space holder for a banner ad which I just changed to a real ad banner hot-link of my own)
Once you locate these little graphics urls, you can copy and paste the reference url into a browser window and save the little graphic with a "r-click save image as" operation. Sometimes its a little tricky as they can be quite small. Once you save the graphic then you can host it on your own image host where you will have more control over it, then change the template code to reflect the new location of the graphic.
Always a Better Blogger Template
I think I cleaned up this Blogger template pretty good, there are still some fairly minor things I still want to change. Then, naturally as I was doing a little more research to make this article complete, guess what, I found an even better template! It figures, now I'll have to do it all over again, maybe I'll just leave it this way, it looks pretty good, what do you think?
