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.






Yang Satu Kategori

71 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. huaaa, aku nunggu mozilla ajaa

    BalasHapus
  31. 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
  32. makasi infonya ...
    semoga mozila lekas membuat tools seperti IE 8 ....

    BalasHapus
  33. 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
  34. link aku pasang "kakve-santi" ma kasih

    BalasHapus
  35. karen infonya. Akan ku cuba nanti.

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

    BalasHapus
  37. Waaah makasih ilmunya ya :D

    BalasHapus
  38. 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
  39. yach..kita nggak terbiasa dengan ie sekarang je om...biasanya pake mozilla...

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

    BalasHapus
  41. melihatnya saja puyenggggggggg >.<

    BalasHapus
  42. 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
  43. aq masig cinta ama mozila. blog q tak buka pk IE ancur, sama seperti sobat ocim, aq masih manual aja langsung edit html

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

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

    BalasHapus
  46. wah informasi menarik..... thx

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

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

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

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

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

    BalasHapus
  52. 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
  53. 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
  54. 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
  55. wah infonya boleh juga neh.. keren..

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

    BalasHapus
  56. nice info....thx gan...

    BalasHapus
  57. What Are the Three Red Lights?
    The Xbox 360 is pandora jewellery one of the hottest cheap pandora gaming consoles out in the market today. With the latest graphics technology cheap pandora uk combined with some of the best games pandora discount uk available, you will definitely have a lot of fun with this particular gaming console. Xbox 360 also allows you to play online through the Xbox Live with your friends or with other people from different parts of pandora uk the world. Whatever pandora bracelets your tastes are in games, you pandora bracelet can be sure that the Xbox 360 will be able to offer it all to you.However, you have to face the fact that although the Xbox 360 is one of the best gaming pandora bracelets uk consoles available today, there are technical issues that you may face while you are playing with it. An example would be the red ring of death. If you see three red pandora bracelet charms lights flashing around pandora bracelets sale the power button, then you will know that you have a huge problem with your gaming console.

    BalasHapus
  58. guoweigang You will want to cheap pandora make sure that you think about the design pandora jewelry that you are looking for and possibly look outside buy Pandora of the box. You will want to look deeper pandora bracelets and charms into what exactly you are looking for discount pandora bracelets .A lot of people like to show off the Pandora necklace jewelry, but you will want to keep in pandora necklace beads mind that there is that cut out Pandora necklace sale image of jewelry, but you will want Pandora charms to call some of the local chains and ask them if they cheap pandora charms are willing to work with you to make some custom made jewelry.

    BalasHapus
  59. kalo pake chroome bisa ga ya?

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

    please visit, i will visit back : JadikanPinter!

    BalasHapus
  61. Tutorialnya keren bgt genk :D
    hehehe

    BalasHapus
  62. Produk di Jamin Asli.
    ELECTRONICSOLUTION-SHOP.
    Menawarkan harga Promo , Barang yang Kami Tawarkan Semuanya Barang Asli Original Garansi Resmi Distributor dan Garansi Tam .Semua Produk Kami Baru dan Msh Tersegel dLm BOX_nya,
    Berminat Hub: Hotline/sms: 0857-7087-2865 ATAU KLIK
    WEBSET RESMI KAMI http://electronicsolution-shop.blogspot.com
    BlackBerry>Samsung>Nokia>Apple>Acer>Toshiba>Led tvlg>Led tvSamsung>Nikon>Canon>DLL

    Dijual,
    Ready Stock !
    Blackberry Bold 9780
    Harga Promo Rp.1.500.000,-
    Ready Stock !
    BlackBerry Bold Curve 9300,
    Hrg promo Rp.1.000.000,-
    Ready Stock !
    BlackBerry Torch 9800
    Rp.1.600.000,-
    Ready Stock !
    BlackBerry Z10
    Rp.3.500.000,-
    Ready Stock !
    BlackBerry Q 10
    Rp.4.000.000,-
    Ready Stock !
    Samsung Galaxy S3 Mini
    Rp. 2.700.000,-
    Ready Stock !
    Samsung Galaxy Ace
    Rp.1.400.000,-
    Ready Stock !
    Samsung Galaxy S2
    Rp.2.500.000,-
    Ready Stock !
    Samsung Galaxy S4
    Rp.4.500.000,-
    Ready Stock !
    Nokia 808 Pure View
    Rp.4.200.000,-
    Ready Stock !
    Nokia Lumia 820
    Rp. 2.700.000,-
    Ready Stock !
    Nokia Lumia 920
    Rp.3.400.000,-
    Ready Stock !
    Nokia Lumia 620
    Rp. 1.500.000,-
    Ready Stock !
    Apple iPhone 5G 16GB
    Rp.4.100.000,-
    Ready Stock !
    Apple iPhone 4G- 32GB
    Rp.3.500.000,-
    Ready Stock !
    Apple iPhone 3G-16GB
    Rp.2.900.000,-
    Ready Stock !
    Apple iPhone 4S-64GB
    Rp.4.000.000,-
    Ready Stock !
    Acer Aspire one 756
    Rp.1.400.000,-
    Ready Stock !
    Acer Aspire E1-471G
    Rp.2.800.000,-
    Ready Stock !
    Acer Aspire S5 Ultrabook Core 17
    Rp.7.000.000,-
    Ready Stock !
    Toshiba Satellite C800D-1006
    Rp.2.500.000,-
    Ready Stock !
    Toshiba Satellite C800D-1003
    Rp.1.500.000,-
    Ready Stock !
    Toshiba Satellite L840-1045XR
    Rp.3.700.000,-
    Ready Stock !
    Led TV Lg 42 inch LN5100
    Rp 3.500.000,-
    Ready Stock !
    Led TV Lg 42 inch LN5710
    Rp. 4.000.000,-
    Ready Stock !
    Led TV Lg 39 inch LN5100
    Rp. 3.000.000,-
    Ready Stock !
    Led TV Samsung UA 32 inch F5000
    Rp. 2.100.000,-
    Ready Stock !
    Led TV Samsung UA 32 inch F4000
    Rp.1.500.000,-
    Ready Stock !
    Nikon D5100+18-15Kit
    Rp 3.500.000,-
    Ready Stock !
    Nikon D3000 Kit 18-15mm VR
    Rp. 1.500.000,-
    Ready Stock !
    Nikon D3200 Kit 18-105mm VR
    Rp 3.100.000,-
    Ready Stock !
    Canon Eos 600D Kit EF-S 18-135mm
    Rp.3.800.000,-
    Ready Stock !
    Canon Eos 70D Kit EF-S 18-55mm is stm
    Rp.4.700.000,-
    Ready Stock !
    Canon Eos 600D Body
    Rp.2.500.000,-
    Nikmati berbagai keuntungan berbelanja di sini.
    - Barang berkualitas dan harga relatif lebih murah
    - Dapat diantar ke seluruh indonesia
    - Keamanan di jamin karna setiap pengiriman di sertai asuransi proses cepat dan sederhana
    Barang di jamin 100% original baru dan bergaransi resmi.

    Kami melakukan Pengiriman barang lewat Tiki atau Jne ,Pos,Cargo,bagi luar kota,Ongkir ditanggung pembeli
    Satu-Satunya Toko Online Shop yang berani menjual barang di bawah harga normal (standar) di seluruh Indonesia Aman dan Mudah terpercaya .
    Berkat Anda Usaha Kami Jadi Semakin Lancar,Terima kasih telah berbelanja di electronicsolution-Shop.
    ============SELAMAT BERBELANJA =================

    BalasHapus