Cara Membuat Header Blog Dua Kolom Responsive

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

Previous
« Prev Post
Author Image

Romeltea
Romeltea adalah onair dan online name Asep Syamsul M. Romli aka Kang Romel. Praktisi Media, Blogger, Trainer Komunikasi from Bandung, Indonesia. Follow me: facebook twitter instagram linkedin youtube

Recommended Posts

Related Posts

Show comments
Hide comments

5 comments on Cara Membuat Header Blog Dua Kolom Responsive

  1. 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. :)

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

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

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

    ReplyDelete
    Replies
    1. 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

      Delete

No Spam, Please!