Cara membuat menubar animasi tanpa edit html

hai kawan, malam minggu yang seru, apa kabar kalian semua, semoga sehat selalu. di malam ini saya akan membagikan lagi nih caranya untuk membuat menubar animasi tetapi tidak perlu membuka atau mengedit HTML. Ya tidak perlu ribet seperti kemarin harus edit HTML sekarang akan lebih mudah dan praktis. Tetapi jika memang kalian suka mengutak atik tema atau kode html/java script tidak ada salahnya untuk mencoba yang ini : cara membuat menubar animasi keren. Ok  di bawah ini adalah screenshoot dari menu bar yang akan kita buat.

 yayaya mari kita mulai dari pada berpanjang lebar. Tetapi tunggu dulu saya jelaskan kegunaan widget ini adalah memudahkan pengunjung untuk menavigasi blog kita dan widget ini menghemat kode HTML jadi tidak perlu takut untuk memasang widget menubar ini. ok caranya berikut ini.

1.masuk ke menu blogger
2. masuk ke menu tata letak >> Tambahkan gadget
3. pilih  pilih HTML/java scirpt
4. oh iya, kalau ini buat menu utama taruh atau pilih letak di bagian atas. dan masukan kode 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="http://sobirinimam.blogspot.co.id/p/home.html">Home</a></li>
<li><a href="https://sobirinimam.blogspot.co.id/search/label/Bagi%20Ilmu">Menu 1</a></li>
<li><a href="https://sobirinimam.blogspot.com">Menu 2</a></li>
<li><a href="https://sobirinimam.blogspot.com">Menu 3</a></li>
<!-- Mulai Area Menu Dropdown -->
<li><a class="sub" href="#">Menus</a>  <ul class="menus">
<li><a href="https://sobirinimam.blogspot.com" title="Menus">Menus 1</a></li>
<li><a href="https://sobirinimam.blogspot.com">Page</a></li>
<li><a href="https://sobirinimam.blogspot.com">Menus2</a></li>
<li><a href="https://sobirinimam.blogspot.com">Menus 3</a></li>
<li><a href="https://sobirinimam.blogspot.com">Menus 4</a></li>
<li><a href="https://sobirinimam.blogspot.com">Menus 5</a></li>
</ul>
</li>
<!-- Area Dropdown Selesai-->  </ul>
</nav>
<!-- Area Menu Selesai-->

ganti dengan url label atau halam blog anda

ganti dan sesuaikan sesuai label atau halaman blog anda

Nah itulah caranya membuat menubar tanpa edit html, jadi lebih mudah dan tidak pusing atau bingung karena edit html. ok cukup sekian dari saya, semoga bermanfaat dan berguan. jika ada yang ingin di tanyakan bisa lewat komentar atau buku tamu (guest book). selamat mencoba semoga berhasil.