Blogger Hacks

So far I'm impressed with Blogger. They make blogging and changing the layout and look of your blog easy, yet they give you access to the "guts" if you want to tweak. Recently I removed the Navbar, added my own search, added stats, and changed the favicon.

The Navbar is removed (hidden, would be more accurate) by adding some code to the Template. From the Dashboard click on Layout, then Edit HTML then look for the body { line in the template code and add this code before it :

/******* REMOVE THIS WHOLE BLOCK TO SHOW THE BLOGGER NAVBAR ********
** **
**/ #navbar-iframe {height:0px;visibility:hidden;display:none} /**
** **
********************************************************************

The Navbar has a search function, so with the Navbar gone I created my own. Click on Page Elements, then click on the Add a Page Element link in the area you want the search to be. Select a HTML/Javascript element and name it Search and put the following code in the box, but change "kanyonkris" to the name of your blog:

<form id="searchthis" action="http://kanyonkris.blogspot.com/search" method="get">
<input name="q" size="15" type="text">
<input value="Search" type="submit">
</form>

Save and View the blog and the Navbar should be gone and a Search box should appear.

Adding stats (Google Analytics) takes a bit more work, but is still pretty easy. I followed these instruction.

Changing the favicon takes some work, but it's a nice addition. The favicon is that little image next to the website address. Here's the favicon for Blogger:
First you need to create the icon. There are many ways to go about this. There are some web-based favicon editors, but I used Paint.Net to start with a 64x64 pixel blank canvas and created the image with the tools available. Then I converted the image to the icon (*.ico) format using FavIcon from Pics, which also gave me an animated version. Then I uploaded the images to some webspace I have and added some code to the Template - here's the code I used:

<link href="http://www.somesite.com/favicon.ico" rel="shortcut">
<link href="http://www.somesite.com/animated_favicon1.gif" rel="icon" type="image/gif">

If you don't use an animated icon, just use the top line. Replace the URL path above with the one where your icons are stored and you should be set.