January 16, 2015

Cara Membuat Header Blog Statis (Melayang)

January 16, 2015

Cara Membuat Header Blog Statis (Melayang)
HEADER blog statis, sticky, atau melayang (floating) merupakan salah satu trend desain website 2015, selain top menu statis.

Header & Top Menu statis maksudnya adalah tetap muncul saat blog di-scroll. (Baca: Top 5 Trending Desain Blog 2015).

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>
<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>

Jika ingin mengganti huruf dengan logo/gambat, gunakan kode berikut ini:

<div class="fixed-header" >
 <center>
<h1><img src="URL GAMBAR/LOGO" /></h1>
</center> </div>

Demikian Cara Membuat Header Blog Statis, Sticky, alias Melayang sebagaimana trending tampilan header terkini. Good Luck!

Sumber1
Sumber2

Previous
« Prev Post
Author Image

CB Blogger

Recommended Posts

Related Posts

Show comments
Hide comments

9 comments on Cara Membuat Header Blog Statis (Melayang)

  1. terima kasih, tutorialnya sangat bermanfaat.

    kalau mau bikin menu/header seperti blog ini ===> http://dynamicmag-sbtemplates.blogspot.in/ bagaimana caranya ?

    ketika di scrolldown menunya tetap berada diatas, ketika scrolltop normal kembali.
    mohon pencerahannya

    ReplyDelete
    Replies
    1. sy coba di blog ini gan http://mediatarbawi.blogspot.com

      berhasil tipsnya, tp ketika di scrolldown menunya jadi lebih pendek atau tdk sejajar, sudah coba coba otak atik width nya tp blm berhasil.

      1. bagaimana caranya biar menunya bisa sejajar ?
      2. bagaimana caranya agar menunya seperti blog ini http://dynamicmag-sbtemplates.blogspot.in/

      ketika di scrolldown menunya tetap berada diatas dan full

      mohon bantuannya gan

      Delete
    2. 1. Ngebet banget sama template dynamicmag? Gampang... pake aja template itu, beres kan?
      2. Media tarbawi pake template Sang SEO Responsive Blogger Template karya Kang Mousir, ya... mustinya antum tanya dong ke Kang Mousir :) Kenapa tanya di mari?
      3. Biar menunya sejajar saat di-scroll, tambahkan width=990px di elemen < div = navitions jadi seperti ini:

      position: fixed;
      top: 0px;
      z-index: 9999;
      width: 990px;

      Delete
    3. sudah jatuh hati terlebih dahulu sm template sang seo karya kang mousir hehehe,, tp suka gaya menu template dinamicmag. di blog kang mousir tdk ada tips bikin menu begini.
      mau bikin template sendiri tp blm bisa, masih belajar.
      trm ksh bantuannya

      Delete
  2. Kalau di cms wordpress gimana yah?

    ReplyDelete
    Replies
    1. CMS WP mah mudah banget bro, tinggal cari plugin atau wp theme yang headernya statis

      Delete
  3. Min kalo misalkan di scrool ke bawah kaga muncul tapi saat di scrool ke atas muncul, itu kenapa yah? mohon dibales

    saya menggunakan platform blogger

    ReplyDelete
  4. mas Nobel, kalau saya pakai template CB NTS Magz, kecepatan mobilenya 99%, dekstop 93%,, pokoknya wusss deh

    ReplyDelete
  5. gimana biar kaya google, pas di atas header biasa aja, tp pas scroll header melayang dan fiturnya jd cuma search box doang?

    ReplyDelete

Contact Form

Name

Email *

Message *