Firebug Untuk Inspeksi Element

Pernah gemes ngga, saat mau mengubah sesuatu yang ada di template tapi bingung dan ngga tau caranya. Misalnya sesederhana mau menghilangkan bayang-bayang yang ada di gambar atau sekedar menambahkan garis di judul posting. Apapun platformnya, asalkan tau bagaimana cara mendapatkan kode yang bisa dirubah, tentunya akan mudah.

Sebagai seorang web designer kaya saya yang front end dan back end, udah wajib dan pasti memakai fitur inspeksi elemen yang ada di browser. Nah buat blogger yang cuma butuh bagian-bagian tertentu saja, inspeksi elemen ini juga bisa dipelajari. Mudah dan praktis kok, moga ngga ribet seperti kelihatannya ^^.

Contoh Kasus

Untuk contoh, saya memakai platform blogspot yang biasanya kebanyakan pakai default theme simple. Biasanya, beberapa menggunakan theme simple bawaan itu untuk mendapatkan layout yang minimalis dan bersih. Karena backgroundnya akan putih semua, sehingga lebih fokus ke konten. Akan tetapi permasalahannya, pada saat kita menggunakan theme tersebut, kadang ada hal yang mengganggu.

Seperti yang saya bilang di atas, untuk mendapatkan theme yang betul-betul clean, maka gambar juga harus terlihat bersih. Akan lebih terlihat rapi apabila gambar tersebut tidak ada bayang-bayang. Nah contoh berikut ini adalah bagaimana saya menggunakan firebug/inspeksi elemen untuk menghilangkan bayang-bayang yang ada di gambar tersebut.

sc1
Sebelum
Sesudah
Sesudah

Menemukan Kode Dengan Inspeksi Elemen

Untuk menghilangkan bayang-bayang (shadow), kita harus menemukan kode CSS nya terlebih dahulu. Bagaimana caranya? Gunakan Firebug untuk Firefox atau klik kanan pada Chrome dan pilih Inspect Element. Firebug bisa diinstall dengan cara search di Google atau getfirebug.com. Sedangkan menu Inspect Element sudah ada dalam browser Chrome.

firebug

Begitu sudah terinstal, cara menggunakannya sangat mudah. Yaitu dengan klik kanan bagian yang ingin dilihat kodenya, kemudian klik inspect element. Kemudian akan keluar jendela tambahan di bawah yang menunjukkan kode-kode yang mungkin membingungkan hehehe. Tapi jangan khawatir, gunakan saja seperlunya kecuali memang memahami CSS ya.

inspect-element

sc3

Pada hasil inspeksi, terlihat di bagian sebelah kanan adalah kode CSS dari bagian gambar. Di mana ada tertulis border, box-shadow yang tentunya ada nilainya. Nah, jadi simplenya adalah kalau ingin menghilangkan bayang-bayang (shadow) kita perlu memberi nilai none. Caranya untuk mengaplikasikan sangat mudah. Copy bagian yang disorot, kemudian masuk ke Template -> Customize -> Advanced -> Add CSS. Paste di kotak dan ganti semuanya dengan none.

sc4

Gampangkan. Hasilnya langsung terlihat kalau bayang-bayangnya sudah tidak ada. Kalau sudah sesuai, bisa klik apply to blog untuk menyimpan. Dan kalau lagi ngga ada kerjaan ingin mengganti atau mengutak-atik yang lain, bisa mendapatkan kodenya pakai firebug/inspect element dan menggantinya dengan kode CSS. Masih bingung? Mungkin video di bawah ini bisa membantu ya.

Ps. Follow saya yah di Youtube, bakalan upload banyak video nih kalo banyak subscribernya ^^

https://apis.google.com/js/platform.js

 

Advertisements

14 thoughts on “Firebug Untuk Inspeksi Element

  1. “mau menghilangkan bayang-bayang mantan yang ada di pikiran kita”
    ajegileeee
    dahsyat banget 🙂
    ini tutorial blog atau klinik jodoh?
    *getok pake sendal

    kalo di mozilla/opera gimana?
    ga ngerti sih soal ini
    tapi kalo inspeksi halaman, kadang saya suka buka buat belajar kode2 html

    1. Mozilla pake firebug ama opera juga ada inspect tools

      Tapi jangan dicoba buat ngilangin bayangan mantan ya, ngga bisa soale *polos

  2. oh ada juga yang ginian, biasanya aku cuman pake inspect element aja. Gemeshin emang kalo pas ngedit template gak nemu kodenya. Sampe sekarang aku masih penasaran dimana kode adsense2 berada T___T *langsung instal

  3. Iya ya mba, inspect element berguna banget..saya juga kalau apa gitu pake inspect element di website / blog yang menurut saya unik atau sekedar pengen tahu…

  4. Membantu banget, nih, Mbak. Makasih banyak, ya, Mbak. Gambar di blog aku langsung jadi bersih dari bayangan.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s