Syed Amirul Hakim: Cara Membuat Menu Horizontal Lavalamp Dengan CSS dan Jquery

Sebelumnya Taqobalallahu Minna Waminkum. Selamat lebaran 1433 H bagi kawan2ku semuanya. setelah beberapa hari vakum dikarenakan kegiatan offline, akhirnya bisa update postingan juga nih gan. Di tanggal 2 Syawal ini saya akan membagikan sebuah Horizontal menu keren dengan pilihan warna yang beragam. Selain itu terdapat pilihan warna 6 buah yang bisa disesuaikan dengan warna template blog kamu.

Drop down menu juga sangat dibutuhkan untuk sebuah blog, selain untuk mempercantik tampilan blog, dengan menggunakan fitur ini, blog kamu akan lebih terlihat fresh dan memperlebar space blog

kamu karena akan ada beberapa link yang bisa ditaruh di horizontal menu ini. Oh iya, sebelumnya terima kasih kepada insicdesigns yang sudah mendesain drop down menu ini serta kepada helperblogger yang sudah membuatnya bekerja lebih baik untuk platform blogger. Langsung saja kamu lihat cara membuatnya di bawah ini :

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