Menjajal Desain Wordpress dengan Web Developer

March 4, 2008 – 10:08 am by Dani Iswara

Secara bukan desainer web, tulisan ini diperuntukkan hanya bagi awam atau pemula Wordpress berbayar yang ingin menjajal ‘ngoprek’ desain Wordpress. :) Para desainer web dan pengguna yang telah berpengalaman tentu diwajibkan diharapkan ikut memberikan masukannya! :)

Saat mencoba mengubah tampilan blog Wordpress berbayar ini pertama kali, saya sempat mencobanya di komputer jinjing sendiri yang juga difungsikan sebagai peladen (server) dengan sistem operasi Slackware Linux 12. Dibantu dengan peramban Firefox plus ekstensi (wajib) Web Developer-nya, terjadilah beberapa perubahan secara luar jaringan (offline; jika ada daring berarti nanti ada luring kan..[??]) di localhost.

Walaupun terasa sudah pas menurut pandangan pribadi, secara memang bukan desainer web yang bekerja dengan aturan dan perencanaan konsep yang matang..akhirnya terjadi juga bongkar pasang tema, widget, templat, hingga CSS. :)

Screenshot of web developer extension on my Firefox

Beberapa langkah ada yang dapat dicoba tanpa terhubung dengan jaringan dan ada yang harus terkoneksi Internet. Setidaknya ekstensi ‘Web Developer’ masih mau membantu dengan setia, misalnya:

  1. Pada menu ‘CSS’, kita dapat mengedit CSS utama atau menurut ‘media type’-nya: ‘handheld’, ‘print’.
  2. Di menu ‘Images’, kita bisa melihat ukuran / dimensi gambar yang digunakan. Lumayan membantu untuk melengkapi atribut alt="...", width="..." serta height="...". Atau mencoba tampilan blog tanpa gambar. Terutama demi menghindari tumpang tindih gambar latar dan teks. Misalnya pada kejadian saat gambar latar tidak ditampilkan (tidak terunggah [upload] sempurna karena lambatnya koneksi, atau sengaja di-disable images), teks menjadi tidak nampak karena warnanya sama dengan warna latar tanpa gambar.
  3. Menu ‘Information’, membantu untuk menampilkan informasi-informasi penting, seperti mana bagian / blok id, div, class. Bahkan objek, javascript, warna yang digunakan, info atribut lainnya dapat kita periksa.
  4. Pada ‘Miscellaneous’, diantaranya bisa membantu mengedit HTML dan melihat tampilan small screen rendering (untuk menguji tampilannya di perangkat mobil..seberapa efektif ya..[?]).
  5. Menu ‘Resize’ bisa kita tambahkan resolusi lain yang ingin dicoba selain (umumnya) 1024×768. Bagaimana tampilan blog kita dengan resolusi 640×480, 800×600 atau mungkin pada layar yang lebih lebar / wide screen (1600×900; 3840×2400)?
  6. Berikutnya menu ‘Tools’ yang memuat beberapa perangkat, seperti validasi CSS, Feed, HTML, Links, WAI, cek Speed Report. Bisa juga ditambahkan validasi X/HTML dari Validome.org dengan menambahkan http://www.validome.org/validate?verbose=1&uri= pada baris URL-nya.

Setelah dicoba melihat tampilannya / perubahannya dengan ekstensi tersebut, baru kode-kode yang berkenan disalin ke CSS atau templat blog. Jadi kita tidak perlu menghabiskan jatah lebar pita, biaya dan waktu koneksi untuk mengedit blog. :) Sedikit banyak, dengan Wordpress + ‘Web Developer’ juga dapat membantu mewujudkan desain blog yang lebih ramah pengguna, peramban dan mesin pencari tapi masih mengadopsi standar web.

Selamat mencoba..

Blog ini hanya sempat saya coba dengan peramban Konqueror, Firefox, Opera dan Netscape versi Linux (belum terinstalasikan IEs4Linux). Belum sempat saya coba dengan peramban berbasis Windows (Internet Explorer, Maxthon) atau MacOS (Camino, Safari), apalagi dengan peramban mobil pocketIE, Opera Mini, Blazer, Minimo atau Blackberry Browser..belum sempat juga mencoba browser emulator online..jadi mohon masukannya..makasi :)

Share :
  • Digg
  • del.icio.us
  • Facebook
  • Google
  • Live
  • Technorati
  • YahooMyWeb
  • Furl
  • Ma.gnolia
  • NewsVine
  • StumbleUpon
Cite - Menjajal Desain Wordpress dengan Web Developer!
- Dani Iswara - Indonesia.

Last updated: Friday, May 16, 2008 at 7:54 am

posted in Blog Tips, Firefox, SEO, Web Design, Web Standard, WordPress
Subscribe Post / Comments | Trackback URL of this post
You are free to share (copy, distribute and transmit) this blog post under the similar license (Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Unported; CCA-NC-ND 3.0 Unported). Please put these link on your copy:
Taken from: Menjajal Desain Wordpress dengan Web Developer by Dani Iswara (Dani Iswara .Net).

