Cara menambahkan widget/gadget di atas header

Kali ini Saya akan berbagi ilmu sama teman-teman bagaimana cara menambahkan widget/gadget pada blog sebagai berikut :

1.       MENAMBAHKAN 1 KOLOM GADGET DIATAS HEADER
  1. Masuk pada halaman Template
  2. Klik Edit HTML kemudian Lanjutkan
  3. Cari kode  <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
  4. Jika sudah ketemu ganti  showaddelement='no' menjadi showaddelement='yes'
  5.  Simpan Template dan lihat hasilnya

1.       MENAMBAHKAN 2 KOLOM GADGET DIATAS HEADER
  1. Masuk pada halaman Template
  2. Klik Edit HTML kemudian Lanjutkan
  3. Pertama-tama cari code  <header>, jika sudah ketemu letakkan code berikut tepat di bawah code <header> 
  4.   <div id='box-kolom-widget'>
    <div id='box1' style='width: 50%; float: left; margin:0; text-align: left;'>
    <b:section class='box-widget' id='col1' preferred='yes' style='float:left;'/>
    </div>
    <div id='box2' style='width: 50%; float: left; margin:0; text-align: left;'>
    <b:section class='box-widget' id='col2' preferred='yes' style='float:left;'/>
    </div><div style='clear:both;'/>
    </div> 
  5. Simpan Template dan lihat hasilnya
untuk tulisan warna merah diatas dapat anda ganti sesuai dengan keinginan. 50% adalah untuk mengatur lebar gadget, sedangkan left adalah mengatur posisi widget dapat anda ganti dengan right atau center.

.       MENAMBAHKAN 3 KOLOM GADGET DIATAS HEADER
  1. Masuk pada halaman Template
  2. Klik Edit HTML kemudian Lanjutkan
  3. Pertama-tama cari code  <header>, jika sudah ketemu letakkan code berikut tepat di bawah code <header> 
  4.   <div id='box-kolom-widget'>
    <div id='box1' style='width: 35%; float: left; margin:0; text-align: left;'>
    <b:section class='box-widget' id='col1' preferred='yes' style='float:left;'/>
    </div>
    <div id='box2' style='width: 30%; float: left; margin:0; text-align: left;'>
    <b:section class='box-widget' id='col2' preferred='yes' style='float:left;'/>
    </div>
    <div id='box3' style='width: 35%; float: left; margin:0; text-align: left;'>
    <b:section class='box-widget' id='col3' preferred='yes' style='float:left;'/>
     </div>
    <div style='clear:both;'/>
    </div> 
  5. Simpan Template dan lihat hasilnya


Tidak ada komentar:

Posting Komentar