Permana Jayanta

Web Developer

Melihat style blog lain dengan Web Developer

Saat lagi blogwalking, ada beberapa blog yang mempunyai desain yang keren banget. Ingin sekali membuat yang seperti itu, tapi bingung bagaimana caranya. Tapi beberapa saat kemudian baru sadar kalau sudah terinstall plugin WebDeveloper di FireFox-ku.

Memangnya kenapa dengan plugin WebDeveloper ? Dengan plugin ini kita bisa mengetahui apa nama element suatu halaman web dan style CSS yang seperti apa yang digunakan. Sebenarnya ada cara yang lain tanpa menginstall plugin ini. Cara yang biasa saya lakukan adalah :

  • Melihat kode halaman web tersebut dengan klik kanan View Page Source.
  • Membuka file CSS halaman tersebut.
  • Mencari tahu nama elemen dari suatu halaman web yang ingin kita tahu style CSSnya.
  • Melihat di style elemen tersebut di file CSS.

Tapi melakukan hal diatas berulang-ulang setiap kali melihat tampilan yang menarik sangatlah melelahkan. Maka dari itu, bagi yang suka iseng-iseng ngintip style CSS orang, wajib install plugin Web Developer disini. Plugin ini memang bagus banget, maka tidak heran siapa tahu anda sudah pakai plugin ini dan sudah sering mempraktekan cara yang saya jelasin dibawah.

Misalnya sewaktu saya membuka blog webdesignerwall.com, Disitu saya lihat caranya menampilkan potongan kode dengan quoted code. Seperti gambar dibawah ini.

quoted-code

Kemudian klik kanan pada halamannya sorot ke menu Web Developer > CSS > View Style Information. Sekarang, setiap elemen halaman web tersebut bisa disorot dan untuk memperjelas, diberi border warna merah.

show2

Klik elemen itu dan informasi style CSS akan muncul (secara default) di bagian kiri browser.

show3

Sekarang bisa dilihat style CSS halamannya.

  1. Menunjukkan kode CSSnya.
  2. Susunan elemennya.

Yang diatas cuma contohnya saja. Bisa diterapkan di berbagai halaman web. Misalnya saja dihalaman profile friendster orang. Misal orang tersebut mempunyai desain profile friendster yang bagus banget, tinggal lihat saja kode CSSnya seperti apa trus tinggal copy-paste deh style nya Hee hee.

Itu hanya sebagian kecil dari fiturnya web developer. Cuma CSS -> View Style Information saja. Banyak hal yang bisa dilakukan denga plugin tersebut.

5 Comments

  1. kriteria blog bagus menurutmu gmn? karena tiap orang beda-beda mengartikan blog bagus itu..

  2. Permana Jayanta

    July 28, 2008 at 10:16 am

    Klo menurut aku nih brill, seperti yang ada disini:
    http://www.smashingmagazine.com/2006/12/19/50-beautiful-css-based-web-designs-in-2006/
    Yah, yang model2x seperti gitu deh 😀

  3. wah info yang bagus nih 😀

  4. apalagi web dev itu bs diedit utk ditambahin tools lain spt opera mini viewer, xml validation, atrc, p3p validator, icra label tester, dll..di opera dan fx memang bs jd make bookmarklet..tp lumayan lah kl ada firebug+bookmarklet di ekstensi web dev 🙂

  5. wah mantap..ko bisa baru baca yh saya.. selama ini cuma ngintip dari browser aja terus dikira sendir dikasi class apa tuk bikin tampilannya jadi caem begitu..hehehe

Leave a Reply to lukman Cancel reply

Your email address will not be published. Required fields are marked *

 

This site uses Akismet to reduce spam. Learn how your comment data is processed.

© 2019 Permana Jayanta

Theme by Anders NorenUp ↑