Cara Memasang Menu Bar Tambahan pada blogspot

Cara Memasang Menu Bar Tambahan pada blogspot. tentunya sudah tidak asing bagi par apengunjung blog melihat sebuah menu bar dan berisi sederet categori, lalu bagaimana cara membuat menu bar pada blogspot. sebenarnya jika ingin membuat sebuah menu bar kita harus mengedit template tapi saya berikan sebuah code javascript yang bisa di pasang lewat gadge javascript jadi anda tidak pelru repot repot mengedit template.

Menu bar ini otmatis terpasang jika sudah memasang javascrip, menu bar ini terletak di mana kita meletakan bagian gadget. jadi jika anda ingin menu bar berada di atas anda harus menambahkan gadget di bagian atas supaya muncul menu bar di bagian atas. 

Cara membuat menu bar

1. login Bloger

2. pilih menu layout/ tata letak

3. tambahkan add a Gadget

5. Cari HTML/JAVASCRIPT

6. Masukan Kode javascript di bawah ini

<style type="text/css">
/*CSS MENU*/
#menu{background:#343434;color:#eee;height:35px;border-bottom:4px solid #eeeded}
#menu ul,#menu li{margin:0 0;padding:0 0;list-style:none;z-index:9999;}
#menu ul{height:35px}
#menu li{float:left;display:inline;position:relative;font:bold 12px Arial;text-shadow: 0 -1px 0 #000;border-right: 1px solid #444;border-left: 1px solid #111;text-transform:uppercase}
#menu li:first-child{border-left: none}
#menu a{display:block;line-height:35px;padding:0 14px;text-decoration:none;color:#eee;}
#menu li:hover > a,#menu li a:hover{background:#111}
#menu input{display:none;margin:0 0;padding:0 0;width:80px;height:35px;opacity:0;cursor:pointer}
#menu label{font:bold 30px Arial;display:none;width:35px;height:36px;line-height:36px;text-align:center}
#menu label span{font-size:12px;position:absolute;left:35px}
#menu ul.menus{height:auto;overflow:hidden;width:180px;background:#111;position:absolute;z-index:99;display:none;border:0;}
#menu ul.menus li{display:block;width:100%;font:12px Arial;text-transform:none;}
#menu li:hover ul.menus{display:block}
#menu a.home {background: #c00;}
#menu a.sub{padding:0 27px 0 14px}
#menu a.sub::after{content:"";width:0;height:0;border-width:6px 5px;border-style:solid;border-color:#eee transparent transparent transparent;position:absolute;top:15px;right:9px}
#menu ul.menus a:hover{background:#333;}
</style>

<!-- Mulai Area Menu -->
<nav id="menu">
<input type="checkbox" />
<label>≡Navigation</label>
<ul>
<li><a class="home" href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Daftar Isi</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
<li><a href="#">Login Admin</a></li>
<!-- Mulai Area Menu Dropdown -->
<li><a class="sub" href="#">Menus</a>  <ul class="menus">
<li><a href="#" title="Kode Warna HTML">Menus 1</a></li>
<li><a href="#">Page Protected</a></li>
<li><a href="#">Menus2</a></li>
<li><a href="#">Menus 3</a></li>
<li><a href="#" target="_blank">Menus 4</a></li>
<li><a href="#">Menus 5</a></li>
</ul>
</li>
<!-- Area Dropdown Selesai-->  </ul>
</nav>
<!-- Area Menu Selesai-->

7. Save lalu lihat hasilnya.

Untuk mengedit menu anda tinggal mengubah # menjadi Url Blog anda. sebuah semua tanda # menjadi Url blog anda. dan rubah nama menu sesuai ke inignan anda. dan jika menu bar tidak muncul di blog. anda harus mengulang karena takut terjadi kesalahan atau code di tercopy dengan benar. tapi jika tidak muncul anda harus mengganti template blog anda karena banyak template tidak suport pada berbagai widget.

ADS HERE !!!