Cara Membuat Header Blog Dua Kolom Responsive

Baca Juga

POSTING ini merupakan update atau kelanjutan dari posting sebelumnya: cara membuat header blog dua kolom dan cara membuat header blog responsive, sekaligus melengkapi cara membuat header blog ala CB Blogger.

Cara Membuat Header Blog Dua Kolom Responsive ini untuk mengganti header blog bawaan blogger. Template bukan default blogger biasanya sudah dua kolom dan/atau sudah responsive.

Cara Membuat Header Blog Dua Kolom Responsive

Ini cara mengganti header blog di template bawaan blogger versi Simple.

1. Tema > Edit HTML

2. Cari kode berikut ini:

/* Header
----------------------------------------------- */
.header-outer {
background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px;
_background-image: none;
}
.Header h1 {
font: $(header.font);
color: $(header.text.color);
text-shadow: $(header.shadow.offset.left) $(header.shadow.offset.top) $(header.shadow.spread) rgba(0, 0, 0, .2);
}
.Header h1 a {
color: $(header.text.color);
}
.Header .description {
font-size: $(description.text.size);
color: $(description.text.color);
}
.header-inner .Header .titlewrapper {
padding: 22px $(header.padding);
}
.header-inner .Header .descriptionwrapper {
padding: 0 $(header.padding);
}

3. Hapus dan ganti dengan kode berikut ini:

#header-wrapper {margin:20px;overflow:hidden;}
#header {float:left;width:100%;max-width:430px;}
.header-right {float:right;padding:0;overflow:hidden;margin:0;width:100%; max-width:468px;}
#header-wrapper {margin:30px auto;padding:0;overflow:hidden;max-width:920px;overflow:hidden;} #header {float:left;width:100%;max-width:430px;color:#333;margin:0;}
#header h1, #header h2, #header p {font-family:Roboto;font-size:240%;font-weight:700;color:#333;text-transform:uppercase;}
#header a {color:#333;text-decoration:none;transition:all 0.3s ease-out;}
#header a:hover {color:#398dcc;}
#header .description {font-family:Roboto;font-size:100%;font-weight:400;color:#666;text-transform:none;line-height:normal;margin:0;}
.header img {display:block;}
.header-right {float:right;padding:0;overflow:hidden;margin:0;width:100%; max-width:468px;} .header-right img {display:block;} .Header h1,.Header h2 {margin-bottom:0;}
@media screen and (max-width:960px) {
#header h1,#header p,#header,.header-right,#header .description{margin:0 auto;width:100%;float:none;text-align:center;}
#header {margin:20px auto;padding:0 30px;background:transparent;max-width:80%;}
.header-right img, .header-right iframe{margin:0 auto;max-width:100%;}
#header-wrapper{padding:0;margin:20px auto;}
}
@media only screen and (max-width:640px){
#header-wrapper{padding:0;margin:20px auto;}
#header {min-width:initial;background:none;margin:20px auto;padding:0 5px;}
#header .description {font-size:100%;line-height:1.5;}
#header h1,#header p,#header,.header-right,#header .description{margin:0 auto;width:100%;float:none;text-align:center;}
.header-right{float:none;margin:0 auto;text-align:center;}
.header-right img, .header-right iframe{float:none;margin:0 auto;text-align:center;}
}

4. Cari dan hapus kode berikut ini yang diawali dengan kode <header>  hingga </header> seperti ini:

<header>
<div class='header-outer'>
<div class='header-cap-top cap-top'>
<div class='cap-left'/>
<div class='cap-right'/>
</div>
<div class='fauxborder-left header-fauxborder-left'>
<div class='fauxborder-right header-fauxborder-right'/>
<div class='region-inner header-inner'>
<b:section class='header' id='header' maxwidgets='1' name='Header' showaddelement='no'>
<b:widget id='Header1' locked='true' title='New SEO Blogger Themes (Header)' type='Header'>
<b:widget-settings>
<b:widget-setting name='displayUrl'/>
<b:widget-setting name='displayHeight'>0</b:widget-setting>
<b:widget-setting name='sectionWidth'>273</b:widget-setting>
<b:widget-setting name='useImage'>false</b:widget-setting>
<b:widget-setting name='shrinkToFit'>false</b:widget-setting>
<b:widget-setting name='imagePlacement'>BEHIND</b:widget-setting>
<b:widget-setting name='displayWidth'>0</b:widget-setting>
</b:widget-settings>
<b:includable id='main'>
<b:if cond='data:useImage'>
<b:if cond='data:imagePlacement == &quot;BEHIND&quot;'>
<!--
Show image as background to text. You can't really calculate the width
reliably in JS because margins are not taken into account by any of
clientWidth, offsetWidth or scrollWidth, so we don't force a minimum
width if the user is using shrink to fit.
This results in a margin-width's worth of pixels being cropped. If the
user is not using shrink to fit then we expand the header.
-->
<b:if cond='data:mobile'>
<div id='header-inner'>
<div class='titlewrapper' style='background: transparent'>
<h1 class='title' style='background: transparent; border-width: 0px'>
<b:include name='title'/>
</h1>
</div>
<b:include name='description'/>
</div>
<b:else/>
<div expr:style='&quot;background-image: url(\&quot;&quot; + data:sourceUrl + &quot;\&quot;); &quot; + &quot;background-position: &quot; + data:backgroundPositionStyleStr + &quot;; &quot; + data:widthStyleStr + &quot;min-height: &quot; + data:height + &quot;_height: &quot; + data:height + &quot;background-repeat: no-repeat; &quot;' id='header-inner'>
<div class='titlewrapper' style='background: transparent'>
<h1 class='title' style='background: transparent; border-width: 0px'>
<b:include name='title'/>
</h1>
</div>
<b:include name='description'/>
</div>
</b:if>
<b:else/>
<!--Show the image only-->
<div id='header-inner'>
<a expr:href='data:blog.homepageUrl' style='display: block'>
<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_headerimg&quot;' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>
</a>
<!--Show the description-->
<b:if cond='data:imagePlacement == &quot;BEFORE_DESCRIPTION&quot;'>
<b:include name='description'/>
</b:if>
</div>
</b:if>
<b:else/>
<!--No header image -->
<div id='header-inner'>
<div class='titlewrapper'>
<h1 class='title'>
<b:include name='title'/>
</h1>
</div>
<b:include name='description'/>
</div>
</b:if>
</b:includable>
<b:includable id='description'>
<div class='descriptionwrapper'>
<p class='description'><span><data:description/></span></p>
</div>
</b:includable>
<b:includable id='title'>
<b:tag cond='data:blog.url != data:blog.homepageUrl' expr:href='data:blog.homepageUrl' name='a'>
<data:title/>
</b:tag>
</b:includable>
</b:widget>
</b:section>
</div>
</div>
<div class='header-cap-bottom cap-bottom'>
<div class='cap-left'/>
<div class='cap-right'/>
</div>
</div>
</header>

5. Ganti dengan kode yang di bawah ini.

<div id='header-wrapper' itemscope='itemscope' itemtype='http://schema.org/WPHeader'>
 <b:section class='header section' id='header' maxwidgets='1' showaddelement='no'>
 <b:widget id='Header1' locked='true' title='CB Blogger (Header)' type='Header' version='1'> <b:widget-settings> <b:widget-setting name='displayUrl'/> <b:widget-setting name='displayHeight'>0</b:widget-setting> <b:widget-setting name='sectionWidth'>-1</b:widget-setting> <b:widget-setting name='useImage'>false</b:widget-setting> <b:widget-setting name='shrinkToFit'>false</b:widget-setting> <b:widget-setting name='imagePlacement'>BEHIND</b:widget-setting> <b:widget-setting name='displayWidth'>0</b:widget-setting> </b:widget-settings> <b:includable id='main'> <b:if cond='data:useImage'> <b:if cond='data:imagePlacement == &quot;BEHIND&quot;'> <!-- Show image as background to text. You can't really calculate the width reliably in JS because margins are not taken into account by any of clientWidth, offsetWidth or scrollWidth, so we don't force a minimum width if the user is using shrink to fit. This results in a margin-width's worth of pixels being cropped. If the user is not using shrink to fit then we expand the header. --> <b:if cond='data:mobile'> <div id='header-inner'> <div class='titlewrapper' style='background: transparent'> <b:include name='title'/> </div> <b:include name='description'/> </div> <b:else/> <div expr:style='&quot;background-image: url(\&quot;&quot; + data:sourceUrl + &quot;\&quot;); &quot; + &quot;background-position: &quot; + data:backgroundPositionStyleStr + &quot;; &quot; + data:widthStyleStr + &quot;min-height: &quot; + data:height + &quot;_height: &quot; + data:height + &quot;background-repeat: no-repeat; &quot;' id='header-inner'> <div class='titlewrapper' style='background: transparent'> <b:include name='title'/> </div> <b:include name='description'/> </div> </b:if> <b:else/> <!--Show the image only--> <div id='header-inner'> <a expr:href='data:blog.homepageUrl' style='display: block'> <img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_headerimg&quot;' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/> </a> <!--Show the description--> <b:if cond='data:imagePlacement == &quot;BEFORE_DESCRIPTION&quot;'> <b:include name='description'/> </b:if> </div> </b:if> <b:else/> <!--No header image --> <div id='header-inner'> <div class='titlewrapper'> <b:include name='title'/> </div> <b:include name='description'/> </div> </b:if> </b:includable> <b:includable id='description'> <div class='descriptionwrapper'> <p class='description'><span><data:description/></span></p> </div> </b:includable> <b:includable id='title'> <b:if cond='data:blog.pageType != &quot;item&quot;'> <b:if cond='data:blog.pageType != &quot;static_page&quot;'> <h1 class='title'> <a expr:href='data:blog.homepageUrl' expr:title='data:blog.title' itemprop='url'> <span itemprop='name'><data:title/></span> </a> </h1> <b:else/> <h2 class='title'> <a expr:href='data:blog.homepageUrl' expr:title='data:blog.title' itemprop='url'> <span itemprop='name'><data:title/></span> </a> </h2> </b:if> <b:else/> <h2 class='title'> <a expr:href='data:blog.homepageUrl' expr:title='data:blog.title' itemprop='url'> <span itemprop='name'><data:title/></span> </a> </h2> </b:if> </b:includable> </b:widget> </b:section> <b:section class='header-right section' id='header-right' maxwidgets='1' showaddelement='yes'/> </div> <div class='clear'/>

6. Untuk merapikan layout (tata letak) header di dashboard, copas kode berikut ini di bawah kode <b:template-skin>

body#layout #header-wrapper {min-height:0px;width:100%;}
body#layout #header {width:30%;}
body#layout #header-right {width:70%;}
#layout #header-wrapper{min-height:0px;width:100%;margin:10px 0 0 0;}

7. Save! Simpan Template

Header plus Menu

Untuk membuat header blog plus menu responsive, ini salah satu pilihannya:

See the Pen CSS3 Responsive Menu Dropdown + Submenu width Logo by emre (@emredenx) on CodePen.

Demikian Cara Membuat Header Blog Dua Kolom Responsive. Good Luck & Happy Blogging! (www.contohblog.com).*