Home » » Lavalamp Navigation Menu

Lavalamp Navigation Menu

Caranya adalah sebagai berikut :

1. Login ke Akun Blogger anda masing-masing.
2. Klik Design or Rancangan, kemudian pilih Edit HTML
3. Centang (Expand Widget Template)
4. Untuk keamanan lebih baik kita (Download Template Lengkap)
5. Gunakan (Ctrl+F) or (Alt+E+F) untuk memudahkan pencarian
6. Cari kode ]]></b:skin>
7. 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;
                        }

8. 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>
9. Cari kode berikut
<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>
10. 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>

11. Save



Caranya adalah sebagai berikut :

1. Login ke Akun Blogger anda masing-masing.
2. Klik Design or Rancangan, kemudian pilih Edit HTML
3. Centang (Expand Widget Template)
4. Untuk keamanan lebih baik kita (Download Template Lengkap)
5. Gunakan (Ctrl+F) or (Alt+E+F) untuk memudahkan pencarian
6. Cari kode ]]></b:skin>
7. Dan Simpan kode berikut diatasnya :
/* ---------------
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;
                        }
8. 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;#2&quot;).lavaLamp({
                fx: &quot;backout&quot;,
                speed: 700,
                click: function(event, menuItem) {
                    return false;
                }
            });
        });
    </script>
9. untuk cara pemanggilannya seperti pada langkah 9 dan 10 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>


Yang berikutnya pembuatan Lavalamp Bottom Style, langsung ke caranya :

1. Seperti pada cara no 7 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;
                        }
2. Sekarang lihat pada Langkah ke 8 kawan-kawan bisa lihat script yang ditandai warna biru #1 kawan2 cukup ganti dengan  #3,

3. Untuk cara pemanggilannya seperti pada langkah 9 dan 10 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>

4. Save
Share
Related Post

0 comments:

Archives

Label


ShoutMix chat widget
Guest Book
 

Subscribe Via Email

Enter your email address:

Delivered by FeedBurner

My Blog

Show

Exploration


Show

[Valid Atom 1.0]
Google PageRank Checker Powered by  MyPagerank.Net

Powered by FeedBurner

SEO Stats powered by MyPagerank.Net

Show

Show

Exploration

Welcome To My Blog

I hope you find what you're looking for here . . Thank you for visit to my simple blog . .

Rizky Maulana

This life is a sacrifice and struggle . . and I am just a man who wants to be better than ever . .