Home » , » Cara Membuat atau Menambahkan 2 Kolom Dibawah Header

Cara Membuat atau Menambahkan 2 Kolom Dibawah Header


Sudah hampir satu bulan blog ini tidak di update dan sekarang mumpung lagi ada kesempatan jadinya saya duduk sejenak untuk berbagi informasi tetang cara membuat atau menambahkan 2 kolom di bawah header. Seblumnya Dapur Tutorial Blogspot Sudah Pernah Menyampaikan Tetang tutorial Cara Menambahkan Elemen Halaman Baru Dibawah Header Blog dan Cara Menambahkan Elemen Halaman Baru Di Atas Header Blog

Nah...Untuk menambahkan 2 kolom dibawah header tidak begitu sulit kita hanya memodifikasi sedikit dari kode tersebut.

Berikut langkah-langkah yang harus anda lakukan :
  1. Login menggunkan akun blog anda
  2. Setelah anda masuk ke Dashboard pilih Menu "Template"


  3. Klik  Tombol Edit HTML


  4. Klik Tombol Proceed atau Tombol Lanjutkan  kemudian akan muncul halaman Edit HTML seperti berikut


  5. Centang Expand Template Widget.


  6. Sebelum melakukan Edit HTML download lengkap template anda terlebih dahulu baca caranya Disini
  7. Sekarang Cari kode ]]></b:skin> (gunakan tombol CTRL + F3 u/ memudahkan pencarian kode) 
  8. Setelah ketemu Copas dan letakan kode berikut diatas kode ]]></b:skin>
  9. #box-kolom-widget { clear:both; } .box-widget { padding:0px 10px 10px 10px; border:1px dotted $bordercolor; }
  10. Sekaran Anda cari Kode <div id='main-wrapper'>   atau <div id="main-outer"> 
  11. Apabila sudah ketemu copas kode dibawah ini dan letakan diatas salah satu kode <div id='main-wrapper'>   atau <div id="main-outer">
  12. </div>
    <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;'/>
  13. Lankah terakhir klik Tombol Simpan Template


  14. Selesai dan lihat hasilnya
Untuk melihat hasilnya silahkan anda masuk pada halaman Tata Letak atau Layout  jika ada Elemen tambahan Diatas Header Seperti dibawah ini berarti lankah-langkah diatas sudah anda lakukan dengan benar


Demikian Tutorial Kali ini tetang Cara Membuat atau Menambahkan 2 Kolom Dibawah Header Semoga bisa bermanfaat

PENTING!!!
ANDA TIDAK BEKERJA? INGIN TAHU INFORMASI LOWONGAN KERJA TERBARU DI KOTA ANDA? KUNJUNGI LOWONGAN KERJA TERBARU DISINI
Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Delta Komputer

0 komentar:

Posting Komentar

 
Support : PING by :Ping-o-Matic | Pusat Promosi
Copyright © 2011. Tutorial dan Free Download - All Rights Reserved
Template Modify by Creating Website
Re Design by Bang Aris