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://lh6.googleusercontent.com/-ifHXZDpYWoU/TXpLn9bszpI/AAAAAAAAAUc/pxL0pwJANsM/s1600/lava.gif") no-repeat right -30px;width: 9px; height: 30px;z-index: 8;position: absolute;}.lavaLampWithImage li.back .left {background: url("https://lh6.googleusercontent.com/-ifHXZDpYWoU/TXpLn9bszpI/AAAAAAAAAUc/pxL0pwJANsM/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!

Posting Komentar

  1. Artikelnya keren sob...
    tapi kalau pake ini apa ga membebani pageload blog kita??? :D
    oh ea jangan lupa kunjungan baliknya ke Pramuka Smanab dan jangan lupa baca artikel Social Activity In Petitenget Beach To 50 Years Scouts Indonesia

    BalasHapus
  2. Makasih kunjungannya sob..
    menu jQuery ini memang sedikit membebani pageload blog kita. krng tinggal suka" kita, mau isi ato gk.. ^_^

    BalasHapus
  3. Wah itu screenshot diatas maksudnya apa?
    setelah saya teliti kayaknya screenshotnya di take di warnet ea.
    Lihat koleksi foto kami di Photo Gallery salah satunya adalah Photo Smanab Scout Climbing Pucak Mangu temple

    BalasHapus
  4. @Pramuka Smanab

    Haha iya sob, itu ss nya buat pas di net!
    oh ea, nantikan post edit blog agar jadi keren.. Terimakasih kunjungannya salam blogger

    BalasHapus

Catatan:
1. Komentar Anomin telah kami buka, silahkan berkomentar yang sopan
2. Jika kurang mengerti dengan posting di atas silahkan ajukan pertanyaan
3. Kami usahakan membalas komentar anda secepat kilat!
4. Masalah "Link Rusak" bisa anda laporkan lewat komentar
5. Jika meninggalkan Link Aktif pada komentar terpaksa kami hapus

Salam Admin
Darma Jaya

 
Top