Related posts:

Top
Previous: Medical Blogger can help Patients on the Net
Next: Memilih Slackware, atur MMC - SD Card, Upgrade Kernel

20 Responses (0 Trackback/s) to “Menjajal Desain Wordpress dengan Web Developer”

1. By mk on Mar 4, 2008 at 12:57:45
Using Mozilla Firefox Mozilla Firefox 2.0.0.12 on Windows Windows XP

Akhirnya pake hosting sendiri pak dokter.. Selamat.. Desainnya simple dan menarik, cuma pada H1-nya fontnya kurang menarik..

2. By Dani Iswara on Mar 4, 2008 at 13:02:59
Using Mozilla Firefox Mozilla Firefox 2.0.0.12 on Linux Linux

mk:
makasi,
iya polos, abis gak bs bikin yg laen :) h1 smntr ini masi pake pilihan verdana,arial, sans-serif..apalg ya huruf yg umum/tampil aman segolongan sans-serif?

3. By Berit on Mar 4, 2008 at 15:04:03
Using Internet Explorer Internet Explorer 7.0 on Windows Windows Vista

Beh…kasian nasib para IT engineer…
Lahannya mau diambil sama Pak Dokter ini..

Kenken khabare Dan…mantap buanget..Dokter Spesialis yang pakar IT…salute

4. By Dani Iswara on Mar 4, 2008 at 15:31:22
Using Mozilla Firefox Mozilla Firefox 2.0.0.12 on Linux Linux

Berit:
wuih..uli Batam (nu di Batam?)
sing keto..bisa kene (biar) bedik2 kan krn banyak org IT yg mau berbagi informasi..sing keto Rit.. :) kabar kabur de..

5. By Deddy on Mar 4, 2008 at 15:33:25
Using Mozilla Firefox Mozilla Firefox 2.0.0.12 on Windows Windows XP

Ada satu lagi yang perlu diperhatikan, resolusi layar… Jangan sampe kayak designku yang sekarang, sudah terlanjur terlalu lebar untuk screen 1024 x sekian sekian. Mau ngerombak… ga sempet dah…

6. By zulharman on Mar 4, 2008 at 18:03:10
Using Mozilla Firefox Mozilla Firefox 1.5.0.6 on Windows Windows XP

Sip mas blognya, tinggal tambah plugin biar tambah fungsional khan udah host sendiri. Mas Dani tinggalnya di Yogya ? Ntar klo benar di yogya saya ingin kopdar deh

7. By dani on Mar 4, 2008 at 18:15:01
Using Mozilla Firefox Mozilla Firefox 2.0.0.12 on Linux Linux

Deddy:
gemana kl width-nya dibuat persen aja.. :)
Zulharman:
makasi, maklum..pemula nih.. :) Iya mas, masi di Yogya..ok saya tunggu..

8. By ekads on Mar 4, 2008 at 20:51:31
Using Mozilla Firefox Mozilla Firefox 2.0.0.9 on Windows Windows XP

wah tiyang sing ngerti puk…
maklum mare melajah….

9. By dani on Mar 4, 2008 at 21:26:53
Using Konqueror Konqueror 3.5 on Linux Linux

ekads:
sesama pemula..sama 2 mlajah.. :)

10. By Yusuf Alam on Mar 4, 2008 at 22:16:16
Using Mozilla Firefox Mozilla Firefox 2.0.0.11 on Windows Windows XP

wah mas Dokter Dani… nih bisa fasih sama bahasa prokem kompi, blogging, ato apa entah namanya… nyebut saja kagak bisa…
he he he
salut deh

11. By devari on Mar 4, 2008 at 22:31:25
Using Mozilla Firefox Mozilla Firefox 2.0.0.12 on Windows Windows XP

sing ngerti bli Dani, secara install biar muncul OS dan browser/bendera di koment, masih lom sukses nih :(

12. By Teddy on Mar 4, 2008 at 23:12:34
Using Mozilla Firefox Mozilla Firefox 2.0.0.12 on Windows Windows XP

wah, pindah lagi nich, saya mau nanya blogspot apa bisa dibuat hosting,atau domain aja yang bisa, btw sekalian tukeran link mas….thanks.

13. By dani on Mar 5, 2008 at 04:11:33
Using Opera Opera 9.26 on Linux Linux

devari:
bli made, sependek yg saya tahu.. (maklum pemula..) :)

  • mengunduh berkas plugin browser sniff
  • trus ekstraksi sesuai petunjuk mas priyadi
  • aktifkan plugin di dasbor plugin
  • letakkan kode php browser sniff-nya (<?php pri_print_browser(”Using “, “”, true, ‘on’); ?>) spt ‘bhs aneh’ di bawah (dlm comment loop; mungkin gak semua theme spt ini)

dlm hal ini saya memilih meletakkan dgn nama ’span browsersniff’ utk memudahkan mengatur dgn CSS (tercetak tebal):

<?php 

/* This is a loop for printing comments */

if ($numComments != 0) : ?>

<ol class="commentlist">

