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:
Contoh hasil yang bisa kamu lihat:
Nah, segitu aja dulu coy... Selamat mencoba!!!
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. - 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.
- 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!!!
28 komentarPosting Komentar
baca2 blog temen, lumayan dapat tambahan pengetahuan.
canggih atikel ini memang mas blog saya miskin widget perlu tambah kolom tuh
sorry kang kok pake mas maaf kelupaan tuh akang kasep
Tah geuning,,,
Duh, asa arisin keiu ieu teh nya. DIhuapan wak ku Kang Enes, hehehe
Naha apak suara hatiku kang??qiqiq
makasih atas tutorialnya sobat.
salam sobat
trms tipsnya,,
sulit ngga ,,cocok ngga menambah kolom barunya,
dihalaman blog seperti di blog saya itu,,,
Tambah lagi nih pengetahuan saya, artikelnya selalu menarik untuk dicoba!
Wah, info yang menarik. Kalau Lina ngga mau ganti template, tapi ingin ada perubahan dgn. nambah kolom, bisa pake cara ini ya...
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
kalau sudah suka sama templatenya bisa di edit sendiri yah.
makasih tutorialnya.
@Rep Semua:
Thanks atas komentarnya.
@Rep Hadi:
Kalo ingin menambahkan kolom yang sudah ada seperti itu, sobat tinggal mengubah besar kolomnya saja, baru tambahin kode CSS untuk kolom ke4 di bawah kode CSS 3 kolom itu. Samakan kode-kodenya dgn yg tiga itu. Sobat hanya perlu mengubah widht-nya (bisa juga dg margin jk sobat ingin mengatur jarak antara stu kolom dg kolom lain).
Setelah itu tambahkan kode HTML dibawah kode HTML 3 kolom tadi, dengan class-nya sama tp id-nya disesuaikan dg CSS yg sobat bikin.
Saya datang lagi kang enes template saya rusak tuh jd mesti ganti yang baru
request lur...pangnyieunkeun 3 kolom di sidebar blog akuh....ihihihihihitapi dibawahnya (bkn di footer)..ohohohoo
wah rame.. tulisannya keren bro.. sangat bermanfaat thx..
siiiiiiiiiiiiiipppppp......bro,mau coba nih.miskin banget blog ane...trims info nya
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
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.
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
@Rep Insan:
Kalo mau di bawah header, ya taro aja di bawah <div id='header'> atawa <div id='header-wraper'> sob...
@Rep dasetia:
Itu mah bukan kolom tambahan sob, tapi navbar menu.
Kalo sobat mau, coba baca cara membuat navbar menu di blog ini.
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
@Rep Insan:
Perlu sobat ketahui bahwa stiap template memiliki perbedaan. Kadang untuk Titlenya menggunakan ukuran lebar penuh. Untuk itu perlu dikurangi sehingga penambahan bisa berjalan dg baik.
Selain itu margin pada kolom tambahan juga harus diatur disesuaikan dgn template.
Tulisan saya di atas cuma contoh untuk menambahkan kolom, bukan bisa langsung pakai (coba baca ulang). Hal lain-lainnya silahkan atur sendiri sesuai dg template sobat, seperti pengaturan margin, width, dll.
Oya, margin juga bisa menggunakan minus (-) jika ternyata kolom tambahan tergeser oleh kolom widget di atasnya.
Ok, sob, selamat utak-atik...
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 :(
@Rep Piet:
Wa'alaikum salam...
Wah, masa mbak? Coba mbak ubah pada showaddelement-nya menjadi "yes", bukan "no" mungkin bisa.
Bagus bgt blognya....
aduh masih bingung.... kalau untuk nambahin di samping logo gimana caranya??? -_-
Wiiih,ini blog sangat hebat.banyak tutorial anda yang saya ikutin.
Waw keren artikelnya saya sudah coba dan work ...
Terimakasih atas ilmunya ...
Mohon mampir yaah ..
http://linkquitz.blogspot.com/
mas kok gak muncul ya ,,, naruhinnya yang di body iitu dimana tepatnya ya aku gak tau hehhee
Tambahkan Komentar
Terimakasih atas semua apresiasi yang sobat berikan.