Tips Trick dan Cara buat Menu ala Lavalamp 6 warna

Kembali hadir di Acara Menu me Menu, hai hai Sajian menu kali ini di beri Nama " Lavalamp Bubble Menu ", Menu Blog merupakan ha...

Kembali hadir di Acara Menu me Menu, hai hai Sajian menu kali ini di beri Nama " Lavalamp Bubble Menu ",

Menu Blog merupakan hal yang sangat penting, baik itu di mata pengunjung atau di mata mesin pencari. Semakin menarik Menu yang sobat gunakan di blog tentu semakin keren pula tampilan blog kita, selain berfungsi memperindah blog tentu juga mempermudah pengunjung mencari berbagai artikel di blog.
Sudah banyak bertebaran di dunia maya, di blog tetangga berbagai macam cara membuat menu blog namun tidak ada salahnya kumpulancara.com ikut berpartisipasi meramaikan tutorial Menu me Menu.
Dari berbagai macam pilihan menu yang ada tentunya sobat harus sesuaikan dengan template masing-masing, baiklah mari kita mulai

Pertama
Silahkan  Klik Dasboard + Rancangan + Edit HTML

Kedua
Cari kode ]]></b:skin>
Setelah ketemu Letakkan kode berikut diatasnya / Sebelum ]]></b:skin>

/*LAVALAMP 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;
}

.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);

}


a {
text-decoration: none;
color: #262626;
line-height: 20px;
}

ul {
margin: 0;
padding: 0;
z-index: 300;
position: absolute;
}

ul li {
list-style: none;
float:left;

text-align: center;
}

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;
}
/*End Lavalamp Css Info @ http://www.kumpulancara.com */

Ketiga
Selanjutnya cari kode </head>
Silahkan copy dan paste kode berikut di atas atau sebelum </head>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'/>
<script src='http://spiceupyourblogextras.googlecode.com/files/lavalamp.js' type='text/javascript'/>

Keempat
Silahkan Simpan

Kelima
Silahkan klik lagi Rancangan  Klik Tambah Gadget + Pilih HTML/Javascript

Copy dan Pastelah Kode berikut didalamnya

<div class="lavalamp" >

<ul>
<li class="active"><a href="/">Home</a></li>
<li><a href="Link-disini">tentang</a></li>
<li><a href="Link-disini">Trik</a></li>
<li><a href="Link-disini">Services</a></li>
<li><a href="Link-disini">Seo</a></li>
<li><a href="Link-disini">Contacts</a></li>
<li><a href="Link-disini">Blablala</a></li>
<li><a href="Link-disini">Trilili?</a></li>
</ul>
<div class="floatr"></div>
</div>

Supaya kelihatan mantap letakkan widgetnya dibawah Header

Gantilah Link-disini dengan link yang akan ditampilkan dan ganti saja keterangan sesuai dengan link yang anda pasang.

Untuk Memilih Warna Menu sesuai Keinginan Sobat bisa ganti kode

<div class="lavalamp" >

Dengan kode Pilihan berikut ini :

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

Selamat Berkarya dan Mencoba

sumber: kupulancara