jQuery Navigasi Slide Out v2

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

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 Out v2Klik disini untuk melihat demo jQuery Navigasi Slide Out v2

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

ul#navigation {
    position: fixed;
    margin: 0px;
    padding: 0px;
    top: 10px;
    left: 0px;
    list-style: none;
    z-index:9999;
}
ul#navigation li {
    width: 100px;
}
ul#navigation li a {
    display: block;
    margin-left: -2px;
    width: 100px;
    height: 70px;    
    background-color:#CFCFCF;
    background-repeat:no-repeat;
    background-position:center center;
    border:1px solid #AFAFAF;
    -moz-border-radius:0px 10px 10px 0px;
    -webkit-border-bottom-right-radius: 10px;
    -webkit-border-top-right-radius: 10px;
    -khtml-border-bottom-right-radius: 10px;
    -khtml-border-top-right-radius: 10px;
    /*-moz-box-shadow: 0px 4px 3px #000;
    -webkit-box-shadow: 0px 4px 3px #000;
    */
    opacity: 0.6;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60);
}
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');
}

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() {
$('#navigation a').stop().animate({'marginLeft':'-85px'},1000);
$('#navigation > li').hover(
function () {
$('a',$(this)).stop().animate({'marginLeft':'-2px'},200);
},
function () {
$('a',$(this)).stop().animate({'marginLeft':'-85px'},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 title="Home"></a></li>
 <li class="about"><a title="About"></a></li>
 <li class="search"><a title="Search"></a></li>
 <li class="photos"><a title="Photos"></a></li>
 <li class="rssfeed"><a title="Rss Feed"></a></li>
 <li class="podcasts"><a title="Podcasts"></a></li>
 <li class="contact"><a title="Contact"></a></li>
</ul>

16. Kemudian simpan

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

Artikel Terkait