Whiskey, Tango, Foxtrot - over.: How-to-do-it

Showing posts with label How-to-do-it. Show all posts

Sunday, April 15, 2007

New three-column format in blogger. Here's how I did it. Part II.

When I installed the blogger template for a three-column blog back on Wednesday, March 28, 2007 there was a flaw that rather bugged me. I lost the blogger NavBar with its ability to search the nearly 1700 articles published in my on-line magazine. So I have corrected that. But the correction itself created a new problem. When I got the NavBar back, it covered up the title of my on-line magazine. So I had to correct that problem, too. Here is what I have done.

This article starts at the end of my previous article: New three-column format in blogger. Here's how I did it.. By the end of the first article I had the most important parts of what I wanted - a working three-column blogger template. From here it is mostly just tinkering to get it better.

Introduction - what is the problem.

I wanted a blogger blog because it is cheap (no cheaper than free), and I am used to using it. But the only formats available through blogger itself were two-column formats. I wanted one that kept the administrative stuff like previous posts and archives near the top but I also wanted to recommend books for people to check out and possibly buy. Yes, if it ever happens, I get a commission. Something I am trying to sell also needs to be near the top. A single sidebar does not provide enough space to do all that. I found a web site that offers free Old Blogger three column templates at Free Templates. I chose their template called Lonely to start from.

This source is Indonesian, written in English. Many of the comments are in an Indonesian language (I assume there is more than one) but the HTML code works quite well. Of course, a lot of the comments including mine are in English.

The class names are not in English, but since they are defined for the computer in the Header section this is NOT a problem. I did find it mildly jarring at first, until I found that I can work with a class called "judul" or "isi" and never need to know what that word means. The class definition in the header provides all the needed data in an easy-to-use form.

How I got the three-column template it up and running is the subject of my previous article New three-column format in blogger. Here's how I did it.. If you are going to try this and haven't read that previous article, go back and start there. It's really not too complicated.

This set of instructions is for someone with some experience using HTML in a blogger template, but who is not a polished web programmer. You will know a lot more when you have done this, and I try to explain "why" to do it as well as just "what" to do.

Assumptions

This article assumes that you have converted an existing blogger blog to one of isaini's free three column templates. If you followed my instructions you already have a second test blog to work with, and you have an understanding of how to

change the appearance on the screen,
test the changes using Preview, and
you have added HTML comments to your template to tell you where the blocks of HTML code for the top of the blog, the left and right sidebars, the main column and the footer are.

You are also fully aware that by adopting this isaini three-column template you are stuck with the Old Blogger format, at least for now.

Being stuck with Old Blogger means that you will have to make your changes in HTML in the template rather than using the neat "drag and drop" functions that are built into "New Blogger." But if you have gotten this far, such changes are not difficult for you and you have a lot more capability than the limited "Drag-and-Drop" options anyway.

[Bonus - social commentary for Techies - If you have gotten this far, you exhibit all the symptoms of being a "Techie." You want control of your screen, you want to do stuff others aren't doing, and you don't want to have to depend on someone else to do it for you. (The latter suggest that you are cheap.) You may well be a person who listens to National Public Radio and enjoys the show "Click and Clack with the Tappet Brothers" that explains how to keep cars running and in repair.

You also find yourself trying to explain the joys of changing HTML code on your own to your family. Their reaction, unfortunately, is for their eyes glaze over before they rapidly find that they need to leave to attend to urgent but unspecified business. Those are the polite ones. The teenagers will roll their eyes and simply walk out without any excuse. (Even the techie teenagers do this. They lack empathy for other techies at that age.) This "Techiness" is incurable. Welcome to the club.

I suggest getting a dog. They have such an in-bred need fro approval by their owner that they don't even roll their eyes as you explain how you did what you did. You will not find a family member who makes as good an audience.

Just feed the dog regularly, provide exercise, a warm dry place to sleep and occasional treats, pet or stroke him or her and they will bond with you like no non-techie you have ever met. The downside is that they tend to complain noisily if they have to sleep outside your bedroom or they are left alone too much. A second dog can resolve this latter problem.]

And now back to your regularly scheduled tutorial.

Before making these changes to your template code, make a copy of the code and save it in a safe place. I use notepad since it does not add formatting instructions to the code and creates a text file (.txt) for storage. Do I need to emphasize that you do NOT WANT TO MESS UP YOUR TEMPLATE CODE AND HAVE TO START OVER?

Two alternative solutions for providing a search engine.

The goal is to get a Google search engine that searches your blog. The best solution for blogger users is to get the blogger NavBar back. This is built into blogger and does the best job. The alternative to this is to go to Google and find the html code to put a search engine into one of the sidebars of your blog. I'll address the latter alternative first, since it is what I tried first.

The customizable Google search engine.

