Monday, August 15, 2011

Slide Out Navigasi Menu Floating Jquery Di Atas Halaman Blog

Sebenarnya saya bingung mau beri judul apa, untuk sementara kita gunakan saja judul diatas biar sedikit lebih mudah dipahami hehehe. Widget ini bisa dibilang menarik karena ketika kita arahkan mouse ke salah satu menu navigasi, maka akan terlihat efek slide dan gambar yang disembunyikan. Biar lebih jelasnya silahkan anda lihat screenshotnya pada gambar dibawah ini.




Apabila anda tertarik, berikut cara membuatnya :
1. Login ke blog anda
2. Klik Rancangan > Edit HTML
3. Backup terlebih daulu template anda. Kemudian cari kode </head>  (gunakan Ctrl+F)4. Setelah ketemu copy-paste kode jquery dan javascript dibawah ini tepat di atas kode </head>

<script type="text/javascript" src="https://sites.google.com/site/mariozoner/gb-mario/jquery-1.3.2.js"></script>

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

Catatan :
Apabila dalam template ada sudah terdapat kode jquery-1.3.2.js, maka kode tersebut tidak perlu ditambahkan.


5. Lanjut ke langkah berikutnya cari kode ]]></b:skin> dan copy-paste kode CSS berikut diatas kode ]]></b:skin>

ul#navigation {
position: fixed;
margin: 0px;
padding: 0px;
top: 0px;
right: 0px;
list-style: none;
z-index:999999;
width:700px;
background-color:transparent;
border:0px;
}
ul#navigation li {
width: 90px;
display:inline;
float:left;
border:0;
}
ul#navigation li a {
display: block;
float:left;
margin-top: -2px;
width: 75px;
height: 22px;
background-color:#000000;
background-repeat:no-repeat;
background-position:50% 10px;
border:1px solid #ffffff;
-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:85px;
opacity: 0.96;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}

ul#navigation li a:hover{
background-color:#333333;
}

ul#navigation li a{
letter-spacing:2px;
font-size:10px;
color:#ffffff;
font-family:Verdana, Geneva, sans-serif;
font-weight:bold;
}
ul#navigation .nav1 a{

background-image: url(http://i1182.photobucket.com/albums/x453/marioadit/gmbr%20blog/homeblue.png);
}

ul#navigation .nav2 a {
background-image: url(http://i1182.photobucket.com/albums/x453/marioadit/gmbr%20blog/about-1.png);
}
ul#navigation .nav3 a {

background-image: url(http://i1182.photobucket.com/albums/x453/marioadit/gmbr%20blog/contact-1.png);
}

ul#navigation .nav4 a {
background-image: url(http://i1182.photobucket.com/albums/x453/marioadit/gmbr%20blog/music.png);
}

ul#navigation .nav5 a {
background-image: url(http://i1182.photobucket.com/albums/x453/marioadit/gmbr%20blog/rss-1.png);
}

6. Klik SIMPAN TEMPLATE.
7. Beralih ke menu Rancangan > Elemen Laman > Tambah Gadget > HTML/JavaScript.
8. Silahkan anda copy-paste kembali kode HTML dibawah ini

<ul id="navigation">

<li class="nav1"><a href="http://Link_yang_dituju">Home</a></li>

<li class="nav2"><a href="http://Link_yang_dituju">About</a></li>

<li class="nav3"><a href="http://Link_yang_dituju">Contact</a></li>

<li class="nav4"><a href="http://Link_yang_dituju">Music</a></li>

<li class="nav5"><a href="http://Link_yang_dituju">Rss</a></li>
</ul>

Setting
  • Gantilah kode yang berwarna merah dengan link yang dituju
  • Untuk kode CSS bisa anda setting sesuai keinginan anda
9. Jangan lupa klik Simpan dan lihat hasilnya.

Apabila ada seputar pertanyaan silahkan berkomentar. Selamat mencoba dan semoga bermanfaat.


    Related Post

    10 comments:

    1. Artikel yang sangat menarik, meski harus pelajari dulu, tapi gak masalah. terima kasih sudah berbagi ilmunya.

      ReplyDelete
    2. Tadi sudah liat view demonya; memang menarik :)
      Terima kasih tutorialnya...

      ReplyDelete
    3. @rofi:terima kasih jg atas pujiannya rofi..semoga berhasil dan selamat mencoba :)

      ReplyDelete
    4. mantaf euy.....
      sibos sanga jago, banyak artikel yang menarik

      ReplyDelete
    5. @NFS Reload:thanks sob atas pujiannya..kpn2 silahkan berkunjung kmbli. ^_^

      ReplyDelete
    6. ini nggak memberatkan blog kan sobb ????..

      btw soal bonus krn Anda comment ke 100 tadi... gimana kalo saia bales aja memberikan comment di 10 postingan Anda ... ???? hhe :D

      ReplyDelete
    7. @Shinobi Blog:nggak koq sob.ini menggunakan kode jquery lho so pemanggilan kodenya lumayan cepet n g memberatkan blog.beda sama kode html n css. sobat bs lihat diblog saya hampir smuanya kode jquery lho. n loadingnya g berat malahan cepet koq.. cm saya kebanyakan masang gmbar n banner diblog so sdikit brat blog sya.haha

      siiip bro thanks atas commentnya

      ReplyDelete
    8. Bro saya request dong bikin slide out navigasi yg di sebelah kiri yg kaya di tympanus.net
      ini contohnya bro
      http://tympanus.net/Tutorials/FixedNavigationTutorial/ . terimakasih

      ReplyDelete
    9. @galih : ada koq sob tutorialnya di blog ane ini..silahkan dicari pada "related post" diatas :D

      ReplyDelete

    Mohon tinggalkan jejak/komentar sobat disini. Dilarang SPAM. Okey...