Cara Buat Slide Menu Navigation Dengan JQuery

Cara Buat Slide Menu Navigation Dengan JQuery

Pada kesempatan kali ini saya akan Berbagi Tips And Trik Blogger Yaitu Cara Membuat Slide Menu Navigation Dengan JQuery Dan dengan adanya Widget ini dihalaman Blog sobat pastinya akan lebih indah dan menarik dan bisa menghemat ruangan didalam Blog.


Nah buat sobat yang berminat memasang di blog nya, sobat bisa ikuti Tutorial dibawah ini.

  1. Silahkan Sobat Login Ke Akun Blogger
  2. Klik Rancangan kemudian Pilih Edit HTML lalu cari kode ]]> Pada Template Sobat.
  3. Bila Sudah Ketemu Silahkan Copas script berikut dan letakkan di atas kode ]]> tadi.
    /*– Slide Menu Navigation –*/
    .headerfixed
    {
    width:600px;
    height:56px;
    position:absolute;
    top:50%;
    left:10px;
    background:#fff url(title.png) no-repeat top left;
    }
    ul#navixed {
    position: fixed;
    margin: 0px;
    padding: 0px;
    top: 0px;
    right: 10px;
    list-style: none;
    z-index:999999;
    width:721px;
    }
    ul#navixed li {
    width: 103px;
    display:inline;
    float:left;
    }
    ul#navixed li a {
    display: block;
    float:left;
    margin-top: -2px;
    width: 100px;
    height: 25px;
    background-color:#000;
    background-repeat:no-repeat;
    background-position:50% 10px;
    border:1px solid #BDDCEF;
    -moz-border-radius:0px 0px 10px 10px;
    -webkit-border-bottom-right-radius: 10px;
    -webkit-border-bottom-left-radius: 10px;
    -khtml-border-bottom-right-radius: 10px;
    -khtml-border-bottom-left-radius: 10px;
    text-decoration:none;
    text-align:center;
    padding-top:80px;
    opacity: 0.7;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
    }
    ul#navixed li a:hover{
    background-color:#000;
    }
    ul#navixed li a span{
    letter-spacing:2px;
    font-size:11px;
    color:#FFF;

    }
    ul#navixed .home a{
    background-image: url(http://i1090.photobucket.com/albums/i367/bandiets/filiex-home.png);
    }
    ul#navixed .about a {
    background-image: url(http://i1090.photobucket.com/albums/i367/bandiets/filiex-card.png);
    }
    ul#navixed .search a {
    background-image: url(http://i1090.photobucket.com/albums/i367/bandiets/filiex-search.png);
    }
    ul#navixed .podcasts a {
    background-image: url(http://i1090.photobucket.com/albums/i367/bandiets/filiex-ipod.png);
    }
    ul#navixed .rssfeed a {
    background-image: url(http://i1090.photobucket.com/albums/i367/bandiets/filiex-rss.png);
    }
    ul#navixed .photos a {
    background-image: url(http://i1090.photobucket.com/albums/i367/bandiets/filiex-camera.png);
    }
    ul#navixed .contact a {
    background-image: url(http://i1090.photobucket.com/albums/i367/bandiets/filiex-mail.png);
    }

  4. Selanjutnya Sobat cari kode dan letakkan script berikut ini di atas kode tersebut.

    $(function() {
    var d=300;
    $('#navixed a').each(function(){
    $(this).stop().animate({
    'marginTop':'-80px'
    },d+=150);
    });

    $('#navixed > li').hover(
    function () {
    $('a',$(this)).stop().animate({
    'marginTop':'-2px'
    },200);
    },
    function () {
    $('a',$(this)).stop().animate({
    'marginTop':'-80px'
    },200);
    }
    );
    });

  5. lalu cari kode dan letakkan script berikut ini di atas kode tersebut.

    Rubahlah Tanda # Dengan URL kehendak Sobat.

  6. Terakhir silahkan Sobat simpan template Dan Lihat Hasilnya

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s