Cara Membuat Header Blog Dua Kolom Responsive

Follow @romel_tea
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.

Cara Membuat Header Blog Dua Kolom Responsive

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.*

Thanks for reading Cara Membuat Header Blog Dua Kolom Responsive | Tags:

Next Article
« Prev Post
Previous Article
Next Post »

Related Posts

Your Comments

5 komentar

Tulis komentar
Nino Artikel
AUTHOR
Tuesday, February 27, 2018 delete

Artikel yang bermanfaat, karena secara default pada tata letak blogger tidak menyediakan itu. Oh iya ada pertanyaan agak OOT nih kang.

Pertanyaan nya, bagaimana cara mengganti Buton share yang ada di blog saya (template paling banyak digunakan blogger) dengan Buton share seperti yang ada di blog ini? Apakah ada tutorialnya? Terima kasih. :)

Reply
avatar
Romel Tea
AUTHOR
Tuesday, February 27, 2018 delete

Itu social share button dari AddThis, silakan buka addthis.com

Reply
avatar
Nino Artikel
AUTHOR
Wednesday, February 28, 2018 delete

Oke, terima kasih kang. Sekarang blog saya pakai Social Share dari AddThis, kelihatan lebih keren. Hehe..

Reply
avatar
Riswan DC
AUTHOR
Friday, March 09, 2018 delete

Kalo template yang dipake ama blogromelta yang sekarang apa namanya bang? Ane suka.. Sederhana tapi keren

Reply
avatar
Romel Tea
AUTHOR
Friday, March 09, 2018 delete

Tidak ada nama. Ini template hasil modifikasi dari tema bawaan blogger. Hanya saja desainnya meniru template orang lain, nanti juga berubah lagi kalo lagi mood modifikasi. Cek: https://blogromeltea.blogspot.co.id/2017/12/cara-membuat-responsive-template-bawaan-blogger.html

Reply
avatar

No Spam, Please!