Cara Membuat Menu Horizontal Lavalamp dengan CSS dan Jquery

1. Login ke Blogger.com

2. Klik Template --> Back Up template kamu terlebih dahulu, Lihat caranya di bawah ini :
3. Masih di bagian Template, Kamu klik Edit HTML --> Pilih Lanjutkan --> Cari kode </head>, kamu bisa gunakan CTRL + F untuk pencarian lebih mudah. Salin kode di bawah ini dan letakkan di atas kode </head>

Note : jika kamu sudah ada kode Jquery yang berwarna biru di blog kamu, kamu tinggal menambahkan kode yang ada di bawah kode warna biru saja.

4. Sekarang kamu cari kode ]]></b:skin> dan kamu salin kode di bawah ini kemudian kamu letakkan diatas kode ]]></b:skin>

/*lava lamp menu http://www.hzndi.blogspot.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;
}
/*lava lamp menu http://www.hzndi.blogspot.com/ end*/

5. Klik Simpan template.

6. Sekarang kamu klik Tata Letak --> Tambah Gadget --> HTML/Javascript dan kamu salin kode di bawah ini dan kamu masukkan kedalam kotak HTML/Javasript tadi.

<div class="lavalamp dark">
<ul>
<li class="active"><a href="">Home</a></li>
<li><a href="MASUKKAN URL YANG INGIN KAMU TUJU DISINI">GANTI DENGAN KATA2 SESUKA KAMU</a></li>
<li><a href="MASUKKAN URL YANG INGIN KAMU TUJU DISINI">GANTI DENGAN KATA2 SESUKA KAMU</a></li>
<li><a href="MASUKKAN URL YANG INGIN KAMU TUJU DISINI">GANTI DENGAN KATA2 SESUKA KAMU</a></li>
<li><a href="MASUKKAN URL YANG INGIN KAMU TUJU DISINI">GANTI DENGAN KATA2 SESUKA KAMU</a></li>
<li><a href="MASUKKAN URL YANG INGIN KAMU TUJU DISINI">GANTI DENGAN KATA2 SESUKA KAMU</a></li>
<li><a href="MASUKKAN URL YANG INGIN KAMU TUJU DISINI">GANTI DENGAN KATA2 SESUKA KAMU</a></li>
</ul>
<div class="floatr"></div>
</div>

Note : Untuk kode yang berwarna biru diatas adalah warna background dari menu horizontal. Kamu bisa pilih salah satu warna backgroundnya dengan mengganti kode tersebut dengan salah satu kode di bawah ini.

A. Warna default