Membuat sebuah header dengan widget di sebelahnya tidak lah terlalu
sulit, karena hanya bermodalkan beberapa bagian divisi dan 2 section
saja kita sudah dapat membuat sebuah Header yang Responsive. Header yang
akan saya bahas saat ini yaitu header yang berada di posisi paling
atas, tidak melayang, terdapat widget di sebelahnya, dengan perbandingan
widget dan header yaitu 6:4.
Cara Membuat Header FullScreen Responsive di Blog
- Letakkan CSS berikut tepat di atas ]]</b:skin>
- Letakkan HTML berikut tepat di bawah <body>
/* Header */ #header-wrapper{width:100%;overflow:hidden;background: rgba(252, 252, 252, 0.74);padding:10px 0; border-bottom: 1px solid #eee;} #header-kiri{float:left;max-width:40%;overflow:hidden;} #header-kanan{float:right;max-width:60%;overflow:hidden;} #header-kanan img{max-width:100%;} .header .widget{padding:5px;} .description { margin: 0px; font-size:13px; } .title { font-size: 22px; margin: 0px; }.pembatas{max-width:1000px;margin:0 auto;}
<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>
bagaimana jika tidak ada body pada html di template yang digunakan? thanks
BalasHapusanggap aja apes...krn gak direspon yg punya blog
Hapuspusing ahh
BalasHapusposting asal ni wkwk
BalasHapusGan bagi template ini dong.. :D
BalasHapus