Menu Navigasi Style Browny Galleria

Caranya adalah sebagai berikut :

1. Login ke Akun Blogger anda masing-masing.
2. Klik Design or Rancangan, kemudian pilih Edit HTML
3. Centang (Expand Widget Template)
4. Untuk keamanan lebih baik kita (Download Template Lengkap)
5. Gunakan (Ctrl+F) or (Alt+E+F) untuk memudahkan pencarian
6. Cari kode : ]]></b:skin>
7. Lalu letakkan Kode CSS dibawah ini sebelum atau diatas kode ]]></b:skin> kalau tidak bisa taruh dibawahnya saja.

/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 100%;
margin:0 auto;
text-align:$startSide;
}

#content-wrapper {
margin: 0 auto;
overflow: hidden;
width: 960px;
padding-top: 20px;
}

#main-wrapper {
width: 600px;
float: $startSide;
padding-left: 20px;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */
}

#sidebar-wrapper {
width: 275px;
float: $endSide;
padding-right: 30px;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden;      /* fix for long non-text content breaking IE sidebar float */
}

#wrap {
margin-left: auto;
margin-right: auto;
width: 900px;
position: relative;
min-height: 45px;
}
#body-image {
margin-top: 60px;
}
#main-nav {
margin: 0px 0px 0px 2px;
text-align: left;
min-height: 25px;
padding:10px 5px 5px;
text-shadow:1px 1px rgba(0, 0, 0, 0.9);
}

#main-handle {
width: 605px;
float: right;
margin-top: -1px;
}
#main-nav li {
display: inline;
list-style: none;
}
#main-nav li a {
margin-right: 5px;
font-size: 15px;
text-decoration: none;
color: #f2f2f2;
font-family: Arial, Helvetica, sans-serif;
text-transform: uppercase;
font-weight: bold;
padding: 10px;
outline: 0;
position: relative;
top: -2px;
}
#main-nav li a:hover, #main-nav li a.active {
background: #19120C;
-moz-border-radius:0 0 10px 10px;
-webkit-border-radius:0 0 10px 10px;
border-radius:0 0 10px 10px;
}
#sub-link-bar {
background: #19120C;
min-height: 10px;
border-bottom: 1px solid #412E1E;
}
.sub-links {
display: none;
position: absolute;
width: 100%;
top: -28px;
text-align: left;
left: 0px;
}

#main-nav li .sub-links li a{
padding:5px 10px;
}

#main-nav li .sub-links li a:hover{
background: #2d2620;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
}
#main-nav li a.close{
display: none;
position: absolute;
}
#main-nav li a.close:hover{
background: #900;
}
.roundfg {
background:#332417;
-moz-border-radius:0 0 10px 10px;
-webkit-border-radius:0 0 10px 10px;
border-radius:0 0 10px 10px;
border:1px solid #473222;
border-top: none;
border-left:1px solid #000;
}

8. Setelah Itu Beralihlah dan cari kode ]]></b:skin>
9. Letakkan kode dibawah ini dibawah kode ]]></b:skin> , atau diatas kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
   $("#main-nav li a.main-link").hover(function(){
        $("#main-nav li a.close").fadeIn();
        $("#main-nav li a.main-link").removeClass("active");
        $(this).addClass("active");
        $("#sub-link-bar").animate({
            height: "40px"
        });
        $(".sub-links").hide();
        $(this).siblings(".sub-links").fadeIn();
   });
   $("#main-nav li a.close").click(function(){
        $("#main-nav li a.main-link").removeClass("active");
        $(".sub-links").fadeOut();
        $("#sub-link-bar").animate({
            height: "10px"
        });
        $("#main-nav li a.close").fadeOut();
   });


});

//]]>
</script>

10. Langkah terakhir cari kode <body> .lalu taruh kode berikut tepat dia bawahnya.

<div id='outer-wrapper'><div id='wrap2'>

    
    <span id='skiplinks' style='display:none;'>
      <a href='#main'>skip to main </a> |
      <a href='#sidebar'>skip to sidebar</a>
    </span>
<div id='sub-link-bar'> </div>

