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



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 Klik + Pilih

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

• Tweet

Judul: Cara buat Menu ala Lavalamp 6 warna
Rating: 100% based on 99998 ratings. 5 user reviews.
Ditulis Oleh Unknown 10:58 AM

Artikel Terkait Menu :