Navbar Show - Hide

From Bloggerhacks

(Difference between revisions)
(Description)
(Method)
Line 29: Line 29:
==Method==
==Method==
 +
 +
For Blogger v2.0
# Obtain code from the [http://bloggeratto.blogspot.com/2006/05/hovering-peek-boo-blogger-navbar.html homepage].
# Obtain code from the [http://bloggeratto.blogspot.com/2006/05/hovering-peek-boo-blogger-navbar.html homepage].
Line 34: Line 36:
# Insert JavaScript snippet into the head element of your [[Blogger template]].
# Insert JavaScript snippet into the head element of your [[Blogger template]].
# Insert other code in your [[Blogger template]], per the instructions.
# Insert other code in your [[Blogger template]], per the instructions.
 +
# Re-publish your blog.
 +
 +
If you choose the Pure CSS version, do the same procedure and eliminate steps 3 & 4 as indicated for below.
 +
 +
For Blogger v3.0
 +
 +
# Obtain code from the [http://bloggeratto.blogspot.com/2006/10/blogger-v30-hovering-peek-boo-blogger.html homepage].
 +
# Insert styles into the stylesheet portion of your [[Blogger template]].
# Re-publish your blog.
# Re-publish your blog.

Revision as of 09:09, 31 October 2006

Contents

Version

v1 & v2

Platform

For use with Blogger v2.0 and v3.0 powered blogs.

Author

Collaboration between Avatar and Aditya

Homepage

Hovering Peek-A-Boo Blogger Navbar For Blogger v2.0 Blogs

Blogger v3.0:Hovering Peek-A-Boo Blogger Navbar For Blogger v3.0 Blogs

Skill Level

You must be comfortable with editing your Blogger template.

Description

Blogger v2.0 version uses CSS and JavaScript to add "hide / reveal" attributes to the Blogger NavBar, which cause the Blogger NavBar to be hidden as default and to appear when a user hovers their mouse over the top of your page.

Now also offer a pure CSS option.

Blogger v3.0 versions uses just CSS to add "hide / reveal" attributes to the Blogger NavBar, which cause the Blogger NavBar to be hidden as default and to appear when a user hovers their mouse over the top of your page.

Method

For Blogger v2.0

  1. Obtain code from the homepage.
  2. Insert styles into the stylesheet portion of your Blogger template.
  3. Insert JavaScript snippet into the head element of your Blogger template.
  4. Insert other code in your Blogger template, per the instructions.
  5. Re-publish your blog.

If you choose the Pure CSS version, do the same procedure and eliminate steps 3 & 4 as indicated for below.

For Blogger v3.0

  1. Obtain code from the homepage.
  2. Insert styles into the stylesheet portion of your Blogger template.
  3. Re-publish your blog.

Sites Using This Hack

Edit this area and add your own link if you are using this hack.

Personal tools
FreshTags