Lavalamp navigation menu

Demonya bisa kawan-kawan lihat disini

Cara membuatnya :

1. Login blogger


2. Rancangan, Edit Html, Cari kode ]]></b:skin>


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/AVvXsEiljcjyOkFJdsvuv2sMivgHTdPs4COxxe4tT2dj6jIZbT65Qz4RORXMehhe5xxKbEuyEzebfaQhpBkQfdHKlffIzuEsy1N9ns7TkwdJP780m-xaC4ReOuzEhGSWxWc_nmcQOBexpAQ4lzU/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/AVvXsEiljcjyOkFJdsvuv2sMivgHTdPs4COxxe4tT2dj6jIZbT65Qz4RORXMehhe5xxKbEuyEzebfaQhpBkQfdHKlffIzuEsy1N9ns7TkwdJP780m-xaC4ReOuzEhGSWxWc_nmcQOBexpAQ4lzU/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://kangdadang.googlecode.com/files/jquery.easing.min.js' type='text/javascript'/>

 <script src='http://kangdadang.googlecode.com/files/jquery-1.1.3.1.min.js' type='text/javascript'/>

<script src='http://kangdadang.googlecode.com/files/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>

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>

sebenarnya ini sesuai template kawan karena pasti ada kemungkinan perbedaan template...

Selanjutnya jika kawan-kawan tertarik dengan menu Lavalamp No Image; cara membuatnya yaitu sebagai berikut :



Seperti pada cara no 3 tinggal simpan CSS berikut di atas kode ]]></b:skin> :

/* ---------------

lavaLamp no Image

---------------------------------- */

.lavaLampNoImage {

            position: relative;

            height: 29px;

            width: 421px;

            background-color: white;

            padding: 15px;

            margin: 10px 0;

            overflow: hidden;

            border: 1px solid gray;

        }

                .lavaLampNoImage li {

                    float: left;

                    list-style: none;

                }

                    .lavaLampNoImage li.back {

                        border: 1px solid #000;

                        background-color: #e6e8ea;

                        width: 9px;

                        height: 30px;

                        z-index: 8;

                        position: absolute;

                    }

                    .lavaLampNoImage li a {

                        font: bold 14px arial;

                        text-decoration: none;

                        color: #000;

                        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;

                    }

                        .lavaLampNoImage li a:hover, .lavaLampNoImage li a:active, .lavaLampNoImage li a:visited {

                            border: none;

                        }

sekarang lihat pada Langkah ke 4 kawan-kawan bisa lihat script yang ditandai warna biru #1 kawan2 cukup ganti dengan  #2,



untuk cara pemanggilannya seperti pada langkah 5 dan 6 yaitu :

<ul class="lavaLampNoImage" id="2">

    <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>

dan simpan template.....

Yang berikutnya pembuatan Lavalamp Bottom Style, langsung ke caranya :



Seperti pada cara no 3 tinggal simpan CSS berikut di atas kode ]]></b:skin> :

/* ---------------

lavaLamp Bottom Style

---------------------------------- */

.lavaLampBottomStyle {

            position: relative;

            height: 29px;

            width: 421px;

            background-color: white;

            padding: 15px;

            margin: 10px 0;

            overflow: hidden;

            border: 1px solid gray;

        }

                .lavaLampBottomStyle li {

                    float: left;

                    list-style: none;

                }

                    .lavaLampBottomStyle li.back {

                        border-bottom: 5px solid blue;

                        width: 9px;

                        height: 30px;

                        z-index: 8;

                        position: absolute;

                    }

                    .lavaLampBottomStyle li a {

                        font: bold 14px arial;

                        text-decoration: none;

                        color: #000;

                        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;

                    } 

                        .lavaLampBottomStyle li a:hover, .lavaLampBottomStyle li a:active, .lavaLampBottomStyle li a:visited {

                            border: none;

                        }

sekarang lihat pada Langkah ke 4 kawan-kawan bisa lihat script yang ditandai warna biru #1 kawan2 cukup ganti dengan  #3,



untuk cara pemanggilannya seperti pada langkah 5 dan 6 yaitu :

<ul class="lavaLampBottomStyle" id="3">

    <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>

dan simpan template.....

Semoga berhasil dengan pekerjaan anda.....!!!!

Terima Kasih

Created By Syarief Hidayat



------------------------------------------------------------------------------------------