JQuery Menu Lavalamp navigation

Langkah-langkahnya :
1. Login blogger
2. Rancangan, Edit Html, Cari kode ]]> :
3. Dan Simpan kode berikut diatasnya :

/* ---------------lavaLamp With Image---------------------------------- */.lavaLampWithImage {position: relative;height: 29px;width: 421px;background:-moz-linear-gradient(left, #ff6900, #ff9700, #ff6900, #ff9700, #ff6900); no-repeat top;-moz-border-radius:10px;-khtml-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;padding: 15px;margin: 10px 0;overflow: hidden;}.lavaLampWithImage li {float: left;list-style: none;}.lavaLampWithImage li.back {background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-LhCWle2EDribT6ezR_gWSYpg0-Jw4YHx3u68XUnff92-MZZkInlXZCDieVXc3jIii8E5XL5AOTOxvEuMeRJFWbwnB8uwn4Ca2F1kW6STgcO4DDjPrThhdhDp9uSgzKgXJXzQsKKVuyQ/s1600/lava.gif") no-repeat right -30px;width: 9px; height: 30px;z-index: 8;position: absolute;}.lavaLampWithImage li.back .left {background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-LhCWle2EDribT6ezR_gWSYpg0-Jw4YHx3u68XUnff92-MZZkInlXZCDieVXc3jIii8E5XL5AOTOxvEuMeRJFWbwnB8uwn4Ca2F1kW6STgcO4DDjPrThhdhDp9uSgzKgXJXzQsKKVuyQ/s1600/lava.gif") no-repeat top left;height: 30px;margin-right: 9px; /* 7px is the width of the rounded shape */}.lavaLampWithImage li a {font: bold 14px arial;text-decoration: none;color: #fff;outline: none;text-align: center;top: 7px;text-transform: uppercase;letter-spacing: 0;z-index: 10;display: block;float: left;height: 30px;position: relative;overflow: hidden;margin: auto 10px;}.lavaLampWithImage li a:hover, .lavaLampWithImage li a:active, .lavaLampWithImage li a:visited {border: none;}

4. Simpan java script berikut tepat diatas kode </head>

<script src='http://japarus.xtgem.com/blogspot/jquery.easing.min.js' type='text/javascript'/><script src='http://japarus.xtgem.com/blogspot/jquery-1.1.3.1.min.js' type='text/javascript'/><script src='http://japarus.xtgem.com/blogspot/jquery.lavalamp.min.js' type='text/javascript'/><script type='text/javascript'>$(function() {$(&quot;#1&quot;).lavaLamp({fx: &quot;backout&quot;,speed: 700,click: function(event, menuItem) {return false;}});});</script>

5. Cari kode berikut (ctrl+F untuk mempermudah pencarian) :

<div id='header-wrapper'><b:section class='header' id='header' maxwidgets='1' showaddelement='no'><b:widget id='Header1' locked='true' title='test (Header)' type='Header'/></b:section></div>

ini kalau mau posisi nya di bawah header ..
kalau mau posisinya seperti punya saya di atas cari kode ini <div id='top-wrap'>


6. jika sudah ketemu simpan kode beikut dibawah kode yang dicari tadi :

<ul class="lavaLampWithImage" id="1"><li><a href="#">Home</a></li><li><a href="#">Plant a tree</a></li><li><a href="#">Travel</a></li><li><a href="#">Ride an elephant</a></li></ul>

Sekian dari saya cara cara psang Jquery menu lamp di blogger, semoga artikel ini bermanfaat bagi sobat blogger semua!