Cara Mudah Membuat Menu Sticky Pada Blog
Karena menu tersebut tetap muncul pada bagian samping atau bawah tool bar browser,Inilah yang di namakan dengan menu sticky menu melayang.
Menu yang seperti itu dapat di hasilkan dengan menggunakan kode tambahan seperti kode html Javascript,Kode yang perlu di gunakan dapat kamu temukan pada postingan kali ini
Namun sebelum lanjut,Jika kamu ingin mengetahui contoh menu melayang ?Silahkan lihat sendiri hasilnya pada blogmu.
Jika kamu ingin membuat menu sticky pada blogmu,Di postingan kali ini akan membahas tutorialnya secara ringkas,Seunik mungkin ,agar kamu dapat memahaminya dengan baik.
Karena jika kamu sudah memahami tutorial ini,Kamu akan mudah untuk mengetahui cara membuat menu sticky pada blog.
Tidak usah panjang lebar,Inilah tutorialnya :
Langkah pertama untuk membuat menu sticky di blog.
1.Silahkan masuk ke dasbhord bloggermu
2.Klik theme dan klik edit template.
3.Copy kode Html di bawah ini,Dan letakan di atas tag ]]></b:skin> ,Agar kamu lebih cepat menemukan tag ]]></b:skin> ,Gunakan pernitah dengan menekan ctrl f ,dan ketikan tag ]]></b:skin> dan tekan enter tepat di tengah edit template.Maka tagnya akan muncul.
.sticky {
position:fixed;
top:10px;/* jarak dari atas*/
z-index: 100;
}
position:fixed;
top:10px;/* jarak dari atas*/
z-index: 100;
}
Jika kamu sudah berhasil menempatkan kode di atas pada template blogmu? maka klik simpan templatemu ,Agar tidak terjadi salah ketik.
Langkah kedua memasang menu sticky pada blog.
langkah keduanya,Kamu perlu memasang kode java script di bawah ini.
<script type='text/javascript'>
$(document).ready(function() {
var stickyWidgetTop = $('#Ganti ID').offset().top;
var stickyWidget = function(){
var scrollTop = $(window).scrollTop();
if (scrollTop > stickyWidgetTop) {
$('#Ganti ID').addClass('sticky');
} else {
$('#Ganti ID').removeClass('sticky');
}
};
stickyWidget();
$(window).scroll(function() {
stickyWidget();
});
});
</script>
$(document).ready(function() {
var stickyWidgetTop = $('#Ganti ID').offset().top;
var stickyWidget = function(){
var scrollTop = $(window).scrollTop();
if (scrollTop > stickyWidgetTop) {
$('#Ganti ID').addClass('sticky');
} else {
$('#Ganti ID').removeClass('sticky');
}
};
stickyWidget();
$(window).scroll(function() {
stickyWidget();
});
});
</script>
Dengan keterangan:
Kamu perlu mengganti GANTI ID dengan ID WIDGET Template blogmu pada kode java script di atas,Sebaiknya sebelum kamu memasang kode script di atas ,Edit dan pasangkan dulu id widgetnya ,melalui aplikasi notepad atau aplikasi editor lainnya.
ID WIDGET disini ialah ,Menu yang ingin kamu buat menjadi tampilan sticky,Misalkan menu pages HOME,atau menu tempat postingan populer.
Jika kamu belum tahu cara mengetahui ID widget template blogmua ,Berikut ini adalah cara mengetahuinya.
Silahkan buka aplikasi text editormu seperti sublime txt,Kemudian copy semua template bloggermu dan pastekan di aplikasi sublime txt.
Klik find dan ketikan "PopulartPost" ,maka kamu akan menemukan nama ID WIDGET template pada blogmu,
Seperti gambar di atas,populartpost1 merupakan nama id widget template blog saya,Jadi pada kode javascript yang sudah kamu copy tadi,Masukan nama ID WIDGET template blogmu seperti gambar di bawah ini,tepat pada bagian GANTI ID ,maka hasilnya akan seperti di bawah ini.
Jika kamu sudah mengeditnya seperti di atas,Silahkan copy kembali kodenya,Menuju ke blogger kembali,Klik edit template dan letakan kodenya tepat di atas tag ]]></b:skin> ,kemudian klik simpan tema.
Nah di atas adalah tutorial mudah untuk membuat dan memasang meu sticky untuk blog,dengan sangat mudah banget bukan?
Klik find dan ketikan "PopulartPost" ,maka kamu akan menemukan nama ID WIDGET template pada blogmu,
Seperti gambar di atas,populartpost1 merupakan nama id widget template blog saya,Jadi pada kode javascript yang sudah kamu copy tadi,Masukan nama ID WIDGET template blogmu seperti gambar di bawah ini,tepat pada bagian GANTI ID ,maka hasilnya akan seperti di bawah ini.
Jika kamu sudah mengeditnya seperti di atas,Silahkan copy kembali kodenya,Menuju ke blogger kembali,Klik edit template dan letakan kodenya tepat di atas tag ]]></b:skin> ,kemudian klik simpan tema.
Nah di atas adalah tutorial mudah untuk membuat dan memasang meu sticky untuk blog,dengan sangat mudah banget bukan?
Comments
Post a Comment