[Tips] Membuat Tampilan Daftar Posting Multi-Kolom
Sebetulnya tips ini dijadwalkan untuk minggu depan, tapi berhubung ada seseorang yg udah gak sabaran :) akhirnya saya putuskan untuk mempulikasikannya sekarang. Dan seseorang yg saya maksud adalah rekan radeondt yg menanyakan di halaman Konsultasi Wordpress sbb:
kang cosa, kalo mau nampilin halaman depan di wordpress tapi 2-3 kolom gitu bisa gak mas, yah kaya di joomla lah.
The Plan
Sebelum membuat tampilan daftar posting yg multi-kolom di Wordpress, sebelumnya perlu kita rancang terlebih dahulu layout tabelnya. Untuk memudahkan pemahaman, saya akan menggunakan tag HTML TABLE standard. Untuk 2 kolom misalnya:
[html]
[/html]
Sekarang mari kita pilah satu-persatu.
Baris ke-1 adalah pembuka tabel dan ini akan diletakkan sebelum looping posting (while). Pasangannya, baris 10, adalah penutup tabel yg akan kita letakkan sesudah looping posting (endwhile).
Baris ke-2 adalah tag HTML untuk membuat baris di dalam tabel. Tag ini akan kita letakkan setiap ada pergantian baris. Karena pada contoh ini kita membuat tabel dengan 2 kolom, maka pergantian baris akan terjadi pada postingan pertama atau sebelum postingan bernomor ganjil ditampilkan.
Baris ke-3 dan ke-6 adalah tag HTML untuk membuat cell baru di dalam tabel dan ini akan kita letakkan sebelum content posting ditampilkan, untuk seluruh postingan.
Baris ke-4 dan ke-7 adalah tempat dimana nanti kita meletakkan content posting itu sendiri, termasuk judul dan meta info jika disertakan.
Baris ke-5 dan ke-8 adalah pasangan dari baris ke-3 dan ke-6. Tag HTML ini digunakan untuk menutup cell di dalam tabel dan tentunya akan diletakkan sesudah content posting, pada baris 4 dan 7, ditampilkan.
Terakhir, baris ke-9 adalah tag HTML yg berfungsi sebagai penutup baris. Tag ini akan kita pakai setelah postingan bernomor genap.
The Code
Nah, biar gak bingung, mari sekarang langsung kita praktekkan. Seperti biasa, untuk memudahkan, saya akan menggunakan theme Wordpress Default dan template Main Index.
[php]
|
” rel=”bookmark” title=”Permanent Link to “>
|
Akan segera dicoba, dan pasti bermanfaat. Thx Mas. Makin Ma’nyusss aja nih tips2 nya, ampe kenyang nih otak ;)
makasiiiihhhhhh …. bosss .. :),waduh sip banget neh toop abissss saya bukannya gak sabaran boss cuma penasaran banget :)
oh ya satu lagee yang halaman itu boss 1 2 3 4 matur nuwun bosss …
makin handal aja om kita yg satu ini…
ck..ck..ck.. * nyembah2 *
satu lagi mas Cosa, Jasmine juga dah ng sabar dulu :D hehe sempet SMS mas Cosa segala dulu :D makasih nih mas Cosa
ada contoh web nya yg da jadi gak ?
penasaran maksudnya Tampilan Daftar Posting Multi-Kolom….
lha yg di halaman depan blog ini apa? :)
iya betul mas cosa ada contoh yang udah diaplikasikan belum ya biar tahu maksud multi kolom ini…
chatca
Intinya dari multikolom itu sendiri adalah permainan tabel dan dikombinasikan dengan CSS penggunaan DIV.
hmmm
wah makasih atas tips2nya mungkin nanti saya akan buat template wordpress sendiri
Gak bagus2 amat, tapi bersaing lah dengan blog ini :)
Test dulu ah.. ilmu baru nih buatku… Trims mas.
Juga atas info tentang syntax hilite nya. Sekarang jadi bisa posting code dengan gampang. :)
sebenarnya ada banyak trik untuk multi kolom,, aku dulu sempat nampilin berdasarakan kategori, ato juga bisa menggunakan customize listing, gitu loh. kelemahan teknik multi kolom adalah apabila aaa plugin yang ikut makek halaman index.php ato halaman utama themes ini, tampilannya akan kacau :D berdasarkan pengalaman pribadi sih.
mas cos…
klo di IE, tampilannya tetep 1 kolom, kolom sebelahnya kosong :D
untuk kode di atas ato untuk blog ini?
kalo untuk kode di atas, sesuaikan aja setting width-nya ama css-nya post + entry. Biasanya IE gak bisa dibikin ngepas ukuran pixelnya, harus dikurangin dikit. Misal kalo lebar tabel total 500, masing2 kolom jangan 250 (krn 250×2=500), tapi dikurangin dikit, 245 misalnya.
kalo untuk blog ini, aku test di IE7 udah 2 kolom kok munculnya.
untuk blog ini…daku liatnya pake IE 6 sih.
http://extremetracking.com/open;sys?login=cosacom
urutan pertama firefox ama IE 6 :D
duh jaman modern gini masih pada pake IE yah :D
yg gak keluar itu 2 kolom yg di halaman depan ato sidebar di kanan?
yang halaman depan.
hehehe…sebagai publisher kan musti survey anything about visitor, including what browser they used to.
hahahaha mas cosa iks bisa ajah, IE gmn juga ciptaannya om bill low, ato paling ngga pegawenya deh heiheiehie
gile si om rambutnya waktu kecil..ahmad albar jg minder kali tuh…huhuhuhu… :P
mana nih hasil interview-nya juragan photo :D
Gak online sehari aja ketinggalan tips terbaru dari mas Cosa. hehehehe :)
Bolak-balik halaman dech…
BTW, ini tips sangat bernilai.
Coba ahh…
Thanks mas Cosa.
ohw
multi kolom maksud e yg kaya blog kamu ini ya cos.. hehe
sip sip… boleh di coba buat variasi nanti neh hehehe
wordpress emang enak banget di customize, asal kita dah biasa dengan php aja, belajar dikit2 juga lama-lama juga pasti bisa… dan lagi wordpress banyak banget plugin dan theme yang mendukung untuk me-monetize blog kita..
ngomong-ngomong kok theme-nya ngga dipublikasiin neh??
kang gimana nampilin halaman 1..2..3..4..5 dll gitu kang :)
cuma itu aja yang kurang (untuk sementara hihi, ntar konsultasi lageee)
sori kang aku belum baca yang kemaren … iya WP-PageNavi udah saya download dan emang bener bisa :)
Thanks kang cosa …. (My Wordpress Teacher for better future) :)
padahal barusan mo aku omelin krn gak nyimak :D
Wah … dah lama tau om Cosa, tapi baru tau rumah mayanya disini. Keren abis theme ama isinya. Berbobot banget! Thanks buat sharing infonya. Join reader commnya ya …
*promosi*
jangan lupa dibookmark dan sering2 mampir ke sini ya. Ikuti pula kontes2 yg ada :D
Kalo bisa sich semua plugins di luar sana disedot kesini trus kita2 tinggal pake aja setelah di-review dan di-uji ama Om Cosa…
Setuju ngga temen2…. (Provokator mode=”on”)
:D
Khan link2nya sudah disediakan semua Mba Angel. Btw, Kalo mau ikut CFC, daftarnya via mana yah.? ;)
Masih kurang banyak atuh…….
Kalo masalah CFC itu, daftarnya langsung ke Om Cosa aja, jangan di-klik link-nya! :P
Lagian gw juga bingung mo pake nama apa….
Itu sebagai rasa salut gw aja ke Om Cosa… biar besok2 dia mendirikan CFC (California Fried Chicken) :D
mbak Angel ini selalu merendah, padahal jauh lebih jago dari aku kalo soal AdSense. My teacher :)
mbak angel guru kang cosa ???????
gak salah tulis tuh hihihihihi …..
kang cosa udah jadi punya saya … :D walau masih jauh dari baik tapi ya sudah berusaha :) matur nuwun sak kabeh e
untuk content masih asal comotz aja ha ha ha ha …. coz belum belajar writting & composing lagi perjalanan belajar bahasa inggris biar pendapatan bisa meningkat :)
http://www.great-vacation.net
weh keren, jadi 4 kolom :D
makasih boss, klo untuk ubah-ubah template dan CSS udah sedikit bisa boss,cuma untuk unik content itu bosss yang masih sangat minim ilmunya … wahh harus banyak belajar neeh,bos minta petunjuk kalo situs kaya punya saya itu biar mudah bikin unik kontenya gimana kira-kira caranya? apa yang perlu dibahas lebih detil tapi wiritingnya gak terlalu susah :)
matur nuwun kang cosa Gusti Alloh sing Mbales :D
mas radeondt, situsku yang 4 kolom tak coba bikin dirumah malah dadi error.sesuk ajar maneh yo…
woke brooo…
aku yo mung sinau seko kang cosa :D
Allow radeondt,
mo tanya nih klau theme Mas itu bagian apa & bagaimana yang di edit biar bisa jadi 2 kolom untuk post nya (total 4 kolom),
Kalo ga salah itu theme defaultnya kan cuma 3 kolom kan?
Om Cosa caranya bikin layout kaya’ Blog sampeyan ini gimana sih? 1 posting diatas, trus 2 kolom di bawahnya.
Kode tabelnya mesti diletakkan di mana? aku coba bikin di Gadget World, sudah berhasil jadi 2 kolom, tapi pinginnya untuk posting teratas tetep 1 kolom aja. Mesti ditambah perintah apa ya supaya posting teratas gak masuk dalam format tabel?
Trima kasih banyak sebelumnya.
Logika urutan post indexnya (variabel $ctr kalo contoh di atas) spt ini:
[code]1
2 3
4 5
6 7[/code]
nah udah, tinggal mainan di pengecekan $ctr aja.
[code]jika $ctr = 1, maka {
tampilkan post dengan model 1 kolom
} jika tidak, maka {
tampilkan post dengan model 2 kolom
jika $ctr = ganjil, maka {
ganti baris
}
}[/code]
kira2 pseudo-code-nya spt itu :)
Waduh mas cosa.. aku belum berhasil juga menerapkan counternya, dasar beginner he he :) … mungkin salah posisinya dalam Loop.
Akhirnya sekarang nyerah dulu deh… pake 4 kolom aja. Nanti kalo udah nemu codenya…mungkin akan dicoba lagi. Trims informasinya
pake for boss untuk loopingnya
thanks…:)
sedang dicoba mas budi :D
ampe skrg tetep blum bisa. terkadang error neh…
Om cos,
ini apa ini semua syntax nya di copy ke file index.php nya?
atau gimana?
terus isi index.php yg lama gimana?
maap kalo misunderstanding..:-)
New bie
Kayak nggak deh, ng bisa. kalo ng salah mas cosa pake table. (betul ng sih) kemarin dah nyoba pake itu (copas) tapi errorejing, yg dikasih mas cosa itu mentahnya, nah tinggal dimatengin aja :D terserah mo dimatengin pake apa..
betul. Contoh di atas adalah untuk theme Default WP, jadi kalo pk theme lain juga masih butuh penyesuaian lagi. Intinya, mas ryco ngerubah bagian dari index.php (jadi bukan dikosongin index.php-nya trus co-pas kode di atas semuanya) mulai dari yg if (have_post) itu, dan tinggal disesuaikan dng conth di atas. Dicoba2 aja dulu mas ryco :)
coba tanya sama Bung Radeondt, dia udah bisa tuh. Dengan penuh perjuaaaangaan dia akhirnya bisa. Dan hasilnya bagus :)
(yah GEER dah si radeondt)
* eh koe kok jarang OL to deont?
I think, that is interesting for all.
Salam bapak pengasuh wordpress.
Saya sudah Instal wordpress dari cpanel [fantastico] sudah bisa jalan dan oke. tapi ketika saya ganti template yang tiga kolom ternyata pengaturan widgetnya tidak ada, jadi situs itu tidak bisa saya rubah dan edit. beberapa plugin juga sudah saya upload sesaui perintah yang ada di redme.txt, lalu dimana widgetnya yang biasanya kalau di wordpress gratisan itu nampak…??
sangat minta pencerahannya.
Makasih
mungkin templatenya ga ngedukung dinamic sidebar.. jadi ga bs masang widget..
klo aku sih ga suka pk widget2an, lebih baik lgsng edit di templatenya langsung..
bejat ni otak..
dr jam 1 ampe subuh belum mudheng2 neh untuk bagian paling atas di buat 1 kolom :(
hasil sementara http://alixwijaya.com/wpdemo/
waks, lha itu sudah bisa kok mas. menurutku sih sudah berhasil, memang apanya yang kurang mas?
yang bagian atas belum satu kolom, khan aLe pengen juga kaya punya oM Cosa :D
kurang dimananya ya oM kira2..?
logika aLe sementara masih mentok neh!
wah kalau sudah soal tanya caranya, biar yang lebih berwenang yang menjawab. soalnya aku juga gak bisa :) yang penting semangat dech!
iya, makasih semangat nya ;)
btw, yg bewenang kok blm berkenan menjawab yah :D
asik asik,, aku uda berhasil menjalankan tips ini ;) cheks this out http://alixwijaya.com :mrgreen:
hmm… maybe Om aLe could have some more look at the css script for Om Cosa’s theme:
.post {
margin:10px 10px 10px 20px;
padding:0;
display:block;
}
.postmini {
margin:10px 0 10px 20px;
padding:0;
display:block;
float:left;
width:250px;
.post for one column mode, and .postmini for two column mode…
hmmm… :-/
Hi indonesia. saya ada buat cebisan ini. lihat di
http://www.blogohblog.com/the-loop-and-multi-column/
sekadar berkongsi. salam dari malaysia. :)
mas saya boleh copykan heheheheheheheheheheeh