Ubah Kolom Header jadi 2 Kolom Berdampingan

Hari ini Tanggal 13-Mei-2015 saya mendapatkan lagi satu ilmu baru. Sudah lama saya coba utak-atik sendiri, tapi selalu tidak berhasil membuat kolom Header pada blog menjadi 2 kolom berdampingan. Frustasi?? Jelas dong...
Setelah berusaha tidak bisa juga saya coba bertanya ke mbah guugel dan hasilnya saya dapat ilmu dari Tutorialblog saya terapkan dan berhasil.. yah.. di template ini..
singkatnya saya akan coba mereviewnya disini, namun ada baiknya anda langsung membaca di link berikut dan bertanya langsung kepada pemilik blog tersebut, akan lebih jelas dari pada saya yang baru belajar.

Tutorialblog

Tanpa basa basi lagi, silahkan ikuti langkah di bawah ini Cara Ubah Kolom Header jadi 2 Kolom Berdampingan!

• Sign in di blogger.com
• Pada menu drop down, pilih Template dan Edit HTML
• Letakkan kode berikut di atas kode ]]></b:skin>

#header, body#layout #header {width:35%;display:inline-block;float:left;padding:0px;}
#header-right, body#layout #header-right  {width:50%;display:inline-block;float:right;padding:0px;}
#header-right .widget {margin:0;}

• Cari kode di bawah ini

 <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
        <b:widget id='Header1' locked='true' title='Blogger Widget Generator (Header)' type='Header'>
          <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:if cond='data:blog.url == data:blog.homepageUrl'>
    <data:title/>
  <b:else/>
    <a expr:href='data:blog.homepageUrl'><data:title/></a>
  </b:if>
</b:includable>
        </b:widget>
      </b:section>

• Letakkan kode berikut setelah kode di atas

 <b:section id='header-right' maxwidgets='1' showaddelement='no'/>
<div style='clear: both;'/>

• Terakhir, simpan template Anda. 

Maaf jika tidak serapi artikel aslinya, saya juga masih belajar sama seperti anda. Namun tidak ada salahnya jika kita saling berbagi.