Header & Top Menu statis maksudnya adalah tetap muncul saat blog di-scroll. (Baca: Top 5 Trending Desain Blog 2015).
Kode di atas sudah membuat header blog Anda melayang, statis, sticky, alias tetap muncul saat laman blog di-scroll ke bawah.
Catatan: Angka 200 bisa dikurang atau ditambah, sesuaikan saja, klik dulu "Preview" sebelum di-save!
5. Save Template!
Jika ingin mengganti huruf dengan logo/gambat, gunakan kode berikut ini:
Setelah berbagi tentang Cara Membuat Top Menu Statis di Blog, kali ini CB berbagi tentang cara membuat Header Blog statis.
Demonya bisa dilihat di CB Blogger Lab. Bisa juga lihat situs Yahoo, Okezone, Vivanews, dan banyak lagi.
Cara Membuat Header Blog Melayang (Floating Header):
1. Template > Edit HTML
2. Cari (tekan Ctrl+F) kode #header , .header, atau yang semisalnya (kode elemen header blog).
3. Tambahkan kode CSS berikut ini di bawahnya, di dalam kode pembuka {
position:fixed;
z-index:200;
background-color: #fff;
Kode di atas sudah membuat header blog Anda melayang, statis, sticky, alias tetap muncul saat laman blog di-scroll ke bawah.
4. Cari kode #main atau yang semisalnya (#main-wrapper, #main-content, #content-area, dll), lalu tambahkan kode berikut ini di dalam kode pembua {
margin-top:200px;
Catatan: Angka 200 bisa dikurang atau ditambah, sesuaikan saja, klik dulu "Preview" sebelum di-save!
5. Save Template!
Selamat, kini header blog Anda sudah "trendy", mengikuti perkembangan desain website modern, yang statis, sticky, atau melayang. Lihat DEMO.
CARA & JENIS LAINNYA
Jika header blognya ingin berukuran kecil, mirip Top Menu, bisa juga menjadi header bar tambahan, maka lakukan langkah berikut ini:
1. Template > Edit Html
2. Copy & Paste kode berikut ini sebelum atau dia atas kode </head>
CARA & JENIS LAINNYA
Jika header blognya ingin berukuran kecil, mirip Top Menu, bisa juga menjadi header bar tambahan, maka lakukan langkah berikut ini:
1. Template > Edit Html
2. Copy & Paste kode berikut ini sebelum atau dia atas kode </head>
<style type="text/css">
.fixed-header{
overflow: hidden;
position: fixed;
z-index: 999999;
top: 0px;
left: 0px;
right: 0px;
height: 76px;
background: #EEE;
}</style>2. Copy Paste kode beikut ini di atas kode </body>
<div class="fixed-header" >
<center><h1>Type Your Blog Name Here</h1></center>
</div>3. Save Template!
Jika tidak muncul, hapus kode di atas kode </body> tadi, Save Template!
4. Klik "Layout" > Add a Gadget > Pilih "HTML/Javascript"
5. Copas kode berikut ini ke kolom "Content".
<div class="fixed-header" >
<center><h1>Type Your Blog Name Here</h1></center>
</div><div class="fixed-header" >
<center>
<h1><img src="URL GAMBAR/LOGO" /></h1>
</center> </div>
Demikian artikel tentang Cara Membuat Header Blog Statis (Melayang) ini dapat kami sampaikan, semoga artikel atau info tentang Cara Membuat Header Blog Statis (Melayang) ini, dapat bermanfaat. Jangan lupa dibagikan juga ya! Terima kasih banyak atas kunjungan nya.
