Menu Keren buat Blog kalian ( with jQuery & CSS3 )

Posted by : andika Rabu, 20 Februari 2013

Hai!! kali ini aku akan ngeshare tempat menu yang keren banget buat blogger,kalian akan suka deh! ini menunya 100% dibuat sendiri with jQuery & CSS3! pasti bakalan keren deh! ok deh langsung aja !

DEMO

1.Buka Blogger
2.Ke Template
3.Cari kode </head> ( biar simpel pake Ctrl + F )
4.Copy kode jquery ini dan pastekan diatas kode tadi (</ head> )

5.Abis itu cari kode ]]></b:skin> dan pastekan kode berikut sebelum kode ]]></b:skin>

/*LAVALAMP MENU BY http://www.helperblogger.com/ START*/ .lavalamp { position: relative; border: 1px solid #d6d6d6; background: #fff; padding: 15px; -webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25); -moz-box-shadow: 0 3px 6px rgba(0,0,0,.25); border-radius : 10px; -moz-border-radius : 10px; -webkit-border-radius : 10px; background : -webkit-gradient(linear, left top, left bottom, from(rgb(240,240,240)), to(rgb(204,204,204))); background : -moz-gradient(linear, left top, left bottom, from(rgb(240,240,240)), to(rgb(204,204,204))); height: 18px; font-family: calibri; } .magenta { background : rgb(190,64,120); background : -webkit-gradient(linear, left top, left bottom, from(rgb(190,64,120)), to(rgb(177,24,91))); background : -moz-gradient(linear, left top, left bottom, from(rgb(190,64,120)), to(rgb(177,24,91))); border: 1px solid #841144; } .cyan { background : rgb(64,181,197); background : -webkit-gradient(linear, left top, left bottom, from(rgb(64,181,197)), to(rgb(7,165,187))); background : -moz-gradient(linear, left top, left bottom, from(rgb(64,181,197)), to(rgb(7,165,187))); border: 1px solid #2f8893; } .yellow { background : rgb(255,199,79); background : -webkit-gradient(linear, left top, left bottom, from(rgb(255,199,79)), to(rgb(255,188,43))); background : -moz-gradient(linear, left top, left bottom, from(rgb(255,199,79)), to(rgb(255,188,43))); border: 1px solid #c08c1f; } .orange { background : rgb(255,133,64); background : -webkit-gradient(linear, left top, left bottom, from(rgb(255,133,64)), to(rgb(255,107,24))); background : -moz-gradient(linear, left top, left bottom, from(rgb(255,133,64)), to(rgb(255,107,24))); border: 1px solid #c04f11; } .dark { background : rgb(89,89,89); background : -webkit-gradient(linear, left top, left bottom, from(rgb(89,89,89)), to(rgb(54,54,54))); background : -moz-gradient(linear, left top, left bottom, from(rgb(89,89,89)), to(rgb(54,54,54))); border: 1px solid #272727; } .magenta li a , .cyan li a, .yellow li a , .orange li a, .dark li a{ color: #fff; text-shadow: 0 -1px 0 rgba(0,0,0,.40); } .lavalamp a { text-decoration: none; color: #262626; line-height: 20px; } .lavalamp ul { margin: 0; padding: 0; z-index: 300; position: absolute; } .lavalamp ul li { list-style: none; float:left; text-align: center; } .lavalamp ul li a { padding: 0 20px; text-align: center; } .floatr { position: absolute; top: 10px; z-index: 50; width: 70px; height: 30px; border-radius : 8px; -moz-border-radius : 8px; -webkit-border-radius : 8px; background : rgba(0,0,0,.20); -webkit-transition: all .4s ease-in-out; -moz-transition: all .4s ease-in-out; } /*LAVALAMP MENU BY http://www.helperblogger.com/ END*/

6.Jika sudah,ke Tata Letak
7.Trus tambahin tuh HTML/JavaScript dan pastekan kode berikut didalamnya

<div class="lavalamp dark">
<ul>
<li class="active"><a href="">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contacts</a></li>
<li><a href="#">Back to Article</a></li>
<li><<a href="#">How it Works?</a></li>
</ul>
<div class="floatr"></div>
</div>

8.Usahakan tempatnya dibawah Header

Note :

Yang berwarna hijau itu adalah kode menunya,bsa diganti kok nanti dibawah ada
Yang berwarna Kuning adalah isi buat menumu,ganti sesukamu

Dan tambahan, jika ingin mengganti warna menu,bsa kalian pilih disini

<div class="lavalamp">
<div class="lavalamp magenta">
<div class="lavalamp cyan">
<div class="lavalamp yellow">
<div class="lavalamp orange">
<div class="lavalamp dark">