kali ini ane akan kasih kalian tips yang lebih keren.
Masih seputar trik blogger, saya yakin bagi para sobat yang suka blog walking pasti sobat pernah melihat yang sepeti ini:
Cara kerjanya, ketika pointer mouse menyentuh salah satu menu, maka akan terlihat gmbar yang keluar menyemping dari menu tersebut.
Untuk melihat demonya, Klik DEMO
nah.. bagaiman sobat blogger.. ! udah ngerti kan??
Sekarang kita bahas cara pasangnya.
Masih seputar trik blogger, saya yakin bagi para sobat yang suka blog walking pasti sobat pernah melihat yang sepeti ini:
Cara kerjanya, ketika pointer mouse menyentuh salah satu menu, maka akan terlihat gmbar yang keluar menyemping dari menu tersebut.
Untuk melihat demonya, Klik DEMO
nah.. bagaiman sobat blogger.. ! udah ngerti kan??
Sekarang kita bahas cara pasangnya.
1. Pertama login dulu ke akun blog sobat.
2. Klik rancangan ---> Edit HTML
3. Cari kode ]]></b:skin>. ( gunakan ctrl+f untuk memudahkan pencarian)
Letakkan kode berikut di atasnya.
.kwicks{height:50px;list-style:none;margin:0;padding:0;position:relative;width:840px;z-index:2
}
.kwicks li{cursor:pointer;display:block;float:left;height:50px;overflow:hidden;padding:0;width:120px;z-index:2}
.kwicks li
a{background-image:url(http://4.bp.blogspot.com/-e1c5hdvd0MQ/TbgSHi-7EEI/AAAAAAAAAzs/Y9aTBHEgh84/s1600/menu%2Bjquery%2Bpelajaran%2Bblog.jpg
);background-repeat:no-repeat;cursor:pointer;display:block;height:50px;outline:none;text-indent:-9999px;z-index:2}
#kwick1 a:hover{background-position:0 -50px!important}
#kwick2 a{background-position:-190px 0}
#kwick2 a:hover{background-position:-190px -50px!important}
#kwick3 a{background-position:-380px 0}
#kwick3 a:hover{background-position:-380px -50px!important}
#kwick4 a{background-position:-570px 0}
#kwick4 a:hover{background-position:-570px -50px!important}
#kwick5 a{background-position:-760px 0}
#kwick5 a:hover{background-position:-760px -50px!important}
#kwick6 a{background-position:-950px 0}
#kwick6 a:hover{background-position:-950px -50px!important}
.kwicks li ul a{float:left;width:12em}
.kwicks ul ul{top:auto}
.kwicks li ul ul{left:12em;margin:0 0 0 10px}
.kwicks li:hover ul,#nav li li:hover ul,#nav li li li:hover ul,#nav li li li li:hover ul{display:block
}
4. Kemudian cari kode </head> dan letakkan kode berikut di atasnya.
<script src='http://pelajarandashblogdotblogspotdotcom.googlecode.com/files/jquery-1.2.3.js' type='text/javascript'/>
<script
src='http://pelajarandashblogdotblogspotdotcom.googlecode.com/files/jquery.kwicks-1.5.1.js'
type='text/javascript'/>
<script src='http://pelajarandashblogdotblogspotdotcom.googlecode.com/files/jquery.easing.1.3.js' type='text/javascript'/>
5. Dan yang terakhir, copy kode berikut
<div class='kwickswrap'>
<ul class='kwicks'>
<li id='kwick1'><a href='http://christiantatelu.blogspot.com/' title='halaman utama'>Home</a></li>
<li id='kwick2'><a href='http://christiantatelu.blogspot.com/search' title='daftar isi.'>Blog</a></li>
<li id='kwick3'><a href='http://christiantatelu.blogspot.com/2009/02/profil.html' title='about'>About</a></li>
<li id='kwick4'><a href='#' title='futures'>Portfolio</a></li>
<li id='kwick5'><a href='#' title='contact us'>Contact</a></li>
<li id='kwick6'><a href='http://christiantatelu.blogspot.com/' title='recomended links'>Resource</a></li>
</ul>
</div>
</td>
<script type="text/javascript">
$().ready(function() {
$('.kwicks').kwicks({
max : 190,
duration: 800,
easing: 'easeOutQuint'
});
});
</script>
6. Cari kode di bawah ini dengan menggunakan Ctrl+F
perhatikan pada kode yang berwarna merah.
<div id='header-wrapper'><b:section class='bla .... bla ........... bla >
<b:widget id='bla......bla......... bla '/>
</b:section>
Letakan kodenya nomor 5 di sini !
</div>
7. Maka hasilnya akan seperti ini
<div id='header-wrapper'><b:section class='bla .... bla ........... bla >
<b:widget id='bla......bla......... bla '/>
</b:section><div class='kwickswrap'><ul class='kwicks'>
<li id='kwick1'><a href='http://azka-veiro.blogspot.com/' title='halaman utama'>Home</a></li>
<li id='kwick2'><a href='http://azka-veiro.blogspot.com/search' title='daftar isi.'>Blog</a></li>
<li id='kwick3'><a href='http://azka-veiro.blogspot.com/2009/02/profil.html' title='about'>About</a></li>
<li id='kwick4'><a href='#' title='futures'>Portfolio</a></li>
<li id='kwick5'><a href='#' title='contact us'>Contact</a></li>
<li id='kwick6'><a href='http:/azka-veiro.blogspot.com/' title='recomended links'>Resource</a></li>
</ul>
</div>
</td>
<script type="text/javascript">
$().ready(function() {
$('.kwicks').kwicks({
max : 190,
duration: 800,
easing: 'easeOutQuint'
});
});
</script>
</div>
SEMOGA BERMANFAAT
Source : http://christiantatelu.blogspot.com/2011/10/membuat-menu-horisontal-animasi.html
Ditulis Oleh : Unknown ~ Tips dan Trik Blogspot
Sobat sedang membaca artikel tentang Cara Memasang Menu Horisontal Animasi Menyamping. Oleh Admin, Sobat diperbolehkan mengcopy paste atau menyebar-luaskan artikel ini, namun jangan lupa untuk meletakkan link dibawah ini sebagai sumbernya
0 komentar:
Posting Komentar
BLOG INI DOFOLLOW .
Silahkan tinggalkan komentar dan kritik sobat, tapi mohon jangan SPAM ya..!
Komentar SPAM akan di HAPUS oleh admin.
Komentar yang membangun sangat dibutuhkan oleh blog ini.
Terima Kasih.