Back up template Anda dan kemudian baca petunjuk di bawah ini.
Contoh Penampakan
2. Dengan menekan 'Ctrl + F', cari tag
<head> dalam kode html template anda lalu copy dan paste kode jQuery berikut dibawahnya:1code-line:1-12code-line:1-23code-line:1-34code-line:1-45code-line:1-56code-line:1-67code-line:1-78code-line:1-89code-line:1-910code-line:1-1011code-line:1-1112code-line:1-1213code-line:1-1314code-line:1-1415code-line:1-1516code-line:1-1617code-line:1-1718code-line:1-1819code-line:1-1920code-line:1-2021code-line:1-2122code-line:1-2223code-line:1-2324code-line:1-2425code-line:1-2526code-line:1-2627code-line:1-27<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:1code-line:2-12code-line:2-23code-line:2-34code-line:2-45code-line:2-56code-line:2-67code-line:2-78code-line:2-89code-line:2-910code-line:2-1011code-line:2-11#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:1code-line:3-12code-line:3-23code-line:3-34code-line:3-45code-line:3-56code-line:3-67code-line:3-78code-line:3-8<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!
Catatan: pastikan pada template sobat sudah dipasang jQuery
Semoga berguna...
10 komentar
Nice Info Def :)
BalasHapusOk sob
Hapuskeren infonya. izin repost yah infonya sob
BalasHapuskunjungi juga http://taugi.blogspot.com/
Ok sob, tunggu d tkp
Hapuscara pasang g jQuery nya gimana yah?
BalasHapuskok punyaku gak bisa? http://tutorial4yu.blogspot.com/
Letakkan di atas tag head </head> kode jquery <script src='link jquery'></script>
BalasHapusMenarik bro.. Bisa Minta tolong editin blog gue bro, please :D
BalasHapusdi edit gimana bro :D
HapusEdit HTML nya bro biar bisa kayak punya lho...
BalasHapussorry bro gak bisa, edit sendiri aja sesuai selera :)
HapusLink aktif dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan kode, gunakan tag <i rel="code">...KODE ANDA DI SINI...</i>
Untuk menyisipkan script, gunakan <i rel="pre">...KODE SCRIPT ANDA...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">...URL GAMBAR ANDA ...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">...JUDUL ANDA...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">...CATATAN ANDA...</b>
Untuk menciptakan efek tebal gunakan tag <b>...TEKS ANDA...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>...TEKS ANDA...</i>