Sunday, April 17, 2011

How to show, hide , auto hide and change width of Navgar ( Navigasi Bar )

what is Navbar?


Navbar or navigation bar (also known as a links bar or link bar) is a sub region of a web page that contains hypertext links in order to navigate between the pages of a website.

Since it usually appears on all or at least on several pages of a website, it is one of the key design-elements of websites – in terms of usability as well as visual attractiveness.

Navbar or Navigation Bar is the standard of facilities owned by Blogger.com.The Location is in the top of the blog. which function to enable us to return to the main dashboard and then look for the blog url address of our friends the other, it could be to automatically search for the next blog, it could be to customize your blog and saw the other new entries, approximately Navbar used for quick access / provide facilitate function. maybe it's a little review of Navbar function.

With it we can easy to go back to the dashboard and search something easly

ok, i will show you,,
1. How to show Navbar
    a. First Login into blogger.com
    b. click Layout ==> Edit HTML ==> Expland Widget Templates
    c. Find ( CTRL + F ) code or similar code like below
     # Navbar, # navbar-iframe {
     height: 0px;
     visibility: hidden;
    display: none;
     }   
     d. Erase code above, then save templates, and See the results. :D

2. How To Hide Navbar
    a. First Login into blogger.com
    b. click Layout ==> Edit HTML ==> Expland Widget Templates
    c. Put Code bellow to the up of code ]]></ B: skin>
 / * Remove the navbar ----------------------------- * / # navbar-iframe {height: 0px; visibility: hidden; display: none}
   d. If you have finished , Save Templates and see the results. :D

3. How to make auto-hide navbar
    a. First Login into blogger.com
    b. click Layout ==> Edit HTML ==> Expland Widget Templates
    c. Put Code bellow to the up of code ]]></ B: skin>

# Navbar-iframe {opacity: 0.0; filter: alpha (Opacity = 0)} # navbar-iframe: hover {opacity: 1.0; filter: alpha (Opacity = 100, FinishedOpacity = 100)}
    d. Save templates, and see the results. :D

4. How to Change  Width of Navbar
    a. First Login into blogger.com
    b. click Layout ==> Edit HTML ==> Expland Widget Templates
    c. Put Code bellow to the up of code ]]></ B: skin>
 # Navbar-iframe {
width: 980px; margin: 0 auto;
background: # 6f0566;
Size WIDTH adjust the width of your template, and also the color of Background.
   d. Save templates and see the result. :D

Related Post:



Stay updates with this blog! By entering your email address below, then you will get free email newsletter updates from this blog.


1 comments:

Excellent, what a weblog it is! This webpage provides helpful
information to us, keep it up.

Feel free to surf to my homepage; www.voiceyourchoice.org

Thanks For Your Comments Friends... By Imaduddin

Post a Comment

If you are From Indonesia or others country ,,

Please use our translation flag,,

Thanks,,

Twitter Delicious Facebook Digg Stumbleupon Favorites More