06 November 2013

Cara Membuat Header Blog Menjadi Dua Kolom

Taohids Channel_06 November 2013

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

Bagikan Artikel Ke Sosial Media


Artikel Terkait lainya tentang :

0 Comments

Silahkan berkomentar sesuai tema posting di atas. Komentar jorok, spam, atau tidak relevan, akan kami hapus secara permanen.