<div id='wrap'>
<div id='main-handle'>
    <div class='roundfg'>
      <ul id='main-nav'>
        <li><a class='main-link' expr:href='data:blog.homepageUrl'>Home</a>
             <ul class='sub-links'>
            <li><a href='URL HERE' title='Category1'>Category1</a></li>
            <li><a href='URL HERE' title='Category1'>Category2</a></li>
            <li><a href='URL HERE' title='Category1'>Category3</a></li>
            <li><a href='URL HERE' title='Category1'>Category4</a></li>
            <li><a href='URL HERE' title='Category1'>Category5</a></li>
            <li><a href='URL HERE' title='Category1'>Category6</a></li>
            <li><a href='URL HERE' title='Category1'>Category7</a></li>
            </ul>
                    </li>
        <li><a class='main-link' href='#'>Templates</a>
          <ul class='sub-links'>
            <li><a href='URL HERE' title='One Column'>One Column</a></li>
            <li><a href='URL HERE' title='Two Column'>Two Column</a></li>
            <li><a href='URL HERE' title='Three Column'>Three Column</a></li>
            <li><a href='URL HERE' title='Four Column'>Four Column</a></li>
            </ul>
        </li>
        <li><a class='main-link' href='#'>Tutorials</a>
          <ul class='sub-links'>
            <li><a href='URL HERE' title='Category1'>Category1</a></li>
            <li><a href='URL HERE' title='Category2'>Category2</a></li>
            <li><a href='URL HERE' title='Category3'>Category3</a></li>
            <li><a href='URL HERE' title='Category4'>Category4</a></li>
          </ul>
        </li>
        <li><a class='main-link' href='#'>Freebies</a>
          <ul class='sub-links'>
            <li><a href='URL HERE' title='Category1'>Category1</a></li>
            <li><a href='URL HERE' title='Category1'>Category2</a></li>
            <li><a href='URL HERE' title='Category1'>Category3</a></li>
            <li><a href='URL HERE' title='Category1'>Category4</a></li>
            <li><a href='URL HERE' title='Category1'>Category5</a></li>
            <li><a href='URL HERE' title='Category1'>Category6</a></li>
            <li><a href='URL HERE' title='Category1'>Category7</a></li>
          </ul>
        </li>
        <li><a class='main-link' href='#'>Videos</a>
            <ul class='sub-links'>
            <li><a href='URL HERE' title='Category1'>Category1</a></li>
            <li><a href='URL HERE' title='Category1'>Category2</a></li>
            <li><a href='URL HERE' title='Category1'>Category3</a></li>
            <li><a href='URL HERE' title='Category1'>Category4</a></li>
            <li><a href='URL HERE' title='Category1'>Category5</a></li>
            <li><a href='URL HERE' title='Category1'>Category6</a></li>
            <li><a href='URL HERE' title='Category1'>Category7</a></li>
          </ul>
        </li>
        <li><a class='main-link' href='#'>About</a>
            <ul class='sub-links'>
                <li><a href='URL HERE' title='Category1'>About</a></li>
                <li><a href='URL HERE' title='Category1'>Write for us</a></li>
                <li><a href='URL HERE' title='Category1'>Join us</a></li>
                <li><a href='URL HERE' title='Category1'>Submit news</a></li>
                <li><a href='URL HERE' title='Category1'>Terms</a></li>
                <li><a href='URL HERE' title='Category1'>Contact us</a></li>
            </ul>
        </li>
         <li><a class='close' href='#' title='Click to Collapse'>X</a></li>
      </ul>
    </div>
    
    </div>

</div>

Tambahan

<body>
<div id='outer-wrapper'><div id='wrap2'>
----------
--------
--------------

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

NB:
Ganti tulisan URL HERE dengan alamat blog kalian masing maising, dan ganti tulisan Category 1-10 dengan judul blog anda.

9. Save

♂ Good Luck ♀

Semua ini adalah apa yang pernah aku cobain sendiri . . dan aku dapat/mengerti dari teman2 blogger lainnya karena aku hanya seorang blogger pemula yang ingin mengetahui lebih banyak hal lagi . . . . Thank's