Template Editato By Force Downs

Key Lime Digital Designs: Make Your Blogger Navbar Disappear- A Tutorial

Key Lime Digital Designs: Make Your Blogger Navbar Disappear- A Tutorial

Link to Key Lime Digital Designs

Make Your Blogger Navbar Disappear- A Tutorial

Posted: 06 Oct 2011 12:18 AM PDT


Guest Post By: Patty Trends

You have probably noticed that as soon as you access Patty Trends blog the Blogger navigation bar (aka “Navbar”) on the top of the page disappears. Cool huh?  That navbar actually used to bother me, it just didn’t make my blog look nice and customized… But I heard that if you just take the navbar off you can violate some of the Blogger terms of use. Ooops… But guess what? Try moving your mouse close to the top where the bar is supposed to appear? What happens? It drops down!!! No violation done, right? ;) The bar is still there but you can’t really see it! And you can still quickly access your blog dashboard and the other navbar links without having to open it in a different tab. Would you like to have a “disappearing navbar“ on your blog too? Here is the best and easiest way I found to accomplish that:

 Go to your blog dashboard and click on “Add a Gadget”:
 Add the HTML / JavaScrip Gadget (Just click on the “plus” sign):
 Copy and paste the following code inside of the content box that pops up: 
<!– DROPDOWN NAVBAR –>
<!– stylesheet for FF2, Op9, IE7 (strict mode) –>
<style type=”text/css”>
#navbar {
display:inline;
width:100%;
position:absolute;
background-color:transparent;
top:-30px;
left:0px;
height:60px;
z-index:999999;
}
#navbar:hover{
top:0px;
height:30px;
}
</style>
<!– stylesheet for IE6 and lower –>
<!– (not supporting element:hover) –>
<!– first, unhide the navbar through css –>
<!– second, hide the navbar and mimic –>
<!– the effect with javascript, if available –>
<!–[if lt IE 7]>
<style type=”text/css”>
#navbar {
height:30px;
top:0px;
}
</style>
<script type=”text/javascript”>
var navbar = document.getElementById(‘navbar’);
if(navbar){
navbar.onmouseover = function(){
navbar.style.top = ’0px’;
navbar.style.height = ’30px’;
}
navbar.onmouseout = function(){
navbar.style.top = ‘-30px’;
navbar.style.height = ’60px’;
}
if (navbar.captureEvents){
navbar.captureEvents(Event.MOUSEOVER);
navbar.captureEvents(Event.MOUSEOUT);
}
navbar.onmouseout();
}
</script>
<![endif]–>
<!– end dropdown navbar –>
  Then click on save:
And there you have it!! Easy huh? You now got your own customized hidden navbar!
- – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - -
Thank Patty for sharing this with us!
 -Readers SERIOUSLY make sure you check out Patty’s Blog. She has [awesome] tutorials!
[click on these image to be taken to her tutorials]
   

→ GO to Patty Trends

 

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)