Cara Buat Sticky Menu Melayang di Blog - Kali ini saya akan berbagi tutorial membuat menu sticky/melayang dengan Opacity Di Blogger. Hal yang menarik dari menu ini adalah efek opacity, yaitu efek background yang memudar pada menu sticky ketika halaman digulung ke bawah. bagaimana cara memasang ke blog Anda?
Back up template Anda dan kemudian baca petunjuk di bawah ini.
@screenshoT
@screenshoT
1. Pada dashboard Blogger Anda, pilih 'Template' lalu klik 'Edit HTML
2. Dengan menekan 'Ctrl + F', cari tag <head> dalam kode html template anda lalu copy dan paste kode jQuery berikut dibawahnya:
2. Dengan menekan 'Ctrl + F', cari tag <head> dalam kode html template anda lalu copy dan paste kode jQuery berikut dibawahnya:
<script type='text/javascript'>
$(document).ready(function() {
(function() {
//settings
var fadeSpeed = 200, fadeTo = 0.5, topDistance = 30;
var topbarME = function() { $('#db-menu-sticky').fadeTo(fadeSpeed,1); }, topbarML = function() { $('#db-menu-
sticky').fadeTo(fadeSpeed,fadeTo); };
var inside = false;
//do
$(window).scroll(function() {
position = $(window).scrollTop();
if(position > topDistance && !inside) {
//add events
topbarML();
$('#db-menu-sticky').bind('mouseenter',topbarME);
$('#db-menu-sticky').bind('mouseleave',topbarML);
inside = true;
}
else if (position < topDistance){
topbarME();
$('#db-menu-sticky').unbind('mouseenter',topbarME);
$('#db-menu-sticky').unbind('mouseleave',topbarML);
inside = false;
}
});
})();
});
</script>
Sekarang untuk menambahkan beberapa gaya dan memberikan menu opacity, kita buat tampilannya menggunakan beberapa CSS
3. Sekali lagi, dengan menekan 'Ctrl + F', cari kode tag ]]><b/:skin> dan di atasnya, copy lalu paste kode css ini:
#db-menu-sticky {
border-bottom:1px solid #ECF1EF;
background:#151715;
font-color:#000000;
padding:10px 20px;
position:fixed;
top:0;
left:0;
z-index:2000;
width:100%;
}
( Silahkan untuk mengubah warna bar/menu dengan mengubah nilai latar belakang sesuai yang anda inginkan)
Pada bagian berikutnya, kita akan menambahkan link navigasi pada menu sticky bar.
4. Dengan menggunakan 'Ctrl + F' lagi, cari <div id='header-wrapper'> atau id header sesuai element template anda dan
kemudian copy lalu paste kode berikut ini sebelum kode elemen tersebut:
<div id='db-menu-sticky'>
<a href='#'>Home</a> |
<a href='#'>Saya</a> |
<a href='#'>Pacarku</a> |
<a href='#'>Love</a> |
<a href='#'>Manis</a> |
<a href='#'>Kangen</a> |
</div>
( Pilih link yang ingin anda pilih untuk di tampilkan pada menu, jika ingin silahkan tambahkan lebih banyak. tidak harus sama dengan contoh di atas)
5. Preview dan Simpan template Anda dan selesai!
Pesan Admin
Catatan: pastikan pada template sobat sudah dipasang jQuery
Semoga berguna...
Sumber: http://defandaky.blogspot.com/2013/08/cara-membuat-sebuah-menu-sticky-dengan.html
Label:
Tutorial Blog
Pada
Sabtu, Desember 14, 2013
kapan kapan saya coba ya gan,,,
BalasHapusnice share :)
iya sob terima kasih banyak yah sudah mau berkunjung di blog sederhanaku ini. ditunggu kunjungan baliknya..dan jawabannya juga jangan lupa. heheehe
Hapussaya tidak bisa jawab tuh pertanyaan gan.. :D
Hapuscoba berkunjung di blognya kang ismet yang bisa utak atik template.,atau coba deh pelajarin kode HTML nya gan dengan cara klik kanan dan pilih inpect element...tinggal lihat dah tu kode kode mengerikannya.. :D
heheeh iya sob makasih sarannya...iya saya sudah coba kok ...tapi di template ini tidak berhasil... kalau ditemplate blog saya sebelumnya bisa bro.
Hapuspelajarin aja truuss,,nanti lama lama ketahuan kok :D
HapusIya sob saling berbagi informasi yah ! jgan bosan-bosan mampir disini yah
Hapus