cara membuat menubar animasi part dua

Ya, memang kali ini saya sedang senang mengutak atik template atau tema pada blog, walaupun saya tidak paham sekali dengan javascript atau html tetapi tidak membuat semangat saya untuk membuat blog pudar, hahaha seperti pejuang 45 saja. Ya saya selalu bereksperimen dengan html dan javascript hasilnya tentu ada yang eror dan ada juga yang berhasil. hasil yang bagus dan menarik itulah yang selalu membuat semangat untuk mengedit atau mengutak atik template atau tema agar menjadi lebih bagus. Ok, kali ini saya juga akan membagikan bagaimana cara membuat menubar animasi.

baca juga :  cara membuat menubar animasi tanpa edit html
                     cara membuat menubar animasi yang keren

Sayang sekali saya tidak punya demonya karena blog saya cuman satu, kalian bisa mencobanya di blog sendiri di jamin keren kok saya sudah pernah mencobanya, akan tetapi saya hapus karena menubar saya sudah ada 4 tumpuk, jadi untuk menghemat kode java script saya hapus salah satu jadi tinggal 3 tumpuk wkwkw seperti tumpeng saja.

Ok langsung saja ke caranya, oh iya saya sarankan jika sudah terlalu banyak widget lebih baik tidak usah di pasang karena nanti loading blog menjadi lambat atau lemot seperti siput.
Caranya berikut ini :
1. login ke blogger
2. pilih menu Template>> edit html.
3. jika sudah  membuka html nya masukin kode javascirpt berikut ini di atas ]]></b:skin> .
 #nav-wrapper{background:#23436c;border-top:1px solid #2b5487;height:25px;font-family:"Tahoma",Palatino,serif;overflow:hidden}
#nav{margin:0 auto;width:960px;height:25px;padding:0;text-shadow:1px 1px 2px #000}
#nav ul{float:right;width:auto;height:25px;margin:0;padding:0;list-style-type:none}
#nav ul li{float:right;height:25px}
#nav ul li a,#nav ul li a:visited{border-right:1px solid #080f18;background:#162c47;border-left:1px solid #254874;color:#e7f1fe;float:right;height:25px;padding:2px 14px;font:12px Oswald;text-transform:none;transition:all 400ms ease-in-out;-webkit-transition:all 400ms ease-in-out;-moz-transition:all 400ms ease-in-out;-o-transition:all 400ms ease-in-out;-ms-transition:all 400ms ease-in-out;}
#nav ul li a:hover{background:#0a131e;color:#aad0fe;text-decoration:none;}
4. dan masukin kode berikut ini di atas <div id='content-wrapper'>
 <div id="nav">
<div class="page section" id="page"><div class="widget PageList" data-version="1" id="PageList1">
<div class="widget-content">
<ul>
<li class="selected"><a href="https://sobirinimam.blogspot.co.id/">Home</a></li>
</ul>
</div>
</div></div>
</div>
5. kemudian save template tersebut dan lihat hasilnya


Nah itulah caranya untuk membuat menubar animasi yang tidak kalah keren dengan menubar sebelumnya yang saya posting. Ok cukup sekian dari saya semoga bermanfaat dan berguna, jika asa yang ingin di tanyakan jangan sungkan sungkan untuk berkomentar di bawah artikel ini atau dapat mengisi pesan di buku tamu (guest book). selamat mencoba semoga berhasil.