Monday, July 14, 2008

First Hack: The Vanishing Nav Bar

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

Jai Gurudeva!
love
bawa

8 comments:

  1. Thank u very much will implement this one soon... and bau.. i told my freinds to click on my ads... and gues wat thay just love me so much that they kept clicking :) .. too often ... not surprisingly Google was very happy deleting my adsense account :(... "to protect the interests of their advertisers"... heehehe thats how google is the fastest growing firm.. duping publishers revenue and charging the poor advertisers 2$ a click..

    ReplyDelete
  2. Woowwww Bau, Tusi gr8 ho..

    I had experimented with this code earlier and ended up in disappearing the nav-bar completely. I could not auto-hide it.
    The code in ur blog finally worked. Thnxx a lot bau. I promise I'll be a regular visitor to ur blog till it is active.

    ReplyDelete
  3. cool .. been wondering how it was done at bawandinesh .. :)
    amazing .. will definitely try it on my blog ..

    ReplyDelete
  4. hey thanx bau...was looking for this tip for sometime...and obviously it worked...thanku thanku...

    love
    anupam.

    ReplyDelete
  5. Hey :)

    Thats a cool tip... It worked in my blogs :)

    Thank you so much !!!!!

    Guru Ang Sang,

    Dilkhush

    ReplyDelete
  6. Its a cool trick....is there a way to fix the empty space left when the nav bar does the disappearing act? by default it is filled by the default blog background image.
    Shubham
    http://techutney.blogspot.com/

    ReplyDelete
  7. This gave some error in my case. I am using firefox on a fedora operating system.
    Will check out again and inform.

    ReplyDelete
  8. Thanks Mr. Magician :)
    Jai Gurudev...
    You rock n rule.....

    ReplyDelete