sedikit mau bagi2 ilmu..walopun saya masih newbie. disini saya mau berbagi tentang gimana caranya bikin menubar sendiri di blog. disini saya bagikan adalah sedikit bermain dengan jquery. dimana penggabungan antara Text/CSS dengan text/javascript. sedikit ribet tapi hasil cukup menarik.
mari kita pelajari bagaimana membuat menu navigasi blogger dengan jQuery.
Pertama langkahnya seperti biasanya ya hanya pilih Dashboard ,lalu Tata Letak kemudian contreng tulisan
Expands Widget Templates.kalau tidak ada bisa di templates lalu edit html. Nah,selanjutnya cari kode ]]></b:skin> (gunakan Ctrl+F di keyboard sob),setelah ketemu tinggal letakkan kode CSS berikut tepat diatas kode ]]></b:skin> tersebut.
soucecode:
.hals{height:50px;list-style:none;margin:0;padding:0;position:relative;width:840px;z-index:2 }
.hals li{cursor:pointer;display:block;float:left;height:50px;overflow:hidden;padding:0;width:120px;z-index:2}
.hals 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} #hals1 a:hover{background-position:0 -50px!important}
#hals2 a{background-position:-190px 0}
#hals2 a:hover{background-position:-190px -50px!important}
#hals3 a{background-position:-380px 0}
#hals3 a:hover{background-position:-380px -50px!important}
#hals4 a{background-position:-570px 0}
#hals4 a:hover{background-position:-570px -50px!important}
#hals5 a{background-position:-760px 0}
#hals5 a:hover{background-position:-760px -50px!important}
#hals6 a{background-position:-950px 0}
#hals6 a:hover{background-position:-950px -50px!important}
.hals li ul a{float:left;width:12em} .hals ul ul{top:auto}
.hals li ul ul{left:12em;margin:0 0 0 10px}
.hals li:hover ul,#nav li li:hover ul,#nav li li li:hover ul,#nav li li li li:hover ul{display:block }
Kemudian cari kode <head>,setelah ketemu letakkan kode jQuery berikut tepat diatasnya:
<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'/>
nah sekarang lihat blog yang sudah ditambahkan gadget html/javascript kemudian isikan script sebagai berikut
<div class='halswrap'>
<ul class='hals'>
<li id='hals1'><a href='http://banyakkumpulan.blogspot.com/' title='halaman utama'>Home</a></li>
<li id='hals2'><a href='http://banyakkumpulan.blogspot.com/search' title='daftar isi.'>Blog</a></li>
<li id='hals3'><a href='http://banyakkumpulan.blogspot.com/' title='about'>About</a></li>
<li id='hals4'><a href='#' title='futures'>Portfolio</a></li>
<li id='hals5'><a href='#' title='contact us'>Contact</a></li>
<li id='hals6'><a href='http://banyakkumpulan.blogspot.com/' title='recomended links'>Resource</a></li>
</ul>
</div>
</td>
<script type="text/javascript">
$().ready(function() {
$('.hals').hals({
max : 190,
duration: 800,
easing: 'easeOutQuint'
});
});
</script>
silahkan anda edit..:D
kalau ada yang kurang mohon maaf masih newbie...perlu belajar banyak..
Pertama langkahnya seperti biasanya ya hanya pilih Dashboard ,lalu Tata Letak kemudian contreng tulisan
Expands Widget Templates.kalau tidak ada bisa di templates lalu edit html. Nah,selanjutnya cari kode ]]></b:skin> (gunakan Ctrl+F di keyboard sob),setelah ketemu tinggal letakkan kode CSS berikut tepat diatas kode ]]></b:skin> tersebut.
soucecode:
.hals{height:50px;list-style:none;margin:0;padding:0;position:relative;width:840px;z-index:2 }
.hals li{cursor:pointer;display:block;float:left;height:50px;overflow:hidden;padding:0;width:120px;z-index:2}
.hals 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} #hals1 a:hover{background-position:0 -50px!important}
#hals2 a{background-position:-190px 0}
#hals2 a:hover{background-position:-190px -50px!important}
#hals3 a{background-position:-380px 0}
#hals3 a:hover{background-position:-380px -50px!important}
#hals4 a{background-position:-570px 0}
#hals4 a:hover{background-position:-570px -50px!important}
#hals5 a{background-position:-760px 0}
#hals5 a:hover{background-position:-760px -50px!important}
#hals6 a{background-position:-950px 0}
#hals6 a:hover{background-position:-950px -50px!important}
.hals li ul a{float:left;width:12em} .hals ul ul{top:auto}
.hals li ul ul{left:12em;margin:0 0 0 10px}
.hals li:hover ul,#nav li li:hover ul,#nav li li li:hover ul,#nav li li li li:hover ul{display:block }
Kemudian cari kode <head>,setelah ketemu letakkan kode jQuery berikut tepat diatasnya:
<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'/>
nah sekarang lihat blog yang sudah ditambahkan gadget html/javascript kemudian isikan script sebagai berikut
<div class='halswrap'>
<ul class='hals'>
<li id='hals1'><a href='http://banyakkumpulan.blogspot.com/' title='halaman utama'>Home</a></li>
<li id='hals2'><a href='http://banyakkumpulan.blogspot.com/search' title='daftar isi.'>Blog</a></li>
<li id='hals3'><a href='http://banyakkumpulan.blogspot.com/' title='about'>About</a></li>
<li id='hals4'><a href='#' title='futures'>Portfolio</a></li>
<li id='hals5'><a href='#' title='contact us'>Contact</a></li>
<li id='hals6'><a href='http://banyakkumpulan.blogspot.com/' title='recomended links'>Resource</a></li>
</ul>
</div>
</td>
<script type="text/javascript">
$().ready(function() {
$('.hals').hals({
max : 190,
duration: 800,
easing: 'easeOutQuint'
});
});
</script>
silahkan anda edit..:D
kalau ada yang kurang mohon maaf masih newbie...perlu belajar banyak..
0 Comments
