Membuat Menu Navigasi Untuk Blogger

1 Masuk ke akun Dashboard Blogger Anda >> Layout >> dan klik pada tambahkan gadget (tempatkan di bawah header seperti Screen Shot dibawah ini.)
2. Klik Tambah Gadget.
3. Gulir ke bawah Tambahkan Gadget dan pilih HTML / JavaScript.
4. Biarkan kotak judul kosong.
5. Copy dan paste kode HTML di bawah ini ke dalam kotak konten.

<style>

#tab_menu {
    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgu9ez5kR4WnFzCl9pfiBSYICGb-MSr1TCA6Tt4iUaeQ7SmaWCAGJuw19YzkR0rdsu3hYR84MNcuclIEqEKDpTLukkzLejzc8HVKBWlK65wco9VnhXdkrUB8BXQ2GKBLAdcBVZyx2-SQKUx/s1600/menu_bg.png) no-repeat;
    height:50px;
    width:960px;
    line-height:50px;
    list-style:none;
    margin-top:10px;
    font-size:14px;
    font-family:Verdana, Geneva, sans-serif;
    font-weight:bold;
    overflow:hidden;
}

#tab_menu li {
    float:left;
    border-right:1px solid #FFA722;
    border-left:1px solid #CC5200;
}

#tab_menu li:first-child {
    border-left:none;
}

#tab_menu li:last-child {
    border-right:none;
}

#tab_menu li a{
    text-decoration:none;
    float:left;
    display:block;
    height:50px;
    padding:0 20px;
    color:#FFF;
}

#tab_menu li a.current, #tab_menu li a:hover, #tab_menu li a.tool:hover {
    color:#622900;
    text-shadow:1px 1px 0px #E8964B;
}

#tab_menu li a.tool{
    color:#000;
    text-shadow:1px 1px 0px #E8964B;
}

</style>


<ul id='tab_menu'>
<li ><a href='#'>Home</a></li>
<li ><a href='#'>PRODUCT</a></li>
<li ><a href='#'>FAQS</a></li>
<li ><a href='#'>CONTACT US</a></li>
<li ><a href='#'>ABOUT US</a></li>
</ul>

6. Ganti "#" dengan URL halaman tujuan Anda.
7. Anda bisa mendapatkan URL dari halaman dengan menyalin isi alamat / URL bar browser Anda sementara Anda berada di halaman tersebut.
8. Untuk menampilkan semua posting di bawah label (kategori), Anda perlu link ke halaman label.
9. Untuk mengubah lebar lebar menu edit: 960px.

Nah anda bisa menggantinya sesuka hati anda, atau anda bisa mengganti background warna pada menu navigasi dengan mengganti link url background diatas yang saya tandai dengan warna merah dengan link url background dibawah ini, atau anda lebih suka untuk menggunakan warna lain, silahkan anda lihat kode warna html yang telah saya sediakan.

1.menu_bg_1

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8gvOELx74502TeopcvUK1pegbLUNhavZRm2cMCTl7JXcNplDB0qujeeH33REI0TRpuu4_JIf95dRUAq33HRjsiRa2wOfxN42S0guzuYJYpMBX5wwaBDBUFWUFSUu7vGE3TXj0vHHAZKW7/s1600/menu_bg_1.png

2 menu_bg_2

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirhMatyyR-PnHcpKAEyD9D-wJtFZO7FMkUC2uA0LUnJ8hu1SkcMq551SRJeo26xZfzx1culAH6AoE73FO1vgxPFm-W141i1YFjHXp3oje9cbS_yl5UxVIk3CQBZYRalfltPm9V__b-bWKS/s1600/menu_bg_2.png

3 menu_bg_3

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPFaLTAOdwYWzv_ECwDzLRVcZmi6Z-F_WHtgv8M9ec-YBRXXekUIepwp-U1xRCQmqQqfyGjThoGEpQ7r58Ov7V7nS4T-E9WGoq0hmOPliH6fRuHI4IaARlnvBEoiBZmXNlPLdSKhtoYJHD/s1600/menu_bg_3.png

4. menu_bg_4

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJUjdf80MYXcCXKCsOTDBg6VqIfLuklK2azS6Z7mrqBSsbd2FqHvJmsmVl3RAfHTzfXlXypUKr_AGh9DbrFoftV0cx07t9Mu01WqHJGrWs7sZfc7QJI0dbRCESJ7wiQUJQaNMkEyOg8Idx/s1600/menu_bg_4.png

5. menu_bg_5

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3Vl2wxCdINe9B1ALpcEAq9ItIDc_LWV69Q0ALoWch-BxjXdLdmoDGoYfM-FpwPcvfms5moo5zZpRD_TeA_Tj2TOtHnJDpaaTz-uiT2pxxtpVPr05z_juya7L1JmsaqqlWSfN1ILlEptZi/s1600/menu_bg_5.png

6 menu_bg_6

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2PZAGjKZefDmO8UVgVD5GZBT4CniU65LoRJM9tSBfQiQlq4oMJEgLMkJaj49DEvZzR3MBgyW4QP37yrSlDBWHmAmnRy6VakVllglt6dZqjCsXoTy6lNX4210VKLDAclR4Nkb2HQ4HvuPi/s1600/menu_bg_6.png

7 menu_bg_7

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgc8b8dtjw-XnWrzlTROV1ZwKIPaOxaCO3pacIdgwwCqJNm6rPa9OT3Jj8UsaydkpWgqFkMF8P-sd79mXPisOq2BxS_tQX6pBcKP1pw9uTMfat6koS_WHAoDQe_uiuaI_AWg2Z2up_zsEZm/s1600/menu_bg_7.png

8 menu_bg_8

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeK59B1e0M8ltwQCugNavBG0RvVzDKbGkAM66BS2JTB1UYqj1a2wWRXWOJ7v4UpiS10wysYrodUwa4n4Igspc7V51w7_I2hqu5M-CKDmjro4la-S_STgJl1cMPreC7ZG3tMo1mEIuhPz5g/s1600/menu_bg_8.png

9. menu_bg_9

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_wjQtP2to8jWWpMaaLBkM7e6upSDGkFJ1upChYYegjhmGZFcQYsrfcO32cp5xs7DfNU301CCXBWNWA4w8Ky7az0WNpOJ3-z9dpilnnj-9kpnKHruVR9sC8gFMSji9PwJVvb0oCApM7xj0/s1600/menu_bg_9.png

10 menu_bg_10

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOuqEM0qjOFx7CqagLMhn54bbIerIj-SlaNXnapvWBxMz1KVHWFDO0WhGF5MKYSPpNnfGaGg_5gwFZ-xlTCFvPuidP3YeastnZ7FwgC8y3TYSZqaYOVpHR2-P6wNarzi1C1nfHA182412o/s1600/menu_bg_10.png