Cara Membuat Header Blog Responsive ala Contoh Blog

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.

Cara Membuat Header Blog Responsive ala Contoh Blog

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,&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 kode <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 Contoh Blog. Good Luck! (www.contohblog.com).*

Labels: Desain Blog, Gadget

Related Posts

0 Komentar untuk "Cara Membuat Header Blog Responsive ala Contoh Blog"

1. Komentar spam, menyertakan link aktif dan alamat blog tidak akan muncul.
2. Tidak semua pertanyaan sempat atau bisa dijawab.
3. Bagi yang mau tanya, sebelum bertanya, silakan cari dulu di Kotak Pencarian di Sidebar.
Thanks for visiting and the comment :)

Contact Form

Name

Email *

Message *