/ 2009-12-27

CARA MUDAH UTAK - ATIK CSS

Sediakan sebuah IE 8.

Ini dia yang jadi topik : F12.

Buka saja blog anda dengan IE 8 (hanya IE 8 yang support). Jika sudah terbuka secara komplit, tekan F12 pada tuts keyboard. Maka akan muncul hal ini.

Maka ia akan menempel pada window IE.

Sekarang mari kita menyimak tool - tool yang ditawarkan.
1. Gambar Pointer : digunakan untuk menyeleksi daerah (area) yang kita ingin tahu kode CSS-nya. Klik gambar pointer itu, maka kemudian arahkan ke halaman blog kita di atas. Maka akan muncul sebuah kotak - kotak yang otomatis terbentuk mengikuti aturan dari tiap CSS yang telah ada, misalnya body, content, sidebar, post-header. KLIK, dan pada bagian bawah (developer tool) akan keluar diagram CSS tempat peletakan kode CSS pada halaman tersebut. Hal ini sangat berguna sebab, jika kita menggunakan sistem manual (mencari sendiri) maka hal ini akan memakan waktu yang cukup lama.

Seperti pada gambar, aku meng-klik sebuah area. Maka ketika telah diklik, pada bagian bawah (developer tool) akan ter-blok sebuah batang dari CSS itu berada.

2. Style-Trace Style-Attribute

Untuk melihat tree dari CSS yang digunakan. Pada bagian inilah, kita dapat merubah - rubah sedikit dari kode CSS tersebut. Misalnya, memberi warna dan memberi border. Rubah saja angka - angka atau aturan yang tertulis, maka tampilan blog (bagian atas) akan ikut berubah. Khusus pada Attribute, anda juga dapat menambahkan format CSS tambahan.

CONTOH : aku mau rubah warna backgroud pada area posting.
Maka pada Attribute tinggal ditambahkan "backgroud-color" dan diberi sebuah nilai warna.

Nah, mau mencoba ? Silahkan cari IE 8. Ingat hanya IE 8.

CATATAN PENTING : APA YANG DIRUBAH LEWAT DEVELOPER TOOL INI TIDAK MENGUBAH CSS ASLI DARI BLOG ANDA !!!!

Jadi kawan - kawan hanya "mencoba - coba" saja. Tapi dengan tool ini, kawan - kawan dapat terbantu untuk mencari kode CSS yang sangat rumit.

Tapi, bagi yang gak doyan pake IE, tunggu saja lanjutannya untuk yang hobi pake Mozilla Firefox. He-he-he.

Yang kasih tahu tips ini orang MICROSOFT lho.

