Navbar Show - Hide

From Bloggerhacks

(Difference between revisions)
Line 1: Line 1:
-
This hack hides the blogger nav-bar, & causes it to appear when you hover-over the top part of your template.
+
==Version==
 +
v1
-
==Version:==
+
==Platform==
-
1st version. Later version is promised / proposed for IE7
+
For use with [[Blogger]] blogs.
-
==Platform:==
+
==Author==
-
Use with [http://www.blogger.com Blogger] Blogspot Blogs. Works with multiple browsers
+
Collaboration between [http://www.aditya-mukherjee.com/ Aditya] and [http://bloggeratto.blogspot.com/ Avatar]
-
==Author:==
+
==Homepage==
-
Collaboration between [http://www.aditya-mukherjee.com/ Aditya] and [http://bloggeratto.blogspot.com/ Avatar]
+
[http://bloggeratto.blogspot.com/2006/05/hovering-peek-boo-blogger-navbar.html Hovering Peek-A-Boo Blogger Navbar]
-
==Homepage:==
+
==Skill Level==
-
[http://bloggeratto.blogspot.com/2006/05/hovering-peek-boo-blogger-navbar.html Bloggeratto]
+
You must be comfortable with editing your [[Blogger template]].
-
==Skill Level:==
+
==Description==
-
You will need to be familiar with the layout of basic HTML documents, and comfortable making basic edits to your Blogger template.
+
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.
-
==Description:==
+
==Method==
-
Uses CSS and Javascript to add hide / reveal attributes to the nav-bar that Blogger adds to all blogspot blogs. Causes the nav-bar to be hidden as default, and to appear when a user hovers their mouse over the top of your page.
+
# Obtain code from the [http://bloggeratto.blogspot.com/2006/05/hovering-peek-boo-blogger-navbar.html homepage].
 +
# Insert styles into the stylesheet portion 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.
 +
# Re-publish your blog.
-
==Method:==
+
==Sites Using This Hack==
-
3 template edits required, all of which are spelled out in detail in the [http://bloggeratto.blogspot.com/2006/05/hovering-peek-boo-blogger-navbar.html Bloggeratto] how-to. Add two lines of CSS to your stylesheet, a script inside your head tags (which must be wrapped in <script> tags), and finally substitute your opening body tag for the one specified in the how-to.
+
* [http://bloggeratto.blogspot.com/2006/05/hovering-peek-boo-blogger-navbar.html Bloggeratto]
-
==Sites Using This Hack:==
+
Edit this area and add your own link if you are using this hack.
-
[http://bloggeratto.blogspot.com/2006/05/hovering-peek-boo-blogger-navbar.html Bloggeratto]
 
[[Category:Hacks]]  
[[Category:Hacks]]  
[[Category:Navbar]]
[[Category:Navbar]]

Revision as of 19:43, 25 June 2006

Contents

Version

v1

Platform

For use with Blogger blogs.

Author

Collaboration between Aditya and Avatar

Homepage

Hovering Peek-A-Boo Blogger Navbar

Skill Level

You must be comfortable with editing your Blogger template.

Description

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.

Method

  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.

Sites Using This Hack

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

Retrieved from "http://72.14.177.54/Bloggerhacks/Navbar_Show_-_Hide"
Personal tools
FreshTags