Cara membuat menubar animasi tanpa edit html

Friday, February 23, 20180 komentar

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-->
<

keterangan warna :
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.


Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Forum Bagi Ilmu
Share this article :

Post a Comment

 
Support : Kucing Bawuk | Bundel Template | bundel
Copyright © 2011. Berbagi Ilmu - All Rights Reserved
Template Created by Gold Hamer Published by Bundel Template
Proudly powered by VIP Golden Hammer