Tips dan Trik Blogger

Membuat Kolom Widget dengan Table

Sudah gak Asing lagi dengan  3 kolom pada footer, 2 kolom, bahkan 4 kolom, tentunya dengan tips yang beragam pula, Banyak jalan menuju Indonesia, banyak jalan pula untuk membuat kolom pada widget, salah satunya dengan memanfaatkan table yang pembahasannya sudah di singgung pada artikel HTML untuk Table

Seperti biasa saya hanya mengembangkan konsep dasar, untuk itulah mengapa saya sering memposting artikel yang sedikit aneh bahkan beda dari blogger blogger lainnya, karena saya hanya belajar bagaimana menemukan mencari sesuatu yang baru berdasarkan konsep yang sederhana alias konep dasar.

Masih ingat kan dengan pembahasan table, baik saya agak simpel saja sekarang,
 Konsep dasar:

<table border="1">
<tr><td>Kolom ke 1</td><td>Kolom Ke 2</td><td>Kolom ke 3</td></tr>
</table>

Hasilnya:

Kolom ke 1Kolom Ke 2Kolom ke 3

Berdasarkan konsep tadi mari kita aplikasikan ke dalam template blogger kita, di sini saya aplikasikan untuk membagi Header menjadi beberapa kolom?

Membuat Header Menjadi Tiga Kolom

Berikut contoh kodenya:

<table><tr><td><b:section class='header' id='header' maxwidgets='1' showaddelement='no'> <b:widget id='Header1' locked='true' title='Dunia Blogger (Header)' type='Header'/> </b:section></td><td><b:section class='header' id='heade2' preferred='yes'> </b:section> </td><td><b:section class='header' id='heade3' preferred='yes'> </b:section> </td></tr></table>


Silahkan Pelajari sendiri yah, sesuaikan blok warna pada kode di bawah sesuai kode paling atas. besar kemungkinan penjelasannya kan ada pada kotak komentar jadi berkomentar yah:)




Berikut Tampilan Layout yang akan Blogger Tampilkan:


Sedangkan Hasil pada Blognya kurang lebih pada gaambar di bawah ini:








Masing Masing Panah menunjukan Kolom,


Untuk modifikasi ukuran, warna, border, dan lainnya saya sarankan membaca artikel HTML untuk Table , dan Silahkan berexperiment dan jangan takut mencoba.
22 Komentar untuk "Membuat Kolom Widget dengan Table"

Yes dapet pertamax nih. Sip tuh tipsnya. kucari-cari. Punya blog yang keren.. pamerin di blogku ya http://pamerblogger.blogspot.com

thx mas infonya. tapi aku masi binun niy. ribet ah (meribetkan diri) maaf gi capek soalnya

Wah... ternyata bisa pake tabel juga ya... hhmm... mungkin kapan2 bisa anni3 coba...

tips yg kerennn... memanfaatkan ruang header yang kosong :)

Akhirnya NEmu juga cara tentang buat Header
Pinter @_@
dari mana tho belajar bahasa pemrograman itu
aku ko nda isa2

sip deh!dapet ilmu sekalian numpang nampang!he!dapat liat budaya Indonesi
cultural-corner.blgspot.com

Wah.. saya sudah dari lama mencari tutorial ini.. ternyata justru ketemunya baru sekarang, dari kawan pula.. hehehe

tips nya asik om.makasih ya

SAYA BELUM BISA PASANG MAS GMN CARANYA MASANGNY SEBELAH MANA? :(

http://motivasi-arif.blogspot.com

mas say ko belum bisa si pasang tabel di blog gimn cara nya gimn

http://soswet.blogpsot.com

@Semua: Terima kasih banyak atas kunjungan dan komentarnya.

@Motivasi dan Inspirasi Sukses: Pastikan Template yang di gunakan adalah template BEta (XML) dan kode di atas pasti berbeda untuk masing masing blog, Intinnya mas cari kode bertipe "Header" kemudaian silahkan modifikasi menggunakat kode Tabel.

@Adi: Mungkin perlu di pelajari lagi artikel saya yang ini [HTML untuk Table]

waduh .... baru tau caranya kayak gitu. ternyata gampang ya mas ... ! Oke bwt tutornya !

kodenya dimasukin dimana mas???
di Edit HTML atau ditambahkan pada elemen halam???
tolong balesanya
http://aquatic42.blogspot.com

@Muhamad Fauzi Ridwan: Pasang di Edit HTML Mas

tipsnya keren.. tp masih bingung gimana cara menggunakannya.. hiks

mksh ya atas ilmu nya mo saya coba, doa'n berhasil

yach ni edit html pasangnya bagaimana yang jelas dunk!!!!
biar bisa josssss blognya

http://smuhut.blogspot.com/
http://autocad-desain.blogspot.com/

bos gimana sih naikin pager rank

kunjungi blog saya ya,,,
saya baru buat blog nih,,,
http://www.artablog.co.cc/
klo ada yg kurang komen2 ya...

Terima Kasih telah Mengunjungi Blog ini dan Silahkan tinggalkan Komentar Anda...

Back To Top