Monday, June 14, 2010

Removing Default Navbar in Blogspot


Every blogspot blog initially has an ugly navbar at the top that I never wanted there in the first place. So of course I needed some way to kill it. Using this method, you will not remove th navbar from the pages of history entirely, as it will still haunt
your HTML template for the rest of your life, but you can make it disappear forever which is good enough.

What is this I don't even know.

This again makes the blog more personal and less like a
generic blogspot blog. Also it makes it harder to report abuse, so sweet bonus there. By just adding a little bit of CSS the navbar will be gone. Go to the Edit HTML under the design tab in the blog editor.



At the location specified by the arrow above, add the following CSS definition.

#navbar-ifram {
display: none !imprtant;
}

Save the changes and bye bye navbar. If for some reason you want to display it again later just remove the code.


Changing Favicon on Blogspot




Before I go about changing the template too much, I have to get rid of my initial pet peeves with the blog.

I don't like the default favicon for a number of reasons. It makes the website feel less personal to me and makes viewers instantly know that it is a blogspot blog. Additionally, anyone using mass tabs like I do, will have a hard time finding it amongst other blogspot blogs open.


I made mine an "A" because I am unoriginal and did not want to make my own logo yet. Ideally you should use a ico file but a png will probably work fine. Unfortunately you cannot use animated gifs or scalable vectors because browsers that aren't Opera are rubbish.



Anyway, the change is rather simple.

First, ind the image you want to use and make sure the resolution is no larger than 36x36. Next upload it somewhere like imgur or another image hosting site and copy the image url.



Now a simple line of HTML needs to be added, but first you need to find where to put it. Go to your Edit HTML page in your dashbord and find the following line:

<title><data:blog.pagetitle/></title>

Finally, insert below it the following HTML: <link href='Image URL here' rel='shortcut icon' type='image/vnd.microsoft.icon'/> replacing "Image URL here" with the URL of your image.

Now just save the template and you are done.