Sejauh ini blog Oto Website telah berbagi bermacam-macam navigation menu yang bisa Anda lihat di label Navigation Menu pada daftar isi Oto Website, dan untuk kali ini Oto Website akan berbagi tutorial tentang navigation menu kembali tema kali ini adalah Fancy CSS3 & jQuery Lavalamp Menu For Blogger.

Dan seperti yang disebutkan dalam judul di atas. menu ini bekerja dengan CSS3 dan jQuery. Anda dapat menggunakan menu ini dalam 6 warna hanya dengan mengubah sebuah kata dalam code menu. HTML menu dirancang oleh Insidesigns dan helperblogger saya telah merubahnya agar dapat bekerja dengan sempurna pada blog blogger. Untuk mengetahui code apa saja yang di gunakan silahkan Anda lihat dan gunakan kode berikut untuk membuatnya. Disini saya akan menjelaskan cara membuatnya bukan cara memasangnya jadi saya akan meberikan Anda kode yang di gunakan untuk membuatnya, jika Anda mengalami kesulitan jangan sungkan untuk bertanya.

Sebelumnya silahkan lihat terlebih dahulu demo Fancy CSS3 & jQuery Lavalamp Menu For Blogger yang sudah di persiapkan agar Anda tau tampilan navigations menu kali ini!



jQuery
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script><script src="https://otowebsite-blogspot.googlecode.com/svn/trunk/lavalamp-menu.js" type="text/javascript"></script>


CSS3
/*LAVALAMP MENU BY http://www.otowebsite.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;
}
/*LAVALAMP MENU BY http://www.otowebsite.blogspot.com/ END*/


HTML/JavaScript
<div class="lavalamp dark">
<ul>
<li class="active"><a href="">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contacts</a></li>
<li><a href="#">Back to Article</a></li>
<li><<a href="#">How it Works?</a></li>
</ul>
<div class="floatr"></div>
</div>

Poskan Komentar Blogger Disqus

  1. kalo cara memasangnya gimana kak..?

    BalasHapus
  2. @Noufal AgisKode pertama di atas </head>
    kode kedua di atas ]]></b:skin>
    kode ketiga di dalam elemen HTML/JavaScript (atau di dalam template Anda) :Q

    BalasHapus
  3. kenapa komentar saya nggak di muncul GAN !!!!!!!

    BalasHapus
  4. tujuan saya komentar di blog ini untuk mendapatkan BACKLINK GAN JADI TOLONG DIMUNCULIN YA GAN :-d :-d \o/

    BalasHapus
  5. PLEASE GAN SAYA BLOGGER PEMULA yang igin mendapat backlink GAN
    :( :( =( =(

    BalasHapus
  6. sekali lagi saya mohon komentar saya di APPROVE GAN tolong ~x( ~x( =( =(
    karena tujuan saya comment untuk dapat backlink GAN :Ozz 7:( x@ X@

    BalasHapus
  7. Saya mohon maaf kalo komentar saya nggak ber etika JURAGAN :-d :-d :'( :'( :'(

    BalasHapus
  8. @bayu naxtegalTerimakasih banyak telah mengcomplaint saya, saya juga manusia biasa yang memiliki ego tinggi dan sama seperti yang lainnya.
    artikel sudah saya rubah.
    sekali lagi saya berterimakasih karna telah mengingatkan saya.
    Salam kenal, semoga Anda tidak kapok di sini dan memaafkan saya atas komentar Anda.
    maaf jika koment yang bersifat merugikan saya hapus.

    BalasHapus
  9. @dek rif
    terima kasih kak, atas infonya

    BalasHapus
Catatan:
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE ANDA...</i>
Kode yang panjang bisa menggunakan tag <i rel="pre">KODE PANJANG ANDA...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS ANDA DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS ANDA DI SINI...</i>

Penting:
Jika Anda mengajukan pertanyaan klik 'Subscribe by email' link di bawah form komentar untuk mengetahui komentar balasan.

Khusus untuk membalas komentar disarankan menggunakan tombol balas/reply di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur.

Dilarang Meninggalkan Link Aktif, Link Aktif Terpaksa Akan Saya Hapus Dari Komentar.

NB: Jika ingin menuliskan kode pada komentar harap gunakan Tool untuk mengkonversi kode tersebut agar kode bisa muncul dan jelas atau gunakan tool dibawah "Konversi Kode di Sini!".

Konversi Kode di Sini! Daftar Member Aktif

 
Top