<li class="commenthead"><h2 id="comments"><?php comments_number('No Responses', 'One Response', '% Responses' );?> to “<?php the_title(); ?>”</h2></li>

<?php foreach ($comments as $comment) : ?>

<?php if (get_comment_type()=="comment") : ?>

<li class="<?php if ( $comment->comment_author_email == get_the_author_email() ) echo 'mycomment'; else echo $oddcomment; ?>" id="comment-<?php comment_ID() ?>" style="list-style-type:decimal">

<?php if ($comment->comment_approved == '0') : ?>

<em>Your comment is awaiting moderation.</em>
		<?php endif; ?>

By <?php comment_author_link() ?> on <a href="#comment-<?php comment_ID() ?>" title=""><?php comment_date('M j, Y') ?></a> <?php edit_comment_link('Edit',' | ','');  ?>

<span class="browsersniff"><?php pri_print_browser("Using ", "", true, 'on'); ?></span> /* bagian ini yg penting, bli made.. */

<span class="gravatar"><img src="<?php gravatar("PG", 48, "ccc"); ?>" alt="" width="48px" /></span>

<?php comment_text() ?>

semoga membantu.. :)

14. By dani on Mar 5, 2008 at 04:29:27
Using Opera Opera 9.26 on Linux Linux

Yusuf Alam:
wah maap om dokter, td komennya masuk akismet/spam..ntah kenapa.. :) dl pas awal kuliah emang dpt pelajaran kode2 gini kok..jd ya sekadar tau dikit2lah.. :)

15. By Dani Iswara on Mar 5, 2008 at 05:53:45
Using Mozilla Firefox Mozilla Firefox 2.0.0.12 on Linux Linux

Teddy:
alo dok,
blogspot bs berbayar juga, domain dan hosting bs sekaligus diurusin ama blogspot & partner2-nya..tinggal ganti nama domain yg tanpa ‘blogspot.com’ ato nentuin nama sendiri selama tersedia..

kl pendapat pribadi, wordpress masi lbh baik di segala hal :) mkkssy

utk tukar link, saya ngga ada kebijakan khusus :)
krn ngga diminta pun saya biasanya nambahin koleksi taut temen2..ngga peduli mo ditaut balik ato ngga.. :)
biasanya saya pake nama aslinya..jd, pake Teddy aja atau Timotius Eddy nih..?

16. By Aprilia Gayatri on Mar 5, 2008 at 10:43:48
Using Mozilla Firefox Mozilla Firefox 2.0.0.12 on Windows Windows XP

huumm
kalau saya masih suka yang gratisan. segala yg gratisan itu enak.. he he :mrgreen:

waah Bali- Blogger Community juga yaa?

( ^__^” )April

17. By aRya on Mar 5, 2008 at 11:17:23
Using Mozilla Firefox Mozilla Firefox 2.0.0.7 on Windows Windows XP

adu adu saia kagak ngerti ma yang beginian
maklum masi katrok
huhuhuh

18. By Elyas on Mar 5, 2008 at 19:01:06
Using Mozilla Firefox Mozilla Firefox 2.0.0.12 on Windows Windows XP

lama gak blogwalking dok, gimana kabarnya ?
izin dok ada beberapa artikel punya dokter dhani saya ambil untuk lounching salah satu web saya pendukung ilmu kedokteran dot net boleh khan hiyayayya (ini minta izin apa malak yach kekkekekeke)
wek satu lagi gak salah nih dok udah di approve ama honcode Muannnntaaaaaaaaaappppppp kasih tau dong rahasianya hehehehe

19. By dani on Mar 5, 2008 at 23:06:36
Using Mozilla Firefox Mozilla Firefox 2.0.0.12 on Linux Linux

Aprilia Gayatri:
apalagi open source :)

aRya:
jgn tll merendah bli..nanti susah bangunnya :)

Elyas:
silakan mas Elyas, sekalian ditambahin/dikoreksi aja..gpp kok..
akreditasi itu cuman ngikutin standar umum mrk aja sesuai daftar di situsnya.. :)

sori, saya lupa username ama password di situsnya mas Elyas :)

20. By Teddy on Mar 5, 2008 at 23:42:54
Using Mozilla Firefox Mozilla Firefox 1.5.0.12 on Windows Windows XP

Pakai Teddy aja dok,linknya juga sudah saya pasang,makasih , salam sejawat.

Post a Comment

You may read again from the Top

  • Strict XHTML (semantic markup) tags allowed (see Site Help - Leaving Comment)
  • All tags must be properly closed
  • Comment contains some words (eg. URLs) will be held in moderation
  • Paragraphs and line breaks are automatically converted
  • Keep relevant. Inappropriate comments may be edited, moderated, or removed
  • To have image beside your comment, get Gravatar!

Top
Previous: Medical Blogger can help Patients on the Net
Next: Memilih Slackware, atur MMC - SD Card, Upgrade Kernel

2008 | WordPress | X/HTML | CSS | W3C-WAI WCAG | CCA-NC-ND | Dani Iswara .Net & Putu Vidyanti Indiraswari