Skip to content Skip to sidebar Skip to footer

Cara Membuat Header Blog Menjadi Dua Kolom

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 permintaan seorang kawan 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;}


  • Selanjutnya cari kode di bawah ini
<a expr:href='data:blog.homepageUrl'><data:title/></a>
</b:if>
</b:includable>

</b:widget>
      </b:section>

  • Lalu letakan kode berikut tepat di bawahnya
<b:section id='header-right' maxwidgets='1' showaddelement='no'/>
<div style='clear: both;'/>

  • Yang terakhir, Simpan Template

Selamat mencoba

Post a Comment for "Cara Membuat Header Blog Menjadi Dua Kolom"