Playing With Blogger Navbar

By default Blogger blog comes with Navbar at the top. It does allow users to perform some basic functions like share, search and so on. With little snippets of code you can make Navbar look more dynamic. Lets see how we can do it.

Float the Navbar:

If you like the Navbar to be displayed even when you scroll the page then add the following code to your template before ]]> </ b: skin>.

# Navbar-iframe {
left: 0;
top: 0;
position: fixed;
}

You can also place this Navbar at bottom of the page. Simply replace top:0 with bottom:0; Either of these codes shows the Navbar even when you scroll the page.

Also see 3 popular floating or fixed bookmarking bar for blogger/blogspot blogs.

Navbar fade-in and fade-out when hovering mouse:

Other option you have is keep the Navbar hidden initially and have it appear only when you move your cursor on it. Using transitions fading effect is added to the Navbar.

Add the following code before ]]> </ b: skin> :

# Navbar-iframe {
opacity: 0.0;
filter: alpha (opacity = 0, FinishedOpacity = 0),
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
# navbar -iframe: hover {
opacity: 1.0;
filter: alpha (Opacity = 100, FinishedOpacity = 100),
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}

Sliding Navbar:

Slightly similar to the above option Navbar is hidden initially and slides down only when mouse hovers over the area at the top.

Also see Sliding social profile button for blogger/blogspot blogs.

Add the following code before ]]> </ b: skin> :

# Navbar-iframe {
position: absolute;
top:-30px;
height: 60px;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
# navbar-iframe: hover {
top: 0,
height: 30px;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}

Change color of Navbar:

Although Blogger gives different colored Navbar, you can tweak a little bit and allow it to change color only mouse is hovered.

Add the following code before ]]> </ b: skin> :

# Navbar-iframe {
background: # B40431; / * Color navbar * /
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
# navbar-iframe: hover {
background: # 000; / * Color navbar when hovering * /
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}

These fading effects only work in modern browsers. Users using older versions of Internet Explorer will not have any of these fading effects.