Modification Your Navbar Menu for Blogger ( CSS ) Cools

Navbar menu is cool ya, hopefully useful. I make it from CSS3, two days of tweaking my brain, I can finally. If interested, just copied it.

Fully Customizable: Any design can be realized through CSS style definitions and optional custom images.

Based on XML and CSS: NavBar structure and visual appearance are defined through industry standards XML and CSS.

Cross-Browser Compatibility: Supports IE5-7, Firefox 1-2, Netscape 7-8, Mozillas, Opera 8-9, Safari 1.

Here the picture of this navbar :

Here's how:

1. put this code before: <b:skin>

<link rel='StyleSheet' href='http://sites.google.com/site/gurukusakti/model/navmenu.css' type='text/css'/>

OR download it first css style code in the "http"style above, then copy and paste the code in it before ]]></ b: skin>

2. Note the first illustration <ul> menu, and <li>, the following:

Each <li> should be closed with </ li>, and every <ul> should be closed with </ ul>
Such examples of the illustrations:

<ul>---opening

<li>----open---MAIN MENU1
<ul>----open---
<li>----open---
----insert subnya menu here----
---close-----</li>
---close-----</ul>
---close-----</li>

<li>MAIN MENU2
<ul>
<li>
-----insert subnya menu here----
</li>
</ul>
</li>

<li>MAIN MENU3
<ul>
<li>
-----insert subnya menu here----
</li>
</ul>
</li>

---closing---</ul>

Copy the code below into after <body>, or substitute your Navbar HTML code with this code below:

<ul class='topmenu' id='css3menu1' style='border-width:1px 1px 0 1px;border-style:solid;border-color:#fffff;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;'>

<li class='topmenu'><a href='' title='HOME'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgJg8PhTsV0qxjtONCBMsu3Ruray6-U9gfaaHgzx1PXudWnr5jMoVfSEOsMd-Eq-ySuMJzdAGTLOdUcpshMmy_5JyuHw13eb1Ln7qxd12NdfXTsOL-hlTI55B15kFxVOFyefzWV_Lo1Ko/s1600-r/blue_circle+-+home2.png'/>HOME</a></li>

<li class='toproot'><a href='#' title='TIPS AND TRICK '><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsCGUIxIX6GpJgbolQSsgYmq3-36jdZuDilj_REYCqlmyga-duWz4RGwootgiHxL72yExcmB1VjjonaUTyCTGTKP4Mrdh4Qu4sB8KrJ6DUj9xJL3qEjKJm9R3CQErtVlzyUeDFjHCib50/s1600-r/blue_circle+-+info.png'/>TIPS AND TRICK</a>
<ul>
<li> <a href='#' title='TriCk Blogging '><span>Trik Blogging</span></a>
<ul>
<li><a href='link-sampean'>Trik Blogging 2.1.1</a></li>
<li><a href='link-sampean'>Trik Blogging 2.1.2</a></li>
<li><a href='link-sampean'>Trik Blogging 2.1.3</a></li>
</ul>
</li>
<li> <a href='#' title='Trick computer '><span>Trick computer </span></a>
<ul>
<li><a href='link-sampean'>Trick computer 2.1.1</a></li>
<li><a href='link-sampean'>Trick computer 2.1.2</a></li>
<li><a href='link-sampean'>Trick computer 2.1.3</a></li>
</ul>
</li>
</ul></li>

<li class='toproot'><a href='#' title='Label Download '><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsCGUIxIX6GpJgbolQSsgYmq3-36jdZuDilj_REYCqlmyga-duWz4RGwootgiHxL72yExcmB1VjjonaUTyCTGTKP4Mrdh4Qu4sB8KrJ6DUj9xJL3qEjKJm9R3CQErtVlzyUeDFjHCib50/s1600-r/blue_circle+-+info.png'/>DOWNLOADS</a>
<ul>
<li><a href='link-sampean'>Download Script</a></li>
<li><a href='link-sampean'>Download free</a></li>
<li><a href='link-sampean'>Download free</a></li>
</ul></li>

<li class='topmenu'><a href='#' title=' Label Software '><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQruEXExxeE-2GDk0ieNMSSyWF-kQr_niuxefTXP-ZWCknLVDGfYgsqbvlhkT-A2OISN_uFUxO3byZLTYuT43QiUJk1HqX6A_2MO3AcGQMgiBKxPED3UqEUpkSKgveKLeynwYEl37e7U0/s187/blue_circle+-+star.png'/>SOFTWARE</a></li>

<li class='topmenu'><a href='#' title='Label Internet '><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggNnm6Avv_HQJ634mxM5JC5p4u8ypBsmsjfP0AF15SZIL1uxkf9b2IOfQgFYwvn-8_di2ocXFGzJWKsMo11xLZ-SQaKrDN42e8NG6-hpSEfEc-RJNa-iDRrQJOuf0_gPbOTKkiwrr2uOc/s1600-r/blue_circle+-+ok.png'/>INTERNET</a></li>

<li class='topmenu'><a href='#' title='Label About Me'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_964RSLgxL5D1sNG5TvB0Qm6sc_ncnvJAsloDg1ruTerV07SdZxEhKS3XuPj3f35hIV2Gpk91UKhHiYfNCErmO1RMJOo0lo5GvT5LLoXbgpIrUiBTn59f93itjQsw2Zl62EkY5tYxsCs/s187/tech.png'/>ABOUT ME</a></li>

<li class='topmenu'><a href='#' title=' MODELS OF LEARNING '><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsCGUIxIX6GpJgbolQSsgYmq3-36jdZuDilj_REYCqlmyga-duWz4RGwootgiHxL72yExcmB1VjjonaUTyCTGTKP4Mrdh4Qu4sB8KrJ6DUj9xJL3qEjKJm9R3CQErtVlzyUeDFjHCib50/s1600-r/blue_circle+-+info.png'/>CONTACT</a></li>

</ul>

3. How to setup:
a. Changing the menu image by changing the link in the image (<img src = "http://2.bp.blogspot.com/ .................

b. Each "class =" topmenu "is used for the main menu it does not exist dropdwon. And Every" class = "toproot" dignkan to main menu imaginable SUB drop down menu

c. For the width adjusted to your blog, how: writing HOME, DOWNLOAD the order itself, for example for example if an extension navigation, writing letters "HOME" can be a little "home ". Likewise, if the navigation stands, it means that there are letters in Extend example "HOME"to "MY HOME"
etc ...

d. To add its main menu, please copy it from <li> to the closing </ li>

e. how to remove the sub menu is the same, delete the start of <li> up to </ li> tag. or from <ul> to </ ul> tag.

4. It's up to you, the follow is fine, not too may FINE TOO, if it is useful to others ... FOR example, YOU can LOOK here:

PREVIEW