jQuery Navigasi Slide Out

بِسْمِ اﷲِالرَّحْمٰنِ الرَّحِيْم

Tutorial kali ini saya akan membahas tentang Membuat jQuery Navigasi Slide Out atau Menu yang tetap berada di atas walaupun kita menggunakan scroll. Karena tutorial ini saya buat semudah mungkin, jadi saya harap pembaca bisa mengerti apa yang saya bahas dan saya harap mengerti telah apa yang saya maksud. OK kalau begitu kita langsung saja menuju ke TKP

jQuery Navigasi Slide OutKlik disini untuk melihat demo jQuery Navigasi Slide Out

1. Seperti biasa, masuk ke akun blogger dulu
2. Kemudian klik Rancangan, Edit HTML
3. Setelah itu centang Expand Template Widget
Expand Template Widget
4. Cari kode di bawah ini dengan tombol F3

</b:skin>

5. Kemudian copy paste kode di bawah ini

<!-- Begin jQuery Slide Out -->
ul#navigation {
    position: fixed;
    margin: 0px;
    padding: 0px;
    top: 0px;
    right: 0px;
    list-style: none;
    z-index:999999;
    width:721px;
}
ul#navigation li {
    width: 103px;
    display:inline;
    float:left;
}
ul#navigation li a {
    display: block;
    float: left;
    margin-top: -2px;
    width: 100px;
    height: 25px;
    background-color: #E7F2F9;
    background-repeat: no-repeat;
    background-position: 50% 10px;
    border: 1px solid #BDDCEF;
    text-decoration: none;
    text-align: center;
    padding-top: 80px;
}
ul#navigation li a {
    display: block;
    float:left;
    margin-top: -2px;
    width: 100px;
    height: 25px;
    background-color:#E7F2F9;
    background-repeat:no-repeat;
    background-position:50% 10px;
    border:1px solid #BDDCEF;
    text-decoration:none;
    text-align:center;
    padding-top:80px;
    -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;
    opacity: 0.7;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}
ul#navigation .home a{
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLoqLf1QbmuhqDO2K2NTo-oJhOwX8-3wUYQofvwFOmX-zUtS0IpvhkIwtxyV9ntKu8N4zCnL6ozSsMF4LTMAjOIe86qmAEGhycNFkcdZSYi_NBlxcyNVdDqGn4d3jU5LzR-iV4L2rK5EDv/s400/home.png);
}
ul#navigation .about a      {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHongXGgVFTBNkG-AeQy1uR9Cwj4RS3m3xWoP5KskD9n8el5_mkSC-dT7vl0JTgBeueRjHOSTG29RponJbY4yTBA-MEttxGDnPxOKAsb9fO76YzIdbmZrvSX2fmX8hC4hw0c66nyCiN7wg/s1600/id_card.png);
}
ul#navigation .search a      {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQiSExrbaV52EwPpigkEdjLt_S_32ujb30IjCdvJQ2rzBe58Z3MyIPwNBqdYdXgNXJ47acRJmtDn-TXCHxqDM_A0OM6-VWedhbfCDpemweU1HCbqJCYEbrb8RHvpI0SygqG2iJ253yi_FY/s400/search.png);
}
ul#navigation .podcasts a      {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMIo3Ozt8zD_9vokToLYePLN4huIFmjtZ7IgiK_ibSwGgDuEhRK-6tc03BSYl9m_3HdfIUscZr2NNwHMBh4Sp9wRCLxZA4_WXbk2Ub_tBsUMODIUTOK4jYIUBdn-D63nfcnFljBolizkTw/s400/ipod.png);
}
ul#navigation .rssfeed a   {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjd3IuwyDYi_5dvXCBvBtCFEfeg4xhSQ6u4NNVWXWN7tSWNPSYvNLE6wb0pO6riHSMCyj5kdZGGRpFA2r_EuQ4EKTmP04SA1tce1ns4_a16Trm5ih9fC-V8yUxcZqpTwhDA9eHAvhKi4pUw/s400/rss.png);
}
ul#navigation .photos a     {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7rKSVc9v09tby7IcYae9msve8X7-BO7evk6HRGamqxSnPetS7EbJODNS1PISnUiQUGK34B-8rcHYeuK3vcf7ywOoIk7SB3UZp4tYOtA13TPS4inSUzDkvzBZwu3Khcdgm3Cgj6iUyExU3/s400/camera.png);
}
ul#navigation .contact a    {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhu3juudchbE7qYHJQYTP9WmKYFOltGBJYetgHnHcBbCH0COmOWQzFyx8Be8MfeEeB038SS7ZPbH3M3uHHSzXd7_TzOezaUNMwzcwFNAcziKh1huRQemk86FfvhxlRR9W3UoI3T0o605JS_/s400/mail.png);
}
ul#navigation li a:hover{
     background-color:#CAE3F2;
}
ul#navigation li a span{
    letter-spacing:2px;
    font-size:11px;
    color:#60ACD8;
    text-shadow: 0 -1px 1px #fff;
}
<!-- End jQuery Slide Out -->

6. Kemudian paste kode tadi di atas kode

</b:skin>

7. Masukkan framework jQuery ke dalam template.
   Ingat bila sudah terdapat framework jQuery, JANGAN copy kode ini

<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>

8. Jika belum mempunyai framework jQuery, maka copy framework tersebut di atas kode

</head>

atau di bawah kode

</b:skin>

9. Kemudian masukkan script dari Slide Out tersebut

<script type="text/javascript">
$(function() {
    var d=300;
    $('#navigation a').each(function(){
        $(this).stop().animate({
            'marginTop':'-80px'
        },d+=150);
    });

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

10. Letakkan di atas

</head>

atau di bawah kode

</b:skin>

11. Kemudian simpan template
12. Masuk ke Elemen Laman
13. Kemudian tambah gadget
14. Klik HTML/Javascript
15. Copy kode ini pada kotak content

<ul id="navigation">
 <li class="home"><a href="URL"><span>Home</span></a></li>
 <li class="about"><a href="URL"><span>About</span></a></li>
 <li class="search"><a href="URL"><span>Search</span></a></li>
 <li class="photos"><a href="URL"><span>Photos</span></a></li>
 <li class="rssfeed"><a href="URL"><span>Rss Feed</span></a></li>
 <li class="podcasts"><a href="URL"><span>Podcasts</span></a></li>
 <li class="contact"><a href="URL"><span>Contact</span></a></li>
</ul>

16. Kemudian simpan

ٱلۡحَمۡدُ لِلَّهِ رَبِّ ٱلۡعَـٰلَمِينَ

Artikel Terkait