Why change?
My big irritation with blogger was that the available templates were all two-column things, and they left a lot of real estate of the screen blank. With the larger monitors everyone gets today, that is a waste. Trying to put what I wanted into a two-column template was getting messy.
Find what you want.
So I was searching the net for a solution, and Voila! I found a blogger blog called Free Templates. Rummaging around this blog I found a template close to what I wanted, called Lonely. [Note the list of other templates on the right side. Check them out and see what you like.]
Test the template without damaging your current site.
I downloaded the "Lonely" template as a zip file, unzipped it, and set up another blogger blog just for testing this template. [I have over 1600 articles that I have posted on Politics Plus Stuff. There is NO WAY I am going to put a strange template on that original blog without be pretty sure it worked. I don't want to risk the loss of over two years of effort.]
Next I went to the Template tab of my new test site, and the first thing I did was copy all of that template over to a notepad file and saved that file. [Notepad uses .txt files with no extra formatting.]
The file label I used was "Backup original template from Testblog.txt" If something goes really bad and I can't fix it, I can simply erase my new template in the test blog and replace it with this backup. I also save working templates periodically with the new template after I have a few changes to it that I know work. [The Theory - When I am finished I will have a whole set of files that are "working templates," from oldest to latest. Each should be a working template that can be plugged in to replace a later one that isn't working. I only have to update the changes, not the entire thing. More frequent backups mean fewer changes to update when something goes wrong.]
After saving my backup, I then erased the entire template in the "Edit Template" box of my testblog and pasted in the new one I had just downloaded from Free Templates into the template space. The first thing to do is to save the template. [Using "Save Template Changes" at the bottom of the "Edit Template" box.] Of course, it didn't work.
The first problem
These templates from Free Templates are old Blogger templates, and I have converted to the new blogger. The first time I tried to save the new template I got the following error.
"Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.After extensively digging through the HTML of the new template, I decided the blogger parser was lying to me. The "head" WAS matched by a "/head". Something else was wrong. I still to this day do not know what it was.
XML error message: The element type "head" must be terminated by the matching end-tag."
As so often happens to me these days, the wisdom of my first Platoon Sergeant popped into my head. "When all else fails, Lieutenant, Read the Damned Instructions!" So I went back to the website I downloaded the template from, and lo and behold, there they were. Instructions:
There it is. Simple as 1 - 2 - 3 - 4 - 5 - 6.How to use Classic Blogger Templates in New Blogger
- Login to New Blogger with your Google account.
- On your Dashboard choose blog you want to edit, Click on Layout, you’ll go direct to Template tab where blog you want to Edit.
- Choose the Template tab of your blog then click on Edit HTML.
- Next scroll down to the end of your page and choose Revert to Classic Template.
- Copy all the code of the template you wish and paste it into your blog.
- Click on SAVE TEMPLATE and you are done!.
[You wanted the traditional 1 - 2 - 3?
You Luddite! Those were the primitive days. Take what you can get. There are always more steps in programming computers! That's because it is easier to find the "bug" in a set of many small steps than it is if the steps are each large ones. And "bugs" are always with us.]
Following the above instructions worked easily. But remember, [Warning.] you are still running an old blogger template, so some of the neat design features offered by the New Blogger are not available, and never will be. Of course, you don't need them. You can get your hands dirty (with electrons - no grease) and dig into your own template in the future.
Now you have a three-column blog up and running. Yippee! All that is needed now is to customize it to suit yourself. Oh, and then transfer the new template from testblog to the original blog. [Easy!]
Addendum #1 11:09 PM CDT.
OK. At this point I should have converted the testblog over to the New Blogger format. This is because if I do it later, I will lose all or most of the modifications I have made after this point.
Addendum #3 03/29/2007 at 1:15PM CDT.
Yuk. Forget going New Blogger if you want three columns. If you switch to New blogger you will be stuck with the very limited selection of templates that blogger itself presents. So I was right the first time.
Understand your template.
Once I got the downloaded template up and running on the test site, I went through it and determined what parts of the template controlled each column on the screen. Then I put comments into to code so that I could go back and find each separate segment. [Warning - comments placed in between items in a block of code will sometimes prevent that block from working properly. When you try something, it works, then you comment the code and it doesn't work, the comment may be the problem.]
Finding the parts of the code for each section of the screen is easy, but a little time-consuming. Just remember, the time spent documenting the template now will save a lot of time later on.
Go to the Template tab, then when it is opened go to Edit your Template. Click on the "Preview" button at the bottom of the Edit your Template box. Your blog will appear either as a new tab on your browser or as a new implementation of your browser. (Which one depends on the browser you use and how your browser is set.) Then close that new screen (Avoid clutter when you can) and you will go back to the previous screen where you were before the preview. This should be the Edit your Template box.
In the Template, scroll down past the "/style" and "/head" tags and look at the first "table" instruction. It will contain this:
"table width="100%" border="0" cellspacing="0" cellpadding="0" "What you are looking for is that ' border="0" ' instruction.
Change the "0" to "21" (or some other number significantly larger that zero), go to the bottom of the Edit your template box and click the "Preview" button. The template I use then shows a 21 pixel line around the entire blog. So that "table" instruction controls the total page.
Put a comment that tells you that the "Table" instruction containing the border = "21" describes the entire screen. Mine says:
Full Pageand is surrounded by the necessary comment tags so that the HTML parser will ignore it. Use any description you will be able to understand if you are looking at someone else's code, because that's what it is like when you come back to this six months later. [Warning! -- Check the screen again - using Preview - after adding the comment, as the comment itself can effect the action of the code. If it does, then move the comment to the end or beginning of the block of code. Make sure you make notes each time you change ANY code, so that it is easy to switch back to something that works when a change doesn't work right. I find my best notes are comments I make in the code where I will need it next time.]
Change the "21" in the border directive of the "table" instruction back to a "0", check this by going to "Preview" that the bottom of the box, and if it works, scroll down to the next "Table" instruction and do the same thing. Keep going until you have identified the code for the "Top block", "main column", both the "left and right sidebars" and the "footer" and have them labeled with comments so that you can find them again six months later. Each of those screen elements is controlled by a small block of code, so when you have a problem you have saved yourself a lot of time finding the code that needs to be worked on. Now you can move on to customizing your template.
Copy the links and such you want to keep from the existing blog to the test blog.
This is the first time you will be opening the main blog you want to transplant the new template to. [Warning - To avoid messing up the existing working template of that main blog, copy that template to another Notepad file. You will work copying links and code from the copy, not the real blog. Label the backup copy of the main blog original template clearly. Then, later, if the template transplant goes bad, you have not lost your only copy of the working template of your main blog.]
After copying the existing blog template to a .txt file, then decide which links and text will be migrated to the new format. Plan this and perhaps make a sketch of what the new three-column format will look like. [Just a suggestion. I didn't do that. It didn't seem complicated enough. But I have experience.]
Then copy the links from the saved txt file (Or even a copy of the saved template file if you are paranoid. This is not a problem as long as the titles of the backup files show source, date and time, and you have enough memory for a lot of files. But keep your backups organized so that you can find whatever the latest working copy is at any time.) of the old blog's template into the new template on the Testblog. Do it one block at a time, and after each transplant is completed, review the blog. If it looks right, Save the blog template and look at it again. Do this in small chunks so that if the template won't save or the look is wrong, there are only a few changes that need to be checked to find the problem. Keep going until the new template is the way you want it.
Finally, transfer the testblog template into the original blog.
Before attempting the final template transplant, again copy the template from the original blog to a txt file. You may have screwed the earlier copy up as you worked with it. It is easier to avoid such a problem than it is to have to fix it. Always go back to a working copy that has not been worked on if you can.
The new blogger has a button to save the template for you. But you are working with an Old Blogger template, so forget New Blogger. You are stuck with the older copy-and-paste to a Notepad .txt file because you are working in Old Blogger. This will not change. Sorry. This is the price of a three-column template, at least for now.
Now that you have the original blog template [that you know worked] saved, erase the template in the Edit your template box of the real blog you want to change, then copy the template from the testblog that you know worked into the Edit your template box of the original blog. Then do Preview to see what it looks like.
If it worked, then do a Save Template Changes and follow it with another Preview and you can see what the blog looks like. If you have made all your changes, you are finished with the big stuff.
If you use IE Explorer, you might want to try calling the blog up under FireFox, or vice versa, but both should work.
See? That wasn't hard, was it?
One last thing.
I didn't like the text colors the author chose. They looked nice, but I found them hard to read. It took me about two hours to find that if I went to the top [header] section and changed the "color: #A3BAAA;" in "a:link, a:active, a:visited" to "color:
Addendum #5 03/29/2007 2:01PM CDT
I changed the "a:link, a:active, a:visited" to "color: #993300" which is brighter and easier to read.
Also, I had forgotten to mention that I went to the section in header titled "Body{... " and changed the "color: #666666;" there to "color: #000000;" [This allows text to become pure Black.] This format is in the CSS portion of the header, and controls the entire site if not changed locally.
Miscellaneous stuff
If you don't know about HTML color codes, here is what I got when I googled HTML colors. Check it out and look at the Hexadecimal codes together with the colors they produce. Each pair of Hex numbers determines Red, Green or Blue, with 00 being a complete absence of that color and FF being the strongest color. FF0000 is Red, 00FF00 is Green, and 000FF is Blue, with 000000 as Black and FFFFFF as White.
I think I have either explained how to avoid mistakes or demonstrated how to correct the ones I made doing this. If anyone can make a mistake that I didn't and that I didn't head off, please leave a comment. To sort of rephrase Don Rumsfeld, I know what I know, but I don't know what it is that I don't know. All I can write is what I know.
We learn from our errors, especially in computers and as teenagers. I'll be happy to learn what you know and be glad to learn from the errors that taught you. So please share.
Addendum #2 11:12 PM CDT
The other thing I forgot to do was reinstall my site meter. The easy way to do that would be to have switched to the New Blogger format back when I first got the new template working and before I had put all the links from the old format back in.
Addendum #4 03 29 2007 at 1:20PM CDT.
I went back and installed the site meter counter that I used previously in a new container at the bottom of the right-side column. That involved creating a new container by a copy-and-paste from the container that displays the "Powered by Blogger" and Template by "Free Templates," erasing those two items and replacing one by the code provided by site-meter.
In case you haven't guessed, I got the overall format and general look of the site pretty much the way I wanted it yesterday. Today I have been going back and getting the details to the site corrected. Then I am correcting or adding to my article here to explain what I have done. That explains the numerous "Addendums."
If I were writing a commercial program with instructions, the final step would be to consider everything above here as just notes, then go back and write a final draft of the documentation. I don't want to do that here, since I am providing this information to people who don't code HTML regularly. I want to demonstrate the process as well as provide instructions.
Needless to say, I hope someone finds this useful.
Oh, and if anyone finds a source of New Blogger three-column templates, please let me know.
[Note: March 30, 2007 9:30 AM - I have been smoothing the language of this article today. Individual changes are not indicated as no real substance has changed.]
[Addendum #6 April 05, 2007 6:58 CDT] Another thing with this three column template - I have lost the blogger navbar with its ability to do a google search of my blog or a full google search. I am still searching for a correction to this. Anyone who finds it, leave me a comment.
To get the Blogger NavBar back, or to add a Google Custom Search Engine, go to " New three-column format in blogger. Here's how I did it. Part II.".
No comments:
Post a Comment