earth

Guestbook

/* Iklan google ads */

Cara Menambahkan Kolom Baru Pada Halaman Blog

Kolom halaman dalam sebuah blog merupakan elemen penting yang berguna untuk menambahkan berbagai widget kedalam blog kita. Namun kadang template yang kita miliki kurang sesuai dengan apa yang kita inginkan. Ada kalanya kita ingin menambahkan widget di bagian tertentu tapi tidak tersedia kolom untuk itu. Jika demikian, tentu kita harus menambahkan kolom baru kedalam template blog tersebut.

Cara untuk menambahkan kolom baru tersebut sebenarnya tidak terlalu sulit. Kita tinggal menambahkan kode CSS kedalam template blog kita lalu memberikan perintah HTML pada body template tersebut. Berikut adalah langkah-langkah yang harus kamu lakukan:
  • Seperti biasa, Login ke blogger.
  • Dari dasbor klik Elemen Halaman dan pilih Edit HTML.
  • Lakukan duplikasi template untuk berjaga-jaga jika terjadi masalah.
  • Buatlah kode CSS di atas ]]></b:skin> seperti contoh berikut:
    /* Tambahan Dua Kolom */
    #tambah {  
    width:300px;   
    height:auto;  
    position: relative;  
    float: right;  
    margin: 5px 0 0 0;  
    padding: 0px;  
    font-size: 12px Arial, Helvetica, sans-serif;  
    }
    #kiri {  
    width: 150px;  
    float: left;  
    padding: 0 5px 0 5px;
    }
    #kanan {  
    width: 130px;  
    float: right;  
    padding: 0 5px 0 5px;  
    }
    
    Pada perintah tersebut, kolom ditempatkan di sebelah kanan dengan margin atas 5px (putaran jarum jam: atas, kanan, bawah, kiri) dan lebar kolom 300px, yang terbagi untuk kolom kiri 150px dan kanan 130px. Masing-masing kolom memiliki jarak dalam kolom (padding) kiri dan kanan 5px.
    Kamu dapat membuatnya sesuai dengan ukuran dan posisi yang kamu inginkan. Tapi jangan lupa, jika ukuran kolom utama 300px maka ukuran kolom-kolom lain ditambah margin kiri dan kanan tidak boleh melebihi 300px.
  • Setelah itu buatlah kode HTML yang diletakkan di antara <body> dan </body> (tergantung mau diletakkan dimana, di header, side, atau footer), misalnya seperti berikut:
    <div id='tambah'>
    <b:section class='tambah' id='kiri' showaddelement='yes'>
    </b:section>
    <b:section class='tambah' id='kanan' showaddelement='yes'>
    </b:section>
    </div>
    
  • Lakukan pratinjau, jika OK, simpan dan ucapkan alhamdulillah...

Contoh hasil yang bisa kamu lihat:
  • Tambahan 3 kolom di header dapat dilihat di blog ini (lihat jam, asmaulhusna, dan slide foto).
  • Tambahan 2 kolom di header dapat dilihat di blog ini (lihat slide foto dan logo).
  • Tambahan 1 kolom di atas footer dapat dilihat di blog ini (lihat banner sahabat).

