Cara Membuat Navigasi atau Menu Bar Seperti Google

Cara Membuat Navigasi atau Menu Bar Seperti Google- Sesuai judulnya saya akan memberikan tutorial blog untuk membuat menu  layaknya menu pada google.com. Oke saya ingin cepat aja tidak usah banyak basa-basi, ini dia tutorialnya:

1. Langkah awal tetap sama, masuk ke akun blog sobat.

2. Lalu ke bagian template => edit html => expand.
3. Masukkan kode berikut tepat di ATAS kode "]]></b:skin>"

/* code from by http://netfori.blogspot.com/ */
#abtbox {
    font-family: Arial,sans-serif;
    font-size: 13px;
    font-size-adjust: none;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    line-height: 27px;
    height: 30px;
    background-color: #222222;
    margin-top:0px;
    width: 100%;
    }

#abtbox ul
   { display: block;
    text-decoration:none;
    list-style-image: none;
    list-style-position: outside;
    list-style-type: none;
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
   -moz-border-bottom-colors: none;
    -moz-border-image: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    border-bottom-color: -moz-use-text-color;
    border-bottom-style: none;
    border-bottom-width: 0;
    border-left-color-ltr-source: physical;
    border-left-color-rtl-source: physical;
    border-left-color-value: -moz-use-text-color;
    border-left-style-ltr-source: physical;
    border-left-style-rtl-source: physical;
    border-left-style-value: none;
    border-left-width-ltr-source: physical;
    border-left-width-rtl-source: physical;
    border-left-width-value: 0;
    border-right-color-ltr-source: physical;
    border-right-color-rtl-source: physical;
    border-right-color-value: -moz-use-text-color;
    border-right-style-ltr-source: physical;
    border-right-style-rtl-source: physical;
    border-right-style-value: none;
    border-right-width-ltr-source: physical;
    border-right-width-rtl-source: physical;
    border-right-width-value: 0;
    border-top-color: -moz-use-text-color;
    border-top-style: none;
    border-top-width: 0;
    list-style-image: none;
    list-style-position: outside;
    list-style-type: none;
     }

#abtbox ul li
    {text-decoration:none;
     -moz-border-bottom-colors: none;
    -moz-border-image: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    border-bottom-color: -moz-use-text-color;
    border-bottom-style: none;
    border-bottom-width: 0;
    border-left-color-ltr-source: physical;
    border-left-color-rtl-source: physical;
    border-left-color-value: -moz-use-text-color;
    border-left-style-ltr-source: physical;
    border-left-style-rtl-source: physical;
    border-left-style-value: none;
    border-left-width-ltr-source: physical;
    border-left-width-rtl-source: physical;
    border-left-width-value: 0;
    border-right-color-ltr-source: physical;
    border-right-color-rtl-source: physical;
    border-right-color-value: -moz-use-text-color;
    border-right-style-ltr-source: physical;
    border-right-style-rtl-source: physical;
    border-right-style-value: none;
    border-right-width-ltr-source: physical;
    border-right-width-rtl-source: physical;
    border-right-width-value: 0;
    border-top-color: -moz-use-text-color;
    border-top-style: none;
    border-top-width: 0;
    list-style-image: none;
    list-style-position: outside;
    list-style-type: none; 
     line-height: 27px;
    display: inline-block;
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
    position: relative;
    vertical-align: top;
    margin-left:10px; 
       }
#abtbox ul li a
    {
    color:#BBBBBB;
    font-weight: bold;
    -moz-text-blink: none !important;
    -moz-text-decoration-color: -moz-use-text-color !important;
    -moz-text-decoration-line: none !important;
    -moz-text-decoration-style: solid !important;
     display: block; 
     text-decoration:none; 
     }
#abtbox ul li a:hover, #abtbox ul li a:active
      {   
      color: #FFFFFF;
      }
/* code from by http://netfori.blogspot.com/ */

5. Sekarang cari kode "<body>"

6. Bila sudah pasang kode ini di bawah "<body>" tersebut:

<div id="abtbox">
<ul>
<li><a href="http://netfori.blogspot.com">+Namamu</a></li>
 <li><a href="http://netfori.blogspot.com">Beranda</a></li>
<li><a href="http://netfori.blogspot.com">Images</a></li>
<li><a href="http://netfori.blogspot.com">Archive</a></li>
<li><a href="http://netfori.blogspot.com">Link Exchange</a></li>
</ul>
</div>

Perhatian:
1. Untuk kode yang berwarna MERAH, ganti sesuai url tujuan. Harus sesuai dengan keterangan pada kata yang berwarna KUNING.
2. Pada penulisan nama url tujuan JANGAN memakai menambahkan "www" sebelum nama domain.

Demikian tutorial singkat ini, mohon maaf bila banyak kekurangan. Di-edit dan diterjemahkan dari www.allbloggingtricks.com. Terimakasih.