Cara menembahkan tiga kolom elemen halaman dibawah header


untuk menambah kolom dibawah header kamu bisa ikuti langkah langka brikut ini ok langsung saja h3llb0y berikan sdikit tips nya :

  • login ke akun bloger kamu udah pada tau kana.
  • di dasbor kamu klik RANCANGAN
  • selanjut nya kamu pilih EDIT HTML
  • sebelum kamu lanjut kan pengeditan klik download template lengkap simpan di destop biar enak nyarinya[tujuanya kalau terjadi kesalahan tinggal upload lagi.
  • ok selanjut nya Cari kode berikut ]]></b:skin>
  • dan pastekan code di bawah ini tepat di atas nya

  • #box-main-container {
    clear:both;
    }
    .box-column {
    padding:0px 10px 10px 10px;
    border:1px dashed #004400;
    }

  • Kemudian cari kode <div id='main-wrapper'>
  • setelah dapat letakkan kode beikut diatasnya <div id='main-wrapper'> ( dibawah ini code untuk dua kolom)

  • <div id='box-main-container'>
    <div id='box1' style='width: 50%; float: left; margin:0; text-align: left;'>
    <b:section class='box-column' id='col1' preferred='yes' style='float:left;'/>
    </div>
    <div id='box2' style='width: 50%; float: right; margin:0; text-align: left;'>
    <b:section class='box-column' id='col2' preferred='yes' style='float:right;'/>
    </div>
    <div style='clear:both;'/>
    </div>
  • Jika ingin tiga kolom gunakan code dibawah ini:


  • <div id='box-main-container'></div>
    <div id='box1' style='width: 30%; float: left; margin:0; text-align: left;'>
    <b:section class='box-column' id='col1' preferred='yes' style='float:left;'/>
    </div>
    <div id='box2' style='width: 40%; float: left; margin:0; text-align: left;'>
    <b:section class='box-column' id='col2' preferred='yes' style='float:left;'/>
    </div>
    <div id='box3' style='width: 30%; float: right; margin:0; text-align: left;'>
    <b:section class='box-column' id='col3' preferred='yes' style='float:right;'/>
    </div>
    <div style='clear:both;'/>


  • Simpan template dan lihat hasilnya dibagian elemen halaman, jika berhasil kamu akan melihat seperti gambar dibwawah ini:



    selamat mencoba klik like sbelum meninggal kan halaman ini tanks.
  • Posting Komentar

    0 Komentar