Cara Membuat Header Blog Responsive ala Contoh Blog

Cara Membuat Header Blog Responsive ala Contoh Blog

BERIKUT ini cara membuat header blog responsive ala Contoh Blog. Demonya bisa dilihat di blog ini. Ukuran header (logo dan iklan di sampingnya) menyesuaikan dengan ukuran lebar layar screen perangkat mobile yang digunakan.

Untuk menggunakan kode header responsive ini, Anda harus hapus dulu seuma kode header di template blog Anda.

KODE CSS
Dipasang di atas kode ]]></b:skin>

#header-wrapper{height:100px;margin:0 auto;padding:15px 15px 10px;overflow:hidden;max-width:980px;background:#fff}
#header1{float: left;width: 300px;margin:0 auto;padding:10px;}
#header1 img,#header-inner img{width:auto;max-width:100%}
#header-inner h1,#header-inner img, #header1 h1,#header-inner h2,#header1 h2, #header-inner .title{font:normal normal 40px Oswald,"Arial Narrow",Sans-Serif;margin:0;padding:0;color:#222;text-transform:uppercase}
#header-inner h1 a,#header-inner .title a{color:#222}
#header2{float:right;width:468px;margin:5px;padding:0;}
@media screen and (max-width:980px){
#header-wrapper{height:auto}
#header{margin:0;padding:15px;overflow:hidden}
#header1{float:none;width:100%;margin:0 0 15px;padding:0;text-align:center}
#header2{float:none;width:100%;margin:10px 0 0;padding:0;text-align:center}
#header-inner img{max-width:100%;width:auto;margin:0 auto;padding:0;text-align:center}
}
@media screen and (max-width:384px){
#header-wrapper{margin:0;padding:10px 10px 5px;overflow:hidden}
}

KODE HTML
Dipasang di bawah kode <body>

<header id='header-wrapper' itemscope='itemscope' itemtype='http://ift.tt/1iiqCas'>
<b:section class='header1' id='header1' maxwidgets='1' showaddelement='yes'/>
<b:section class='header2' id='header2' preferred='yes'/>
</header>

KODE LAYOUT
Disatukan dengan kode body#layout yang sudah ada di template Anda. Ini untuk mengatur posisi widget header di layout / dashboard.