Cara Membuat Header Blog Dua Kolom Responsive

Baca Juga

Cara Membuat Header Blog Dua Kolom Responsive

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 membuat header baru dua kolom responsive. Demonya seperti blog romeltea ini.

Cara Membuat Header Blog Dua Kolom Responsive

1. Klik Tema > Klik Edit HTML
2. Copas kode CSS Header Blog Dua Kolom Responsive berikut ini di atas kode ]]></b:skin>

#header-wrapper{height:70px;margin:0 auto;padding:5px 20px 14px 30px;overflow:hidden;background:#fff}
#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%;}

3. Temukan dan HAPUS kode <header> ... </header> atau <header .... ada kode lain> ... </header>
4. Replace atau ganti kode di atas dengan kode 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='Blog Romeltea (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 == &quot;BEHIND&quot;'>
      <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'>
        <b:if cond='data:blog.pageType != &quot;item&quot;'>
          <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
            <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 + &quot;_headerimg&quot;' expr:src='data:sourceUrl' style='display: block'/>
        </a>
        <!--Show the description-->
        <b:if cond='data:imagePlacement == &quot;BEFORE_DESCRIPTION&quot;'>
          <b:include name='description'/>
          <b:if cond='data:blog.pageType != &quot;item&quot;'>
            <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
              <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 != &quot;item&quot;'>
          <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
             <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 dia cara membuat Header Blog Dua Kolom Responsive. Khususnya jika Anda memodifiksi template bawaan blogger jadi responsive. Wasalam.*