Tutorial Cara Membuat Header Blog Dua Kolom Responsive ini khususnya untuk template blog bawaan blogger versi Simple. Aslinya, header blog tema default blogger itu cuma satu kolom.
Berikut ini cara menggantinya dan menciptakan header gres dua kolom responsive. Demonya menyerupai blog romeltea ini.
Cara Membuat Header Blog Dua Kolom Responsive
1. Klik Tema > Klik Edit HTML2. Copas instruksi CSS Header Blog Dua Kolom Responsive berikut ini di atas instruksi ]]></b:skin>
#header-wrapper{height:70px;margin:0 auto;padding:5px 20px 14px 30px;overflow:hidden;background:#fff}3. Temukan dan HAPUS instruksi <header> ... </header> atau <header .... ada instruksi lain> ... </header>
#header1{float:left;max-width:350px;margin:0 auto;padding:10px 0;}
#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:bold 32px 'Roboto Condensed',Arial,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;}
.Header .description {margin: 0 auto;padding: 0;font-size: 95%;overflow: hidden;height: 20px;}
@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,#header2 img{float:none;width:100%;margin: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}
}
body#layout #header-wrapper {height: auto;}
body#layout #header1{float:left;width:30%;}
body#layout #header2{float:right;width:50%;}
4. Replace atau ganti instruksi di atas dengan instruksi HTML Header Blog Dua Kolom Responsive berikut ini:
<header id='header-wrapper' itemscope='itemscope' itemtype='http://schema.org/WPHeader'>
<b:section class='header1' id='header1' maxwidgets='1' showaddelement='yes'>
<b:widget id='Header1' locked='true' title=' (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'>300</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 == "BEHIND"'>
<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='"background-image: url(\"" + data:sourceUrl + "\"); " + "background-position: " + data:backgroundPositionStyleStr + "; " + data:widthStyleStr + "min-height: " + data:height + "_height: " + data:height + "background-repeat: no-repeat; "' 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'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<h1 style='text-indent:-9999px;margin:0 0 0 0;padding:0 0 0 0;height:0px;'><b:include name='title'/></h1>
</b:if>
</b:if>
<a expr:href='data:blog.homepageUrl' style='display: block'>
<img expr:alt='data:title' expr:id='data:widget.instanceId + "_headerimg"' expr:src='data:sourceUrl' style='display: block'/>
</a>
<!--Show the description-->
<b:if cond='data:imagePlacement == "BEFORE_DESCRIPTION"'>
<b:include name='description'/>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<h1 style='text-indent:-9999px;margin:0 0 0 0;padding:0 0 0 0;height:0px;'><b:include name='title'/></h1>
</b:if>
</b:if>
</b:if>
</div>
</b:if>
<b:else/>
<!--No header image -->
<div id='header-inner'>
<div class='titlewrapper'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType == "static_page"'>
<p class='title'><b:include name='title'/></p>
<b:else/>
<h1 class='title'><b:include name='title'/></h1>
</b:if>
<b:else/>
<p class='title'><b:include name='title'/></p>
</b:if>
<b:include name='description'/>
</div>
</div>
</b:if>
</b:includable>
<b:includable id='description'>
<div class='descriptionwrapper'>
<p class='description' itemprop='description'><span><data:description/></span></p>
</div>
</b:includable>
<b:includable id='title'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<span itemprop='name'><data:title/></span>
<b:else/>
<a expr:href='data:blog.homepageUrl' itemprop='url'> <span itemprop='name'><data:title/></span></a>
</b:if>
</b:includable>
</b:widget>
</b:section>
<b:section class='header2' id='header2' preferred='yes'/>
</header>
<div class='clear'/>
5. Save!
Simpan template.
Itu beliau cara menciptakan Header Blog Dua Kolom Responsive. Khususnya bila Anda memodifiksi template bawaan blogger jadi responsive. Wasalam.*
0 comments: