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.
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.
1 comment:
Post a Comment