Google offers a customizable search engine for installation to your site. The instructions and code writer can be found at "Custom Search Engine". Provide a ~short~ name and description to appear on your blog. Follow the guidelines. The "Keywords" ask you to predict what your readers are likely to be looking for on your site. They are used to promote specific items when reporting the results of a search. Guidelines for keywords are found at Choosing good keywords.

Once you have set up the custom Google search engine, go to "My Search Engines" and then "Add this search engine to your blog or web page". This location allows you to adjust what the search engine will look like on your blog. You can change the height, width and color of the border. Then when you are happy with the Preview, go to Get the Code". This is the code you will enter into the template of your blogger site.

I placed mine at the top of the left-hand sidebar. There seems to be a minimum width for the search engine, as there is for the Amazon book search that I already have in the left-hand sidebar. When I tried to put the search engine at the top of the right-hand sidebar, the entire site became too wide to appear on the screen all at once.

The actual installation into the template code was just like the method described in Addendum #4 03 29 2007 of the previous article: New three-column format in blogger. Here's how I did it. Using cut-and-paste, I cut the container and heading from the lower-right sidebar, pasted it into the upper left sidebar, erased the code for the site meter and inserted the code from the Google Get the Code step above.

This works pretty well. Since you are reading this, all you have to do is scroll up and look at the top of the left-hand sidebar and ... you won't find the custom search engine there. That's because I learned how to get the Google NavBar back. That's the second alternative.

But if you want to see how I have inserted the code for the custom search engine, go to View at the top of the page, go down to Page Source and scroll down to the left-sidebar code where the code can be found between the title "Search by Google" and "End Search." I can restore the search engine anytime I wish by removing the HTML beginning and ending comment code. Which brings us to the second alternative .

Restore the Blogger NavBar

Courtesy of Isnaini, the creator of the template I am using, I have learned how to restore the blogger NavBar. It's really quite easy.

Go into the HTML for the template and remove the code < /noscript> at the < head> < /noscript > and < noscript > code before and after < body > tag < noscript > < body > < /noscript > . If you go back to the View source for this website, you will see that I did not erase those instructions. I used the [< !-- and --> ]HTML comment tags to remove those instructions from active use, but left the instructions in place to remind myself what I had done.

But the NavBar is back! Problem solved, right?

I wish.

With the return of the NavBar, it covers up the title to my web magazine. The score is now "NavBar = +1, Title = -1." So it is back to the template again.

The title is controlled by the block of code that inserts the image at the top of the web site. That is:

< td > < table width="100%" border="0" cellspacing="0" cellpadding="0" >

< tr >
< td width="449" > < img src="http://i1.tinypic.com/mma788.jpg" width="449" height="150" > < /td >

[Note: the following code in green controls the display of the website title.]

< td align="right" valign="top" background="http://i1.tinypic.com/mma7bb.jpg" > < br > < br > < h1 > < a href=" < $BlogURL$ > " > < $BlogTitle$ > < /a >
< /a > < /h1 >
< h2 > Per < a href="http://www.thetalentshow.org/archives/001896.html" > FEC regulations < /a >, this is an online magazine for political reports, analysis & opinion, with some other interesting items. < br > < /h2 > < /td >

< /tr >
< /table > < /td >

Add one or two line breaks [< BR > shown in red above] just before the < h1 > for the title. This move the title down from behind the NavBar.

Since I wanted to keep the comment that describes the purpose of my on-line magazine [placed on the page by the blogger code < $BlogDescription$ >], I also eliminated the code that displays the left side of the image in the header [shown above in light blue] and changed the code "right" shown in lightblue to "center".

By use of the line breaks and by changing the size of the fonts displayed by the H1 and H2 codes defined up in the head of the blog I was able to get a satisfactory heading for my on-line magazine.

Try it, and you will be amazed at how much better you understand the blogger HTML code when you are through. I also have a great deal of appreciation and admiration for Abdul Isnaini who wrote the "Lonely" template in the first place and was kind enough to post it for free download.

So that is how I got my Blogger NavBar back.

Wednesday, March 28, 2007

New three-column format in blogger. Here's how I did it.

As previous readers can see, I have revised the format of Politics Plus Stuff. I like the price of Blogger, and with the recent improvements it has become a lot more reliable. I haven't lost a posting since the new system was installed. [But I still copy every lengthy post to Word before trying to save it, just in case.]

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.
XML error message: The element type "head" must be terminated by the matching end-tag."

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.

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:

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!.

There it is. Simple as 1 - 2 - 3 - 4 - 5 - 6.

[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 Page

and 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: ~~#999933;" (which is the sort of olive drab you will see that represents my links)~~ [See Addendum 5, below.] and I changed the "color: #7B9685;" in "textarea, input, select, option, button" to "color: #000000;" (which is Black.) that represents all my text.

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.".