Firebug, Cara Mudah Mengedit CSS & Kode HTML di Blog

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ اارَّحِيم

[CATATAN CUNGERS] - Okey guys.. pertemuan kali ini Catatan Cungers akan membahas dan membuka rahasia secara BLAK-BLAKAN bagaimana cara mengedit blog dengan mudah dan simpel.

Kali ini kita akan mempelajari bagaimana cara mengedit kode-kode HTML di blog dengan mudah, yaitu dengan menggunakan Add-ons FIREBUG yang tersedia di Browser Mozilla Firefox.

Di bawah ini ada beberapa tahapan, menginstal add ons Firebug pada Mozilla Firefox dan cara menggunakan Firebugnya. Tolong simak dengan seksama..

1. Kalian klik tombol pada firefox, kemudian klik add-ons. Lihat gambar di bawah ini :

2. Setelah tahap satu, maka akan muncul tampilan seperti di bawah :

 Kemudian kalian ketikkan pada kotak pencarian dengan keyword "firebug", percis seperti gambar ini :

3. Nanti akan muncul tampilan seperti ini, mungkin akan banyak yang muncul dengan keyword yang sama, cobalah cari firebug dengan gambar binatang kecil seperti kunang-kunang warna kuning. Kalo di browser catatan cungers mah ngga ada, jadi kalo di sini ngga ada kalian coba klik "see all result" seperti gambar di bawah ini :

4. Kalian akan di alihkan ke TAB baru dan muncul tampilan seperti ini, kemudian kalian pilih yang paling atas "FIREBUG" kemudian klik "add to firefox". Lihat pada gambar :

Kalo belum nongol di pojok kanan atas, dibawah tombol close [X] berarti firefox kalian harus di restart biar firebugnya bisa berfungsi.

Nah itu penjelasan tentang menambahkan firebug pada browser mozilla firefox. Sekarang kita lanjut ke penjelasan tentang cara menggunakannya, yaitu untuk mengedit kode-kode pada blog. Tetep fokus dan simak baik-baik ya guys...

1. Kalian klik menu firebugnya, yang ada di pojok kanan atas pada browser kalian, lihat pada gambar di bawah :

Maka akan muncul tampilan seperti ini :

2. Langsung pada contoh kasus >> Misal, kalo kita ingin mengganti warna tulisan pada menu nav bar. Klik pada menu yang sudah di beri tanda kursor seperti contoh di bawah ini guys..

Lalu kalian arahkan kursor pada tulisan menu nav bar (ini sekedar contoh) kalian bebas mau ganti yang mana aja guys sesuai keinginan.

3. Sebelumnya warna tulisan pada menu nav bar ini adalah hitam ke abu-abuan akan di ganti dengan warna merah, biar lebih HOOOTTT hehe.. Lihat gambarnya!

4. Kita cari kode warna mana yang tadi mau di ganti, cara ngeliat kode itu warna apa, ngga usah repot-repot bertamu ke om google buat nanya-nanya kode warna html, kalian cukup arahkan kursor pada kode warna yang ada di situ. Jika sudah ketemu kalian ganti kode warna yang tadi dengan kode warna merah (atau yang lainnya) dengan mengetik nama warnanya atau kode warna tersebut. Contohnya lihat pada gambar.

Nah maka otomatis akan berubah warna tulisannya... Lihat gambarnyaaaa.!

NB : INI HANYA SEKEDAR SIMULASI JADI PERUBAHAN INI NGGA BENAR-BENAR NYATA PADA BLOG ANDA. Jadi kalo mau benar-benar berubah secara nyata kalian harus masuk ke bagian EDIT HTML blog nya.

Oiya cara untuk mengetahui letak kode tersebut kalian harus mengcopy kode yang bersangkutan dengan menu nav bar, lihat gambar di atas tulisan yang di blok [.menu a] ..
Nah silakan kalian Login ke blogger >> template >> edit html >> Tekan CTRL+F (PENCARIAN KODE CEPAT) kemudian kode yang udah di copy tadi [.menu a] paste-kan di kotak search  lalu cari kode warna hitam ke abu-abuan (kode warna : #4444444) tadi dan ganti dengan warna merah (kode warna merah : #ff0000) kemudian save dan lihat HASILNYA.

CARA PENCARIAN CEPAT KODE HTML

GAMBAR HASIL EDIT

Jebreetttt... akhirnya ceramah kali ini selesai sudah.. nah guys cara ini bisa meminimalisir kesalahan fatal saat penyimpanan kode-kode pada template di blog kitaa... dan mohon maaf apabila ada penjelasan yang buat kalian ngga paham, maklum di sini saya sebagai author CATATAN CUNGERS masih kelas NEWBIE alias AMATIRAN..

Semoga semua yang telah dijelaskan bisa kalian mengerti dan pahami serta bermanfaat... Bagi yang mau menyalin artikel ini tolong sertakan link sumbernya yaa guys, kan tau sendiri postingan ini kalo di sinetronin bisa bersambung selama seminggu hehe... Thanks guys..

Anda sedang membaca artikel CATATAN CUNGERS tentang Firebug, Cara Mudah Mengedit CSS & Kode HTML di Blog dan anda bisa menemukan artikel Firebug, Cara Mudah Mengedit CSS & Kode HTML di Blog ini dengan url http://catatancungers.blogspot.com/2013/11/firebug-cara-mudah-mengedit-css-kode-html-di-blog.html. Anda boleh menyebarluaskan atau mengcopy artikel Firebug, Cara Mudah Mengedit CSS & Kode HTML di Blog ini jika memang bermanfaat bagi anda atau teman-teman anda, namun jangan lupa untuk mencantumkan link sumbernya.