Nah, segitu aja dulu coy... Selamat mencoba!!!
  • Artikel Terkait Dengan HTML Tutorials

    Terimakasih sudah membaca artikel SC Community's Blog

    28 komentar

    baca2 blog temen, lumayan dapat tambahan pengetahuan.

    29 Oktober 2009 pukul 06.17  

    canggih atikel ini memang mas blog saya miskin widget perlu tambah kolom tuh

    29 Oktober 2009 pukul 07.26  

    sorry kang kok pake mas maaf kelupaan tuh akang kasep

    29 Oktober 2009 pukul 07.27  

    Tah geuning,,,
    Duh, asa arisin keiu ieu teh nya. DIhuapan wak ku Kang Enes, hehehe
    Naha apak suara hatiku kang??qiqiq

    29 Oktober 2009 pukul 08.39  

    makasih atas tutorialnya sobat.

    29 Oktober 2009 pukul 10.14  

    salam sobat
    trms tipsnya,,
    sulit ngga ,,cocok ngga menambah kolom barunya,
    dihalaman blog seperti di blog saya itu,,,

    29 Oktober 2009 pukul 13.14  

    Tambah lagi nih pengetahuan saya, artikelnya selalu menarik untuk dicoba!

    29 Oktober 2009 pukul 20.19  

    Wah, info yang menarik. Kalau Lina ngga mau ganti template, tapi ingin ada perubahan dgn. nambah kolom, bisa pake cara ini ya...

    29 Oktober 2009 pukul 20.37  

    infonya bermanfaat banget sob, tapi bagaimana cara kalau yang di tambah itu adalah satu kolom di bottom, misalnya sekarang baru ada 3 kolom sementara kita ingin mebuat kolom satu lagi sehingga menjadi 4 kolom...??? thank's sebelumnya...keep blogging

    29 Oktober 2009 pukul 22.16  

    kalau sudah suka sama templatenya bisa di edit sendiri yah.
    makasih tutorialnya.

    29 Oktober 2009 pukul 23.23  

    Saya datang lagi kang enes template saya rusak tuh jd mesti ganti yang baru

    30 Oktober 2009 pukul 05.10  

    request lur...pangnyieunkeun 3 kolom di sidebar blog akuh....ihihihihihitapi dibawahnya (bkn di footer)..ohohohoo

    30 Oktober 2009 pukul 20.06  

    wah rame.. tulisannya keren bro.. sangat bermanfaat thx..

    31 Oktober 2009 pukul 00.40  

    siiiiiiiiiiiiiipppppp......bro,mau coba nih.miskin banget blog ane...trims info nya

    31 Oktober 2009 pukul 17.48  

    Selalu informatif, dengan deskripsi yang begitu benderang. Disajikan secara detail, namun dengan etika bahasa tertentu sehingga tidak terkesan menggurui.
    SC Communitys, tetaplah ikut serta dalam mencerdaskan kehidupan para blogger!

    NB: Kang enes, bissaa we, mere conto teh eung, qiqiqiq

    31 Oktober 2009 pukul 22.25  

    Oke siap guru..
    Masih belum jelas niy, penempatan script kedua yg diantara "body". saya mo nembah kolom header, jd script kedua tersebut percisnya ditempatkan di mana ya ru??
    Maksih, ditunggu responnya ok..Hatur nuhun sateuacana.

    2 November 2009 pukul 14.27  

    naghh ini yg ku cari cariii....


    tpi gmna caranya bisa kaya akang atau kaya blogculun di bawah header nya ada option option yg lain nya misal nya profil ataw home gitu gmna caranya kangg??....kasih tw donk

    2 November 2009 pukul 16.22  

    Ru, naha nya kolom teh sanes di kanan-kiri,,,tp di luhurna atuh???
    abdi aya nu lepat ngopy scriptna qtu nya???
    Punten ah dihuapan wae, hehehe

    2 November 2009 pukul 21.36  

    Assalamualaikum ka, mauw tanya piet uda coba pasang, tp ko belum bs di tambah widget yaa ka..??
    knapa tuch..??
    Kolomnya muncul, tp ga bs di tambah widget :(

    3 November 2009 pukul 04.22  

    Bagus bgt blognya....

    30 Januari 2010 pukul 04.32  

    aduh masih bingung.... kalau untuk nambahin di samping logo gimana caranya??? -_-

    10 April 2010 pukul 14.27  

    Wiiih,ini blog sangat hebat.banyak tutorial anda yang saya ikutin.

    7 Agustus 2012 pukul 21.39  

    Waw keren artikelnya saya sudah coba dan work ...
    Terimakasih atas ilmunya ...
    Mohon mampir yaah ..
    http://linkquitz.blogspot.com/

    14 Januari 2014 pukul 15.40  

    mas kok gak muncul ya ,,, naruhinnya yang di body iitu dimana tepatnya ya aku gak tau hehhee

    24 Agustus 2016 pukul 10.42  

    Tambahkan Komentar

    • Dimohon untuk tidak mencantumkan link aktif pada komentar sobat.
    • Gunakan Ruang Tanya pada TabView Menu, jika ingin menanyakan sesuatu yang tidak ada kaitannya dengan artikel di atas.
    Kang eNeS

    Terimakasih atas semua apresiasi yang sobat berikan.

    10 Artikel Terbaru

    10 Artikel Terpopuler