Menyimpan Editan Firebug, Edit Template Cepat

Posted by Mas Doyok addons, tips blog Kamis, Oktober 13, 2011 Firebug membantu saya mengedit template tiga kali lebih cepat - Setelah saya posting tentang addons Firebug yang membantu Anda untuk mencari berbagai kode dari suatu template (baca: Bedah, Edit, Curi Template Orang dengan Firebug), kemudian banyak pertanyaan yang muncul, atau bahkan bisa disebut suatu kekecewaan karena hasil kerja di Firebug tidak bisa di save langsung ke blog, sebagaimana Blogger Template Designer (Terkait: Siapa Saja di Balik Blogger Template Dessigner?)

Bagi Anda yang masih kebingungan untuk menggunakannya, atau bagi Anda yang menganggap addons ini tidak membantu, silahkan ikuti tutorial berikut ini. Dengan bantuan Firebug, saya rubah komentar reply karya Tien Nguyen (Baca: Membuat Komentar Reply di Blogspot bagian II) menjadi bergaya facebook dalam waktu kurang dari se jam. :D Kita akan benar-benar hemat waktu...

Step 1 - Sorot Bagian Yang Ingin di Edit dengan Firebug
- Silahkan buka blog yang ingin Anda Edit
- Pastikan sudah install Firebug. Klik lambang Firebug (serangga/kepik) di pojok browser Anda. Seri terdahulu berada di pojok kanan bawah, tapi installan yang terbaru menempatkan Firebug di pojok kanan atas.
- Sorot bagian template yang ingin Anda edit. Otomatis Fjendela Firebug yang ada di bagian bawah akan menampilkan kode HTML dan CSS dari bagian yang Anda sorot. CSS ada di sebelah kanan. Dilengkapi dengan CSS id, contoh dalam gambar adalah #navcats {

Step 2 - Edit Langsung Per Bagian
Sebelumnya sebaiknya Anda tahu apa itu CSS Properti dan CSS Value. Jika Anda melihat kode css background: #000; maka yang disebut css properti adalah background dan yang disebut css value adalah #000
- Anda bisa mulai mengubah value CSS sesuai keinginan Anda. Misalkan pada contoh gambar, Anda mengganti value background menjadi #000 maka otomatis preview blog Anda akan ikut berubah.

- Anda bisa coba ganti properti lain semisal width (lebar), font-size (ukuran font) hingga margin-bottom (jarak dari bawah). CSS yang muncul akan bervariasi tergantung objek yang Anda sorot.
- Anda juga bisa menambahkan properti langsung di Firebug. Klik kanan di sebelah kanan kode CSS pada area yang kosong. Kemudian klik New Property...

- Silahkan isikan property yang Anda inginkan. Bagi Anda yang masih awam, Firebug akan membantu Anda menentukan property yang Anda maksud, karena ketika Anda ketika huruf b saja misalnya telah ada saran untuk menuliskan border. Juga untuk propert-properti yang lain. Jika anda menuliskan properti dengan salah maka garis yang mengeliling isian properti akan berubah menjadi warna merah. Jika benar, akan berwarna kuning seperti gambar.

- Setelah Anda benar menuliskan property silahkan ketikkan titik dua (:) maka otomatis Anda berpindah dari isian properti ke isian value. Masukkan value yang Anda inginkan dan otomatis preview blog Anda akan ikut berubah juga sesuai perubahan kode yang Anda masukkan (pada gambar yang ditunjuk panah merah adalah preview blog saya yang otomatis menubarnya menjadi memiliki garis atas setebal 10px sesuai isian yang saya masukkan). Jika value yang Anda isikan benar, maka kotak akan dikelilingi dengan warna hijau.

Step 3 - Copy Paste ke Edit HTML
Point penting untuk sebuah pertanyaan, "Lantas, bagaimana cara kita save hasil kerja kita?" Firebug tidak bisa melakukkannya secara otomatis (berharap kedepannya Firebug dibeli dan dikembangkan Google kemudian diintegrasikan langsung dengan Blogger, :D mantaaaaap). Kita bisa lakukannya dengan manual seperti langkah berikut:
- Block satu bagian kode yang telah dirubah (misalkan dalam contoh adalah satu bagian css id navcats).
- Klik kanan kemudian klik Copy.

- Login ke Blogger, masuk ke bagian Rancangan - Edit HTML
- Cari CSS Id yang tadi Anda rubah. Langkah mudah mencarinya adalah dengan tekan Ctrl + F, kemudian akan muncul alat cari di bagian bawah Firefox Anda. Pada kolom cari ketikkan CSS ID yang Anda maksud, ketika ditemukan akan ditandai dengan stabilo hijau.

- Blok keseluruhan satu bagian kode tersebut kemudian paste-kan hasil copy-an dari Firebug tadi.

Step 4 - Save Template Anda dan Ulangi Untuk Bagian-bagian Yang Lain
Silahkan simpan Template Anda. Lihat apakah hasilnya telah berubah sesuai preview saat Anda menggunakan Firebug. Jika berhasil, silahkan coba bagian-bagian yang lain satu persatu sesuai keinginan Anda.

Tips Plus ++++
- Bagi Anda yang belum begitu mahir dan tahu tata cara penulisan property atau value CSS dengan benar, silahkan Anda coba terlebih dahulu dengan mengotak-atik angka valuenya saja. Misalkan ada CSS yang ditemukan di firebug font-size: 12px; maka Anda boleh mulai belajar dengan mengganti angka 12 yang ada disana dan perhatikan perubahannya. Yang terpenting adalah: berani mencoba... (Tingkat dasar CSS sebaiknya baca: Serial Belajar CSS)
- Bagi Anda yang sudah tingkat mahir, Anda bisa edit beberapa bagian sekaligus kemudian copy keseluruhan CSS langsung menggantikan semua CSS di blog Anda. Untuk copy semua CSS hasil editan di Firebug, Anda bisa pergi ke tab CSS

- Untuk diperhatikan bahwa CSS ID #navcats dengan #navcats a atau #navcats b itu berbeda. Jadi pastikan Anda paste hasil copy-an dari Firebug pada tempat yang benar.
- Firebug juga membantu Anda ketika kesusahan menemukan id CSS suatu bagian blog yang ingin Anda edit. Cukup sorot bagian blog tersebut, maka pada bilah kiri akan terlihat CSS ID yang perlu Anda rubah.

- Ketika Anda menemukan suatu bagian yang menarik pada blog orang lain (misalkan seperti saya meniru style facebook pada bagian komentar), harap diingat bahwa CSS ID setiap blog bisa berbeda meski sama-sama bagian komentar. Untuk menirunya, yang perlu Anda tiru adalah CSS Property dan CSS Value nya.


Semoga bermanfaat dan membantu Anda . Artikel ini dibuat sampai puyeng dan berusaha agar sejelas-jelasnya bagi Anda :D. Jika masih bingung, pertanyaan lebih lanjut bisa lewat YM: masdoyok10 atau facebook facebook.com/masdoyok