Cara membuat 1, 2, 3 kolom gadget diatas atau dibawah header dan post

Cara membuat kolom gadget artinya menambah ataupun menciptakan kolom gadget yang letaknya bisa dimana saja sesuai keinginan dan kebutuhan blog dengan cara memasukan dan membuat kode-kode scrift HTML sendiri, biasanya para blogger menambah kolom gadget digunakan untuk memasang iklan atau menambah aksesoris diblog sehingga blog kelihatan menarik, caranya sebagai berikut :

A. Cara membuat 1 kolom gadget diatas post, caranya sebagai berikut :
  1. Sign in di blogger
  2. Klik Opsi lainnya
  3. Klik Templete
  4. klik Edit HTML
  5. Centang tulisan Expand Widget Templates
  6. Cari kode <b:section class='main' id='main' showaddelement='no'> (gunakan tombol CTRL + F3 untuk mempermudahkan pencarian kode)
  7. Apabila sudah ketemu ganti tulisan showaddelement='no' menjadi showaddelement='yes'
  8. Klik Simpan dan lihat hasilnya di tata letak diatas post
B. Cara membuat 1 kolom gadget diatas header, caranya sebagai berikut :
  1. Sign in di blogger
  2. Klik Opsi lainnya
  3. Klik Templete
  4. klik Edit HTML
  5. Centang tulisan Expand Widget Templates
  6. Cari kode <div class="region-inner header-inner"> (gunakan tombol CTRL + F3 untuk mempermudahkan pencarian kode)
  7. Tambahkan Kode scrift ini <b:section class="header" id="topheader" preferred="yes">
    dibawah kode tersebut
  8. Selanjutnya dibawah kode diatas akan melihat kode ini <b:section class="header" id="header" maxwidgets="1" showaddelement="no"> ganti tulisan showaddelement='no' menjadi showaddelement='yes'
  9. Klik Simpan dan lihat hasilnya di tata letak diatas post
Cara menempatkanya lihat gambar dibawah ini


C. Cara membuat 1 kolom gadget dibawah header, caranya sebagai berikut :
  1. Sign in di blogger
  2. Klik Opsi lainnya
  3. Klik Templete
  4. klik Edit HTML
  5. Centang tulisan Expand Widget Templates
  6. Cari kode ]]></b:skin> 
  7. (gunakan tombol CTRL + F3 untuk mempermudahkan pencarian kode)
  8. Copy paste kode CSS dibawah ini dan letakan diatas kode ]]></b:skin> 


  9. #under_header
    { float:left; width:100%;
    }

  10. Cari kode  <div class="region-inner header-inner"> (gunakan tombol CTRL + F3 untuk mempermudahkan pencarian kode)
  11. Tambahkan Kode <b:section class="header" id="underheader" preferred="yes"> letakkan dibawah kode <div class="region-inner header-inner">
  12. Klik Simpan dan lihat hasilnya di tata letak diatas post
D. Cara membuat 2 kolom gadget dibawah Header caranya sebagai berikut :
  1. Sign in di blogger
  2. Klik Opsi lainnya
  3. Klik Templete
  4. klik Edit HTML
  5. Centang tulisan Expand Widget Templates
  6. Cari kode ]]></b:skin> (gunakan tombol CTRL + F3 untuk mempermudahkan pencarian kode)
  7. Copy paste kode CSS dibawah ini dan letakan diatas kode ]]></b:skin>

  8. #box-kolom-widget { clear:both;
     }
     .box-widget { padding:0px 10px 10px 10px; border:1px dotted $bordercolor;
     }

  9. Setelah itu cari kode dibawah ini :

    1. <div id="main-wrapper">
    2. atau <div id="main-outer">
    3. atau <div class="main-outer"> sesuai dengan versi HTML nya kawan (gunakan tombol CTRL + F3 untuk mempermudahkan pencarian kode)

  10. Copy paste kode dibawah ini dan letakan diatas salah satu kode diatas

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

  12. Klik Pratinjau, siapa tahu ada kesalahan
  13. Klik Simpan

E. Cara membuat 3 kolom gadget dibawah Header caranya sebagai berikut :

  1. Caranya sama seperti membuat 2 kolom gadget tinggal mengganti kode CSS dan scrift HTMLnya, seperti Copy paste kode CSS dibawah ini dan letakan diatas kode ]]></b:skin>

  2. <div id="box3" style="float: left; margin: 0; text-align: left; width: 35%;"> <b:section class="box-widget" id="col3" preferred="yes" style="float: left;">

  3. Setelah itu cari kode dibawah ini :

    1. <div id="main-wrapper">
    2. atau <div id="main-outer">
    3. atau <div class="main-outer"> sesuai dengan versi HTML nya kawan (gunakan tombol CTRL + F3 untuk mempermudahkan pencarian kode)

  4. Copy paste kode dibawah ini dan letakan diatas salah satu kode diatas

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

  6. Klik Simpan

Baca juga artikel menarik lainnya :

15 komentar:

  1. makasih mass infonya..
    info seputar bola, prediksi bola ter-update..
    berita bola TERBARU DAN TERPERCAYA hanya ada di Bola368.net
    Kunjungi juga Bola368.org , Anda puas Kami pun senang.!

    BalasHapus
  2. sama-sama.......pasti saya kunjungin...........

    BalasHapus
  3. usul boss pke prefiu dong...hehe

    BalasHapus
  4. Mantaaap sob artikelnya, kereeen :)
    Ijin share http://apotekherbalkita.com/obat-tradisional-asma/
    http://apotekherbalkita.com/
    http://grosiracemaxstasik.com/
    http://pengobatanalamimustajab.com/

    BalasHapus
  5. Thanks atas infonya gan,, di tunggu info yang lainnya
    http://obatalami21.com/

    BalasHapus
  6. Nice artikelnya membantu banget gan :)
    http://kedaijellygamatgoldg.com/obat-herbal-asma/

    BalasHapus