Friday, January 30, 2009

The Vanishing Nav Bar

Bookmark and Share

I am assuming that you have chosen the Minima template...

This is a very simple hack, basically what it does is makes that ugly navigation bar at the top of your blog vanish... but if you hover your cursor near the top, the bar will magically re appear... Try it at the top of this blog and see if you like the effect for your own blog!

Ok, here is what you do:

1. Click on Customize on your Navigation Bar (Look at the top right of your blog)
2. Click Layout
3. Click Edit HTML
4. Put a check mark on the Expand Widget Templates box (not needed, but its a good habit)
5. Click Download Full Template (ALWAYS do this before attempting anything please)

Ok, now if you start to scroll down in the box where the HTML stuff is written, after the first section of comments and things you will come across a lot of "Variable Definitions"

It will look something like this:

/* Variable definitions
====================

type="color" default="#dd9" value="#aa8833">

type="color" default="#333" value="#000000">

type="color" default="#684" value="#ffff66">

type="color" default="#874" value="#ffffcc">

type="color" default="#a83" value="#aa8833">

type="color" default="#c80" value="#ffffcc">

there will be a lot more of this too...

Immediately following this will be:

body {
background:$bgcolor;
margin:0;
color:$textcolor;

and so on...

You need to cut and paste the next 2 lines of code just before body{

#navbar-iframe{opacity:0.0;filter:alpha(Opacity=0)}
#navbar-iframe:hover{opacity:1.0;filter:alpha(Opacity=100, FinishedOpacity=100)}

so that it looks like this:

#navbar-iframe{opacity:0.0;filter:alpha(Opacity=0)}
#navbar-iframe:hover{opacity:1.0;filter:alpha(Opacity=100, FinishedOpacity=100)}

body {
background:$bgcolor;
margin:0;
color:$textcolor;

The green is what you have pasted in, the blue is what was already there...

Just in case you are wondering, you don't need to make it that colour. I have used the colours just to make things clearer :)

Click the Orange button bottom right: Save template

Click View Blog, and voila!! Your Navigation Bar will have started doing it's vanishing act!

I have used this from a hack i saw at Bloggeratto's

Enjoy...


Crusher!!

0 comments:

Trace my IP address