September 7, 2010

Melihat CSS suatu web atau situs

Terkadang ketika kita sedang berkunjung ke suatu web atau blog yg tampilannya bagus, timbul perasaan untuk ingin mencontoh atau meng-copy, baik sebagian maupun seluruhnya atau memodifikasinya. Mau nggak mau ini akan melibatkan CSS. Nah, jika ingin mempelajari atau meniru CSS-nya kita dapat melihatnya dengan fasilitas add-ons web-developer dari mozilla. Keuntungannya, kita bisa mengedit CSS dan melihat langsung perubahannya di layar tanpa perlu masuk menu custom CSS. Setelah tampilan sesuai keinginan, baru dicopy kemudian diupload di custom css

Bagaimana melihat CSS sebuah web site? Berikut caranya :
1. Pastikan xpinstall.enabled bernilai true, caranya :

  • Buka firefox
  • Ketik about:config pada address bar
  • Cari xpinstall.enabled jika nilainya masih false double klik untuk mengubahnya menjadi true.

2.download web_developer- dari sini lalu install

3. Jika sudah diinstal akan ada tambahan toolbar di atas. Jika kurang jelas, klik sini

4. Untuk melihat CSS sebuah website,
  • buka firefox
  • browse alamat web site tersebut misalnya murnii.multiply.com kemudian klik css -->edit css --> klik tab custom.css , maka akan tampil website beserta cssnya (di sebelah kiri/kanan/bawah).
  • Css yang nampak di layar bisa dihapus, diubah, ditambah untuk menyesuaikan dengan tampilan yang diinginkan misalnya mengganti warna huruf, background dll. Hasil perubahan bisa dilihat saat itu juga. Jangan khawatir yang berubah cuma tampilan di komputer kita aja. Kalau sudah sesuai dengan keinginan, silakan copy kemudian paste ke CSS web kita.

Mudah-mudahan cukup jelas, selamat mencoba :))

catatan :
  • Keuntungan lain dari web_developer adalah bisa menghandle masalah jika ada orang yang iseng nge-deface blog kita dengan cara disable-kan java script. caranya bisa dilihat di sini
  • Kalau ingin mengcopy (apalagi persis tanpa mengubah) sebaiknya meminta ijin kepada pemiliknya, kecuali kalau memang sudah di-share sebagai themes. Ini salah satu etika di dunia internet.

0 komentar:

Post a Comment