68 komentar:

  1. pake tool yak, kayaknya lbh gampang lg, tapi saya masih manual aja lgs dari blogspot EDIT deh

    BalasHapus
  2. ooo... gitu ya sobt????
    ga ada IE 8 nih... maklum di Warnet .. hiihih

    BalasHapus
  3. ternyata IE 8 ada tool kYk giniaan'y...
    sayang d warnet tmpat kaka' aku ga' ada IE 8_nya..

    BalasHapus
  4. mantap bang infonya...pas bgt dengan masalah yang saya hadapi sekarang...

    BalasHapus
  5. wah mantep
    tapi penak manual yo mocone wkwkw

    BalasHapus
  6. iya nih sob ane pake mozila aja kokk..
    thanks infonya sapa tahu lagi pake ie8 bisa nyobain

    BalasHapus
  7. pengen bisa ngutak ngatik ini... huhuhukk tapi aku gapteknya nggak ketulungan.... sekarang aja diurusin sama adeku...

    BalasHapus
  8. Biasa menggunakan klik kanan View Page Source di edit di notepad deh, hehe...

    BalasHapus
  9. hahah.. nice info, btw. dah terlanjur benci sama IE..

    BalasHapus
  10. nice trick... saya tunggu add-ons firefox untuk masalah css ini :)

    BalasHapus
  11. nanggung tuh.. awam gak akan ngerti .. trus yg ngerti html css mending manual lebih cepet.

    BalasHapus
  12. yg pake chrome, klik kanan >> 'inspect element'

    sayang,ndak suka pke IE :p

    BalasHapus
  13. manstrap infonya... keep semangattt sobat !!!!

    BalasHapus
  14. Wow...menarik sekali tuh sob...
    Thanks for info

    BalasHapus
  15. hmm.. klo pake Firefox ada gak?
    soalnya klo IE saya khusu buat kerjaan.. klo di ganti ke ver 8 takut gak compatible ama program yang dibikin temen..

    BalasHapus
  16. muantep muantep...... thanks banget atas tutorialnya sob.... keep posting......

    BalasHapus
  17. met hari senin, selamat beraktifitas kembali semuanya

    BalasHapus
  18. udah nyoba di IE... keren...
    nanti coba utak-atik ah :) thanks ya..

    BalasHapus
  19. we ternyata bisa ya pakai IE8 wah ntar coba ahh.asli baru tau :D

    BalasHapus
  20. IE ku seri brp ya?
    nunggu yang pakai mozilla aja deh...

    BalasHapus
  21. jadi keren kalau bisa utak atik sendiri...
    makasih sharingnya.

    BalasHapus
  22. setia pakai FF dan gak bisa ngotak ngatik css :D

    BalasHapus
  23. Tutorial mantap sobat,... jadi nambah ilmu nih. Makasih banyak...
    Oh yah,... kalau pake Mozilla bisa nggak??

    BalasHapus
  24. ini nih yang selalu bikin saya bingung sob. soalnya kurang ngerti masalah css he..he..

    BalasHapus
  25. wow tutorial nya keren, bakal gw coba kapan2.

    BalasHapus
  26. Lho...
    Ada IE 8 to...
    Punya saya masih IE 5
    Itupun nggak pernah kepakai

    BalasHapus
  27. Pusing aku kalo pake IE, aku pake Mozilla aja
    dan yah kutak2 Css emang asyik
    kadang sampe lupa update
    ha..ha

    BalasHapus
  28. thx infonya...tapi masih gak gitu ngerti nih soal edit edit css..

    BalasHapus
  29. Makasih Pak! Menarik banget nih! Apalagi untuk Mozilla, ditunggu banget!

    BalasHapus
  30. mantap sobat, thanks ya atas sharingnya, sebagai tanda terima kasih saya berikan award buat anda, kalau berkenan silakan di ambil, semoga persahabatan kita semakin erat

    BalasHapus
  31. makasi infonya ...
    semoga mozila lekas membuat tools seperti IE 8 ....

    BalasHapus
  32. kunjungan balik dari edu bang ..... sambil ngajak tukeran link ..... link abng udah aku pasang .... selahkan lihat di link sobat di blog edu... di tunggu link baliknya ya .... ma kasih sebelumnya

    BalasHapus
  33. link aku pasang "kakve-santi" ma kasih

    BalasHapus
  34. karen infonya. Akan ku cuba nanti.

    BalasHapus
  35. wah terima kasih mas, tipsnya sangat dibutuhkan nih

    BalasHapus
  36. wah, kakve-santi lagi belajar css neh, pantesan blognya tambah keren aja, haha :D

    oh iya, btw aku ada award buat blog kamu sob, silahkan diterima kalau berkenan :D

    BalasHapus
  37. yach..kita nggak terbiasa dengan ie sekarang je om...biasanya pake mozilla...

    BalasHapus
  38. wew,, ga ngertiii deehh yang beginian -_-"

    BalasHapus
  39. melihatnya saja puyenggggggggg >.<

    BalasHapus
  40. Hmm.. sepertinya enak juga yach.. tapi lebih enak langsung bagi saya..

    Saya gak suka IE.. jadi gak pernah install.. hihi..

    Tumben kakve posting beginian..

    BalasHapus
  41. aq masig cinta ama mozila. blog q tak buka pk IE ancur, sama seperti sobat ocim, aq masih manual aja langsung edit html

    BalasHapus
  42. nice inpo euy...
    Tapi saya pakai mozilla. Cuma di IE 8 aja iaa?

    BalasHapus
  43. mantab dech kakve,,
    di bookmark dulu dach

    BalasHapus
  44. Wah...ternyata IE ada fasilitas gitu yah....saya baru tahu.....bagus infonya...thanks

    BalasHapus
  45. thamks banget mas... atas ilmunya... wah... baru tahu saya mas....

    BalasHapus
  46. Artikelnya bagus. Saya baru ngeblog buat sharing ilmu komputer saya. Kunjung balik, yah.. di sini

    BalasHapus
  47. Mantap Mas, sayang...sekarang sy pake Wordpress (jadi gak ada utak-atik SSC,,,eh..CSS)...cuma pake plugin semuanya....

    BalasHapus
  48. gag pernah pake IE, udah biasa pake Firefox
    thanks infonya, salam kenal

    BalasHapus
  49. Yang menggunakan Mozilla FF bisa memakai adson dari web developer 1.1.8. Fungsinya bahkan lebih hebat dan banyak dibandingkan IE8. Saya lebih suka yang ini apalagi saat sedang mencari inspirasi baru saat mendesain templates :) cmiwww.

    BalasHapus
  50. mantab ini, tapi saya kurang sreg ama yang namanya IE, masih mozilla yang jadi pilihan untuk design atau sekedar redesign. tapi untuk endingnya tetep uji kelayakan di IE. ada firebug ama web developer ya di mozilla untuk addons.

    BalasHapus
  51. waw...tips keren...br tau tuh cara ini...coz udh ga pernah pake IE lg, sudah beralih ke firefox...tp boleh juga nih dicoba...thanx yaa

    BalasHapus
  52. wah infonya boleh juga neh.. keren..

    saya biasa pake google chrome inspect element, tp kayaknya IE lebih bagus ternyata hehe :D

    BalasHapus
  53. kalo pake chroome bisa ga ya?

    BalasHapus
  54. buset keren jg kalo udah ada di firefox, gak usah lagi edit2 pake notepad dah..

    please visit, i will visit back : JadikanPinter!

    BalasHapus
  55. Tutorialnya keren bgt genk :D
    hehehe

    BalasHapus