Membuat Header Responsive

 Apa itu Header dan kegunaannya ? header adalah tempat informasi tentang file yang dibuat di halaman bagian atas (head).

Seperti gambar di bawah ini

Bagaimana cara membuat header ini responsive seperti di bawah ini ?

Baca Juga : Cara membuat footer responsive

Hanya perlu beberapa Langkah untuk membuanya menjadi responsive 

1.Masuk ke Template ( Edit HTML)

2.Cari code #header-wrapper rubah widht-nya menjadi 100% atau auto . contohnya seperti ini ( pasang kode ini diatas </style>  )

        

#header-wrapper{width:100%;overflow:hidden;background:#FFF;padding:10px 0; border-bottom: 1px solid #eee;}

3.Kalau tidak ketemu kode #header-wrapper bisa di cari di CSS

   <b:skin><![CDATA[

    Kode CSS disini letaknya

   </b:skin>

4.Kemudian kita beri CSS pembatas ( letakkan kode dibawah ini diatas )

     

.pembatas{max-width:1000px;margin:0 auto;}
5. Letakan HTML-nya agar CSS diatas berfungsi , caranya pada div header kita tambahkan class             pembatas ( temukan div header tambahkan class pembatas dibawahnya )
<header id='header-wrapper'> <div class='pembatas'> <b:section class='header' id='header-kiri' maxwidgets='1'><b:widget id='Header1' locked='true' title='(Header)' type='Header'></b:widget> <b:section class='header' id='header-kanan' maxwidgets='1'/> </div> </header>
6.Silahkan simpan dan lihat template anda.

   Memang kelihatannya susah bagi orang gaptek, tetapi jika anda seorang blogger yang suka mengedit template, membajak template orang, ataupun seorang blogger pemula anda pasti tidak kesusahan.