Membuat kwick Menu Navigasi Blog dengan jquery
Kwick Blogger Navigation Menu dengan jQuery, mungkin itulah yang akan saya bahas kali ini. Setelah kemarin saya membahas juga untuk cara membuat Jquery Gulir Tampilkan Sembunyikan Tab View Widget, kita pergi lagi, dan masih sekitar JQuery. Ini juga merupakan reques dari beberapa blogger, yang diminta untuk membuat tutorial sebuah. Ok, masih penasaran jika teman saya bisa melihatnya di blog saya menu navigasi ini, atau dapat melihat gambar / sreenshot bawah.
yang akan membuat blog terlihat lebih keren bro, karena dengan jQuery Sliding Navigation Menu.
Berikut adalah langkah-langkah untuk membuatnya:
1. Login ke blogger sobat
2. Masuk ke desain / Desain
3. Pilih Tata Letak
4. Edit HTML
5. Kemudian melihat kode berkut: ]]></b:skin> (gunakan Ctrl + F pada sob keyboard), setelah tinggal bertemu menempatkan kode CSS berikut tepat di atas kode ]]></b:skin>
<script src='http://k-blogger.googlecode.com/files/jquery-1.3.2.min.js' type='text/javascript'/>
<script src='http://k-blogger.googlecode.com/files/jquery.kwicks-1.5.1.pack.js' type='text/javascript'/>
<script src='http://k-blogger.googlecode.com/files/jquery.easing.1.3.js' type='text/javascript'/>
Juga tambahkan kode script berikut di bawah ini:
7. Simpan template.
Nah untuk file.js ada ketika menggunakan jquery-1.3.2.min.js, untuk file.js ini tidak perlu lagi dipasang.
8. Selanjutnya masih terisak, pergi ke Layout / Desain, klik tombol Add New Widget / Tambah Widget, dan pilih HTML / Javascript. Untuk cara berikutnya, rada rumit, ketika teman ditemplate halaman widget yang ada ke halaman ditas pos, teman saya hanya menambahkan kode berikut:
9. Simpan / Save. Sipppp, di sini sobat mampu membuat kwick blogger menu navigasi dengan jQuery.
Catatan:
Karena aku bisa membayangkan kwick'nya menu pelajaran-blog.blogspot.com, ada juga tutorial, tapi sedikit berbeda dari cara saya. Untuk Kode CSS silahkan sesuaikan sendiri ke blog Anda.
Nah, di atas adalah cara yang saya terapkan di blog saya dulu. Ketika teman punya masalah, teman bisa meminta melalui komentar di bawah ini.
yang akan membuat blog terlihat lebih keren bro, karena dengan jQuery Sliding Navigation Menu.
Berikut adalah langkah-langkah untuk membuatnya:
1. Login ke blogger sobat
2. Masuk ke desain / Desain
3. Pilih Tata Letak
4. Edit HTML
5. Kemudian melihat kode berkut: ]]></b:skin> (gunakan Ctrl + F pada sob keyboard), setelah tinggal bertemu menempatkan kode CSS berikut tepat di atas kode ]]></b:skin>
6. Kemudian cari kode <head>, dan letakkan tepat di atas kode jQuery berikut:.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}
<script src='http://k-blogger.googlecode.com/files/jquery-1.3.2.min.js' type='text/javascript'/>
<script src='http://k-blogger.googlecode.com/files/jquery.kwicks-1.5.1.pack.js' type='text/javascript'/>
<script src='http://k-blogger.googlecode.com/files/jquery.easing.1.3.js' type='text/javascript'/>
Juga tambahkan kode script berikut di bawah ini:
<script type='text/javascript'>
$().ready(function() {
$('.kwicks').kwicks({
max : 205,
spacing : 5
});
});
</script>
$().ready(function() {
$('.kwicks').kwicks({
max : 205,
spacing : 5
});
});
</script>
7. Simpan template.
Nah untuk file.js ada ketika menggunakan jquery-1.3.2.min.js, untuk file.js ini tidak perlu lagi dipasang.
8. Selanjutnya masih terisak, pergi ke Layout / Desain, klik tombol Add New Widget / Tambah Widget, dan pilih HTML / Javascript. Untuk cara berikutnya, rada rumit, ketika teman ditemplate halaman widget yang ada ke halaman ditas pos, teman saya hanya menambahkan kode berikut:
<div class='kwickswrap'>
<ul class='kwicks'>
<li id='kwick1'><a href='http://mbahyar.blogspot.com/' title='halaman utama'>Home</a></li>
<li id='kwick2'><a href='#' id='hide_top-klik'>Portfolio</a></li>
<li id='kwick3'><a href='https://plus.google.com/u/0/116762594657804062750/posts' title='about'>About</a></li>
<li id='kwick4'><a href='http://mbahyar.blogspot.com/search?max-results=200'>Portfolio</a></li>
<li id='kwick5'><a href='http://mbahyar.blogspot.com/user/viyan%20pradita' title='contact us'>Contact</a></li>
<li id='kwick6'><a href='http://code.google.com/p/k-blogger/' title='recomended links'>Resource</a></li>
</ul>
</div>
9. Simpan / Save. Sipppp, di sini sobat mampu membuat kwick blogger menu navigasi dengan jQuery.
Catatan:
Karena aku bisa membayangkan kwick'nya menu pelajaran-blog.blogspot.com, ada juga tutorial, tapi sedikit berbeda dari cara saya. Untuk Kode CSS silahkan sesuaikan sendiri ke blog Anda.
Nah, di atas adalah cara yang saya terapkan di blog saya dulu. Ketika teman punya masalah, teman bisa meminta melalui komentar di bawah ini.
mantap sobbb......
BalasHapuspatut dicoba
BalasHapusok sob terimakasih. mampir di blog ku juga ya www.reganxt.blogspot.com
BalasHapus