Monday, August 20, 2012

Cara Membuat Menu Horizontal Lavalamp Dengan CSS dan Jquery

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>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script src="http://hzndi.googlecode.com/files/lavalamp-menu.js" type="text/javascript"></script>

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


Kode warna Default : <div class="lavalamp">

B. Warna magenta

Kode warna Magenta : <div class="lavalamp magenta">

C. Warna Cyan

Kode warna Cyan : <div class="lavalamp cyan">
 
D. Warna Hitam

Kode warna Hitam : <div class="lavalamp dark">

E. Warna Oranye
 
Kode warna Oranye : <div class="lavalamp orange">

F. Warna Kuning
Kode warna Kuning : <div class="lavalamp yellow"> 

7. Klik Simpan Template dan kamu bisa melihat demo onlinenya dari helperblogger disini

Postingan Terkait:

37 comments:

  1. saya mulai berpikir untuk pake menu di atas seperti ini.. :)

    selamat berlebaran kang.. :)
    mohon maaf jika adalah salah.. :)

    ReplyDelete
    Replies
    1. selamat berlebaran juga :) hheh ayo dipake, efeknya bgus2 tau :)

      Delete
  2. bagus juga ya? blog kita jadi lebih 'meriah' !!
    Selamat Iedul Fitri...Mohon maaf lahir batin. Semoga ibadah ramadhan kita diterima Allah SWT

    ReplyDelete
  3. minal aidin wal faidzin, mohon maaf lahir dan bathin

    ReplyDelete
  4. wah gan, blog ente mantep deh info-infonya. kayanya ane bakal sering kesini dan sering nanya nih

    ReplyDelete
    Replies
    1. yoi gpp , mudaha2n aja ane bisa jwab pertanyaan ente hehe

      Delete
  5. Sewaktu-waktu akan gue coba ilmu ini gan..

    ReplyDelete
  6. yaampun bang banyak banget langkah2nya :| di bookmark dulu deh

    ReplyDelete
    Replies
    1. sedikit kok om, yang penting ikutin saja langkah2nya :D

      Delete
  7. selamat lebaran, mohon maaf lahir juga batin tapi saya kurang ngerti nih. hahaha

    ReplyDelete
  8. keren... tapi aku lebih suka blogku sederhana aja

    ReplyDelete
  9. tiap masuk sini selalu dapet ilmu baru. nie share sob ..

    ReplyDelete
  10. totorialnya sangat bagus, keren.makasih

    ReplyDelete
  11. . . simpan dulu achhhh. cz waktu itu aq cari gak nemu^. huhh . .

    ReplyDelete
  12. kayaknya gak bakal tampil sempurna di opera...

    ReplyDelete
    Replies
    1. maaf baru bales komennya :) ane malah belum nyoba di opera, mendingan pake chrome saja

      Delete
  13. Nampaknya mantap nieh bila dipasang di blogku Gan,ta bookmarknya.
    Makasih sudah berbagi,happy blogging.

    ReplyDelete
  14. lengkap banget artikelnya,,,mantab

    ReplyDelete
  15. tampilannya keren, tapi maap, gak works.. jadi gak guna..ketika di klik gak respon apa-apa. setelah saya lihat scriptnya. mas copy codenya tanpa edit, soalnya beda klo jalan di platform blogspot. saya udah browsing kemana-mana, dan kodenya sama semua. saya sharing disini aja. edit http://hzndi.googlecode.com/files/lavalamp-menu.js

    ganti sedikit pada listing code ini:

    }).click(function(){
    $(this).siblings('li').removeClass('active');
    $(this).addClass('active');
    return false;
    });

    ganti aja jadi true, jadi kyk gini:

    }).click(function(){
    $(this).siblings('li').removeClass('active');
    $(this).addClass('active');
    return true;
    });

    saya jamin jalan di blogspot. terima kasih.. salam kenal.

    ReplyDelete
    Replies
    1. Terimakasih atas pemberitahuannya mas :) sudah saya ganti kodenya :)

      Delete
  16. Tanya
    Kl misalkan saya buat nama Misteri contohnya.
    Nah saya pengen pas dipencet Misteri keluar semua tentang misteriaja. gimana gan. sblmnya saya banyak di blog saya tentang misteri.
    pengen di kayak gituin biar rapi soalnya blog saya ngacak ada ttg komputer dlll. balesannya dong

    ReplyDelete
  17. Alow Hznd
    salam kenal, tampilan blognya saya suka...banyak warna tapi tidak norak...saya nubie nih masih belajar...

    ReplyDelete
  18. langkah yang ke 6 itu dimana ngeletakin HTML/JavaScriptnya ??

    ReplyDelete

Komentarmu menunjukan kecerdasanmu, Kalau komentar cuma buat cari link buat apa ? :)

Twitter Delicious Facebook Digg Stumbleupon Favorites More