Cara membuat Menubar animasi yang keren

Assalamualaikum semua, tidak pernah lupa untuk mengucapkan salam karena salam sangat berarti bagi kita semua. nah di kesempatan ini saya akan membagikan cara untuk membuat menubar animasi agar lebih cantik dan keren, kalau mau lihat seperti apa tampilannya, silahkan kalian ke homepage menu saya atau ke sini. di situ ada menubar saya, jika kalian menggunakan notebook, laptop,  komputer jika mengarahkan kursor ke menubar tersebut akan terlihat efeknya.

ok langsung saja ke caranya, tetapi kalian saya sarankan jika ingin membuat menubar ini di warnet atau menggunakan wifi, yang penting koneksi internet tidak lambat. jika menggunakan koneksi yang lambat dikhawatirkan akan membuat eror blog anda. dan satu lagi jika ingin menggunakan menu bar ini sebaiknya jangan terlalu banyak menggunakan kode javascirpt. Ok, caranya berikut ini :

Masuk ke menu blogger
untuk berjaga-jaga jika eror sebaiknya cadangkan atau backup template anda.
klik menu tema/template dan klik Edit HTML.
masukan script berikut ini pada sebelum atau di atas kode ]]></b:skin>
 /* Menu Horisontal 2
---------------------------------------------*/
.menuhorisontal2{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi50v9GTzyIQmsIEhbDkTyVoq5iQCm-dOvHck-ulo1TUtXoRrnN29UV24MJk1ZVLIS9wje9wKWTrO8LlgzhN41YzS3T_reMitIBy4nE6_HyqkBTL9snRa8EEiZuSMlADQkLd4rCrsmf-yN2/s1600/menu-orange.jpg) repeat-x bottom left;width:960px;margin:0 auto;padding:0;}
.menuhorisontal2 {width:960px;height:24px;margin:0 auto; padding:5px 0px;border-bottom:solid 1px #fff;}
.menuhorisontal2 ul{margin: 0; padding-left:7px;color:#666;text-transform: capitalize;list-style-type: none;font:normal 12px Arial, Helvetica,Verdana,sans-serif;}
.menuhorisontal2 li{display: inline; margin: 0;}
.menuhorisontal2 li a{float: left;display: block;text-decoration:none;
padding: 5px 6px 4px 6px;font-weight:bold;color: #fff}
.menuhorisontal2 li a:visited{color: #fff;}
.menuhorisontal2 li a:hover {background:#fff;border-radius:10px;-webkit-border-radius:10px;-opera-border-radius:10px;-moz-border-radius:10px;color:#222;text-decoration:none;-moz-box-shadow: inset 2px 2px 2px #404040;-webkit-box-shadow: inset 2px 2px 2px #404040;box-shadow: inset 2px 2px 2px #404040;}
.rss-wrapper{border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;border:1px solid #A4A4A4;font-size:12px;line-height:1.5em;margin:0 0 10px;padding:5px 10px}

keterangan :
kode warna merah = 960px, untuk mengatur lebar ukuran menubar.
kode warna kuning = 24px, untuk mengatur tinggi ukuran menubar.
kode warna ungu =12px, untuk mengatur besar ukuran huruf pada menubar.

 selanjutnya, cari kode </head> dan cari ke bawah sampai menemukan kode </b:section>, dan taruh script berikut pada bagian bawah </b:section>
jika ada dua taruh di bawah yang kedua .
<div id='MENUBAR'>
<div class='menuhorisontal2'>
<ul>
<li><a href='https://sobirinimam.blogspot.co.id/search/label/Blogger'>Tutorial Blog</a></li>
<li><a href='https://sobirinimam.blogspot.com'>Traffic</a></li>
<li><a href='https://sobirinimam.blogspot.com'>Domain</a></li>
<li><a href='https://sobirinimam.blogspot.com'>Situs Dilarang</a></li>
<li><a href='https://sobirinimam.blogspot.com'>Situsnya Kucing Saya</a></li>
<li><a href='https://sobirinimam.blogspot.com'>Jangan di klik</a></li>
  </ul>
</div>
</div>
 ganti link saya dengan link yang label atau halaman blog anda


ganti dengan nama label atau halaman yang ada di blog anda.

Nah, itulah cara membuat menubar animasi pada blog agar lebih menarik.sekian dari saya yang dapat saya sampaikan, semoga bermanfaat. dan selamat mencoba. untuk menu bar animasi tanpa edit HTML tunggu postingan berikutnya.