Cara/tips memasang jQuery lava-lamp navigasi menu

Pada info kali ini, aku posting satu jQuery navigasi menu yang di panggil Lava lamp.  dari demo asal yang dapat Anda lihat di sini (silakan klik). Tutorial yang aku coba dari net.tutsplus.com ini nampaknya sangat menarik dari segi effect dan mudah untuk di pasang di template blogspot. Aku mencoba implement di blogspot dan berhasil. Namun, sedikit modifikasi telah dilakukan bertujuan agar navigasi menu ini sesuai pada berbagai jenis theme dan dapat di pasang terus di HTML / Javascript. Background asal di ubah oleh warna background pada template. Warna button, warna teks dan ukuran juga di ubah karena ukuran asli yang terlalu besar.

Untuk memasang jQuery lava-lamp navigasi menu , ikut beberapa langkah di bawah ini.

Salin dan paste kode di bawah pada HTML / Javascript


<style>
#container {
width: 100%;
margin: 0px 0px;
padding: 0px 0px 40px 10px;
}

ul, li {
margin: 0; padding: 0;
}

#blob {
border-right: 1px solid #0059ec;
border-left: 1px solid #0059ec;
position: absolute;
top: 0;
z-index : 1;
background: #0b2b61;
background: -moz-linear-gradient(top, #0b2b61, #1153c0);
background: -webkit-gradient(linear, left top, left bottom, from(#0b2b61), to(#1153c0));
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-moz-box-shadow: 2px 3px 5px #011331;
-webkit-box-shadow: 2px 3px 5px #011331;
}

#lava-lamp {
background: #32312E;
float: left;
border: 1px solid #BDBCBA;
margin: 0px 0px 15px;
padding: 8px 430px 10px 0px;
}

#lava-lamp li {
float: left;
list-style: none;
border-right: 1px solid #4a4a4a;
border-left: 0px solid #4a4a4a;
}

#lava-lamp li a {
color: #DDDCD8;
text-shadow: 0 0px 1px #81807B;
position: relative;
z-index: 2;
float: left;
font-size: 13px;
font-family: arial, sans-serif;
font-weight: bold;
text-decoration: none;
padding: 0px 20px;
}
</style>

<div id="container">

<ul id="lava-lamp">
<li id="selected"><a href="http://link-di-sini.blogspot.com">Home</a></li>
<li><a href="http://link-di-sini.blogspot.com">About</a></li>
<li><a href="http://link-di-sini.blogspot.com">Blog</a></li>
<li><a href="http://link-di-sini.blogspot.com">More About My Portfolio</a></li>
<li><a href="http://link-di-sini.blogspot.com">Contact</a></li>
</ul>

</div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>

<script type="text/javascript" src="https://sites.google.com/site/jquery01/jquery.spasticNav.js"></script>

<script type="text/javascript">
$('#lava-lamp').spasticNav();
</script>
 Pesan:
1.Untuk mengubah warna button, edit kode yang di bold berikut.
background: #0b2b61;
background: -moz-linear-gradient(top, #0b2b61, #1153c0);
background: -webkit-gradient(linear, left top, left bottom, from(#0b2b61), to(#1153c0));
2.Untuk mengubah warna background, edit kode yang di bold berikut.
background: #32312E;
3.Untuk mengubah URL dan Title, edit kode yang di bold berikut.
<li id="selected"><a href="http://link-di-sini.blogspot.com">Home</a></li>

<li><a href="http://link-di-sini.blogspot.com">About</a></li>

<li><a href="http://link-di-sini.blogspot.com">Blog</a></li>

<li><a href="http://link-di-sini.blogspot.com">More About My Portfolio</a></li>

<li><a href="http://link-di-sini.blogspot.com">Contact</a></li>
4.Untuk mengubah jarak background ( lihat gambar di bawah), edit kode yang di bold berikut.

      
 …Semoga Bermanfaat… !.Semoga Sukses.! .send komentar ya.




Artikel terkait:

{ 4 komentar... read them below or add one }

Riva mengatakan...

Salam Kenal !!
TRima kasih Mas, Kelihatannya animasi navigasi tersebut sangat bagus. Saya akan mencobanya,mudah-mudahan berhasi
Rief

Anonim mengatakan...

Hi there, I wish foг to subscribe foг this weblog to obtaіn most гeсеnt updates,
so ωhere can i do it please asѕist.

Look іntο my site ... lloyd irvin

Anonim mengatakan...

Hey I know this is оff tορiс but I ωas ωοndeгіng
if you κnеw of any widgets I could аdd
to my blog that аutomatiсally tweet my newеѕt tωitteг updatеs.
I've been looking for a plug-in like this for quite some time and was hoping maybe you would have some experience with something like this. Please let me know if you run into anything. I truly enjoy reading your blog and I look forward to your new updates.

Feel free to visit my site; best reputation management companies

Anonim mengatakan...

I'd like to thank you for the efforts you've put in penning this site.
I'm hoping to check out the same high-grade blog posts by you in the future as well. In truth, your creative writing abilities has motivated me to get my own site now ;)

Also visit my web page: Tasers Stun Guns

Posting Komentar

terima kasih telah berkunjung sobat.
Silahkan komentar,kritik dan sarannya
setidaknya tegur sapa.heheh