» Unlabelled » menu jquery slide blog

menu jquery slide blog

membuat menu jquery slide di blog sangat mudah dan mempunyai banyak manfaat., diantaranya untuk memperindah blog dan memanfaatkan ruang blog semaksimal mungkin,,,berikut ini cara untuk membuat menu jquery slide di blog tepatnya pada header blog

adapun langkah untuk membuat menu jquery slide yaitu

1. log in ke akun bloger
2. klik rancangan
3. klik edit html
dowload dulu tamplate blog anda untuk jaga2 siapa tau nanti blognya terhapus

4. cari kode ]]></b:skin> 
5. copypaste kode CSS dibawah ini diatas kode pada langkah 4:


ul#menusisi {
position: fixed;
margin: 0px;
padding: 0px;
top: 50px;
left: 0px;
list-style: none;
z-index:9999;
}
ul#menusisi li {
width: 100px;
}
ul#menusisi li a {
display: block;
margin-left: -50px;
width: 100px;
height: 55px; 
background-color:#141414;
background-repeat:no-repeat;
background-position:48px center;
border:1px solid #cfcfcf;
-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.8;
filter:progid:DXImageTransform.


Microsoft.Alpha(opacity=80);
}
ul#menusisi .beranda a{
background-image: url(http://lh6.ggpht.com/_xcD4JK_dIjU/S9BJaBfhOhI/AAAAAAAAD_0/nV3ITEV9d3M/d/nav_home.png);
}
ul#menusisi .tentang a{
background-image: url(http://lh4.ggpht.com/_xcD4JK_dIjU/S9BJaX0yaqI/AAAAAAAAD_4/GZhfUKvK588/d/nav_info.png);
}
ul#menusisi .cari a{
background-image: url(http://lh3.ggpht.com/_xcD4JK_dIjU/S9BJejnwlAI/AAAAAAAAEAE/B_LZd63vGeI/d/nav_search.png);
}
ul#menusisi .komentar a{
background-image: url(http://lh3.ggpht.com/_xcD4JK_dIjU/S9BJaFyqDGI/AAAAAAAAD_w/pNO6TUSigBg/d/nav_comment.png);
}
ul#menusisi .rssfeed a{
background-image: url(http://lh3.ggpht.com/_xcD4JK_dIjU/S9BJaabJhzI/AAAAAAAAEAA/Oo4mhwCwzbI/d/nav_rss.png);
}
ul#menusisi .alat a{
background-image: url(http://lh3.ggpht.com/_xcD4JK_dIjU/S9BJelocqyI/AAAAAAAAEAI/6SmP-UHv-eg/d/nav_tools.png);
}
ul#menusisi .kontak a{
background-image: url(http://lh6.ggpht.com/_xcD4JK_dIjU/S9BJaVZkksI/AAAAAAAAD_8/g5fo6OKT5wE/d/nav_mail.png);
}
 
6. Cari kode dibawah ini:
</head>

7. copypaste kode jQuery dibawah ini diatas kode pada langkah 6:

<script src='http://www.google.com/jsapi'/>
<script>
google.load(&quot;jquery&quot;, &quot;1.3.2&quot;);
</script>
<script type="text/javascript">
$(function() {
$('#menusisi a').stop().animate({'marginLeft':'-50px'},1000);
$('#menusisi > li').hover(
function () {
$('a',$(this)).stop().animate({'marginLeft':'-2px'},200);
},
function () {
$('a',$(this)).stop().animate({'marginLeft':'-50px'},200);
}
);
});
</script>
8. Cari kode dibawah ini:
</body>
9. copypaste kode dibawah ini diatas kode pada langkah 8:

<ul id='menusisi'>
<li class='beranda'><a href='alamat url' title='Beranda'></a></li>
<li class='tentang'><a href='alamat url' title='Tentang'></a></li>
<li class='cari'><a href='alamat url' title='Cari'></a></li>
<li class='alat'><a href='alamat url' title='Alat'></a></li>
<li class='rssfeed'><a href='alamat url' title='RSS Feed'></a></li>
<li class='komentar'><a href='alamat url' title='Komentar'></a></li>
<li class='kontak'><a href='alamat url' title='Kontak'></a></li>
</ul>
 
10. Simpan template dan preview blog anda...

bagian yang perlu dirubah :

  • ganti alamat url  sesuai dengan link keinginan anda.
  • ganti kata yang berwarna hijau keterangan didalam tag title (misal; title='Beranda' di ubah menjadi title='Home') sesuai dengan keinginan anda.
  • ubah top: 50px; ubahlah nilai 50 untuk menentukan jarak antara bagian atas halaman blog dengan menu.
  • ubah margin-left: -50px; ubahlah nilai -50 untuk mengatur berapa jarak menu yang akan disembunyikan.


Categories:
Pin It

Related Post:



0 komentar :

Post a Comment

Silahkan Berkomentar Sesuai Dengan Topik, Jangan Menggunakan Kata-Kata Kasar, Komentar Dengan Link Aktif Tidak Akan Dipublikasikan

ttd

Admin Blog