Tutorial header 2 column

Template default Blogspot hanyalah mempunyai 1 column header yang terletak dibawah elemen favicon dan Navbar. Header adalah sebuah tool yang digunakan untuk mengupload gambar sebagai pengenalan kepada sesebuah blog. Kebanyakkan blogger masa kini, mahu mengoptimumkan penggunaan ruangan header contohnya dengan penambahan banner iklan, icon media sosial dan sebagainya sebagai gandingan header.

Contoh gambar header 2 column adalah seperti di atas. Di bawah adalah tutorial untuk membahagikan elemen header kepada 2 bahagian.

• Sign in di blogger.com
• Pada menu drop down, pilih →Template → Edit HTML
• Tekan control+F (untuk fungsi search) dan cari code ]]></b:skin>
• Letakkan code berikut di atas code ]]></b:skin>

/* Header Right from http://jom-belajar-blog.blogspot.com/----------------------------------------------------------- */
#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 code dibawah ini

<b:else/>
    <a expr:href='data:blog.homepageUrl'><data:title/></a>
  </b:if>
</b:includable>
        </b:widget>
      </b:section>

• Letakkan code berikut selepas code diatas seperti dalam gambar dibawah.

<b:section id='header-right' maxwidgets='1' showaddelement='no'/>
        <b:widget id='HTML90' locked='false' title='' type='HTML'>
          <b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>

  <b:include name='quickedit'/>
</b:includable>
        </b:widget>
      </b:section>

• Simpan template

Gambar dibawah adalah hasil dari pembahagian elemen header kepada 2 bahagian.