Ingin membuat header blog statis seperti punya Bos Go Blog? caranya gampang kok. Bos Go Blog akan memberikan tutorialnya.
yang dimaksud dengan header blog statis adalah header blog akan melayang atau tetap muncul walaupun kita scroll. Banyak contoh atau demo blog yang memakai header statis seperti Bos Go Blog, Facebook, Yahoo, Okezone dan masih banyak yang lainnya.
Berikut Cara Membuat Header Blog Statis :
1. Buka blog anda dan buka Template kemudian Edit HTML.
2. Cari kode #Header atau .Header tergantung template anda. untuk lebih gampangnya tekan saja (Ctrl + F) lalu masukkan kode di atas untuk menemukannya.
3. Setelah anda menemukan kode di atas tambahkan kode dibawah ini didalam kode pembuka {
position:fixed;
z-index:200;
background-color: #fff;
4. Jika sudah lalu cari kode #main-wrapper atau #main-content atau #content-area disesuaikan dengan template anda, untuk mencarinya gunakan cara yang sama seperti cara nomor dua. kemudian tambahkan kode dibawah ini didalam kode pembuka {
5. Langkah terakhir adalah Save Template.
Selamat anda telah membuat header blog anda statis seperti milik Bos Go Blog.
Eh, masih ada lagi nih cara nya. simak ya.
Cara kedua Membuat Header Blog Statis :
1. Buka blog anda dan buka Template kemudian Edit HTML.
2. Cari kode </body> dengan cara seperti biasa (Ctrl + F), lalu masukkan kode dibawah ini tepat di atas kode tersebut.
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
var stickyHeaderTop = $('.header-wrapper').offset().top;
var stickyHeader = function(){
var scrollTop = $(window).scrollTop();
if (scrollTop > stickyHeaderTop) {
$('.header-wrapper').css({ 'position': 'fixed', 'top':0, 'z-index':9999 });
} else {
$('.header-wrapper').css({ 'position': 'relative' });
}
};
stickyHeader();
$(window).scroll(function() {
stickyHeader();
});
});
//]]>
</script>
Catatan : ganti kode header yang berwarna biru dengan kode header template anda.
3. Langkah terakhir adalah Save Template.
Selamat anda telah membuat header blog anda statis seperti milik Bos Go Blog.
Itulah dua Cara Membuat Header Blog Statis yang bisa Bos Go Blog berikan kepada bloggers semua. Semoga bermanfaat dan silahkan mencoba di blog masing - masing.
