Cara Membuat Header Blog Responsive ala

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

Cara Membuat Header Blog Responsive ala  Cara Membuat Header Blog Responsive ala

Untuk memakai instruksi header responsive ini, Anda harus hapus dulu seuma instruksi 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,&quot;Arial Narrow&quot;,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 instruksi <body>


<header id='header-wrapper' itemscope='itemscope' itemtype='http://schema.org/WPHeader'>
<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.

body#layout #header-wrapper{width:100%;margin-top:70px}
body#layout #header1{float:left;width:20%;}
body#layout #header2{float:right;width:70%;}

Save!

Demikian  Cara Membuat Header Blog Responsive ala . Good Luck! (www.idtutorial.com).*

Share To:

Endo Sadewa

Post A Comment:

0 comments so far,add yours