Membuat Header Menjadi 2 Kolom Pada Template Default Blogger

Bagikan ke Google+Tambahkan ke DeliciousTweet dong..Share ke FacebookSubmit ke StumbleUponKirim ke Digg

Template default blogger terdiri atas satu kolom header yang letaknya di bawah elemen Favicon dan navbar. Di dalam elemen header terdapat sebuah tool yang dapat digunakan untuk mengupload gambar. Gambar yang sudah di Upload akan tersimpan di Google+ foto dan di Picasa Web Album. Foto itu akan menjadi Background Header. Itu adalah salah satu kelebihan dari menggunakan template bawaan blogger, banyak tool bermamfaat yang disediakan.

Tutorial tentang cara membagi elemen header menjadi 2 kolom ini di buat karena belum ada satupun blog yang membahas tentang hal ini (Khusus untuk template bawaan blogger). Contoh gambar untuk header dua kolom, bisa di lihat pada gambar di atas. Tanpa basa basi lagi, silahkan ikuti langkah di bawah ini!

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