Jumat, 25 Juni 2010

Menambah Dua Sampai Tiga Kolom Di Bawah Header


Ilustration By:Bahtiar.AS
Selamat pagi Sahabat Blogger yang Setia,Apa kabar Nie..Pasti Baek-baek Saja. Kali ini KangTiar akan Mengula Tentang Tutorial Blog/Blogspot Lagi. Judul Kali ini Adalah Cara Menambah Dua Sampai Tiga Kolom Di Bawah Header Blog. Kolom-kolom ini akan sangat berguna Untuk Pasang Iklan,Pasang Proil,Pasang Follow,Buku tamu(Baca: Shoutmix Premium Gratis, CBOX),Anda Bisa pasang apa saja Di Kolom-kolom itu .Kalau Dikolom itu Saya pasang Kotak Follow,Buku Tamu (CBOX),Kotak Profil. Apakah anda Berminat Menambahkan Kolomnya Ke dalam Blog Anda?.Bagi yang Berminat ya...langsung saja Berangkat.....
 
1. Login Ke Blogger.com
2. Kemudian Masuk Ke Tab Tata Letak/Rancangan
3. Dan Masuk lagi ke Edit HTML
4. Centang Expand Widget
5. Copas kode berikut diatas kode ]]></b:skin>

#box-main-container {
clear:both;
}
.box-column {
padding:0px 10px 10px 10px;
border:1px dotted $bordercolor;
}

  • Bagi anda yang ingin Memasang 2 Kolom Dibawah Header Silahkan Copas kode berikut diatas kode <div id='main-wrapper'>

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

  • Bagi anda yang ingin Memasang 3 Kolom Dibawah Header Silahkan Copas kode berikut diatas kode <div id='main-wrapper'>

    <div id='box-main-container'>
    <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;'/>
    </div>

Dan yang Terakhir jangan Lupa Disimpan

HASIL DARI 3 KOLOM
3 Kolom Di blog KangTiar

Semoga Artikel  Tutorial Cara Menambah Dua Sampai Tiga Kolom Di Bawah Header Di blog Dapat Bermanfaat Bagi Kita Semua.[KangTiar]

15 komentar:

  1. sangat bermanfaat
    makasih tutorialnya.

    BalasHapus
  2. oh begono cranya bikin 3 kolom langsung di bwh header

    BalasHapus
  3. congcot juga agak susah nich bikin kotak pake css trus pake div lagi
    makasich infonya
    salam kenal
    congcot

    BalasHapus
  4. artikel bagus untuk nambah Kotak tapi gak berat gak?

    BalasHapus
  5. seip dah , tak simpen ,, siapa tau butuh di lain waktu

    BalasHapus
  6. Seep banget triknya kang... keep blogging!

    BalasHapus
  7. bagus ni? tp kok ip adress di sm bersamaku di banned ya bs bntuin ga ni?

    BalasHapus
  8. Sip kang.., ane bookmark ne artikel yach.. ? :)) sukses kang.., salam kenal

    BalasHapus
  9. klo mau menambahkan kolom sponsor gmn ya

    BalasHapus