Tools Firebug Membantu Anda Merancang Blog Pada Blogger Anda - Funkysst.com

Thursday, March 8, 2018

Tools Firebug Membantu Anda Merancang Blog Pada Blogger Anda

Avertisement
Avertisement
Alat Firebug Membantu Anda Merancang Blog di Blogger Anda.

Bagi sebagian besar blogger, gagasan untuk menyesuaikan pengkodean blog mereka untuk meningkatkan pengalaman pengguna sangat menakutkan dan seringkali cukup menakutkan. HTML5, CSS, dan elemen pengkodean lainnya adalah bahasa virtual mereka sendiri dan bagi pengguna Blogger rata-rata yang ingin memperbarui blog pribadi, pengaturan otomatis hampir sama baiknya. Bagaimana jika ada cara yang lebih baik untuk kode blog, apakah seorang pemula atau pro, yang bisa dilakukan di dalam browser itu sendiri?

Jika Anda menggunakan Firefox atau Chrome, Anda juga harus menggunakan Firebug. Hal ini memungkinkan Anda untuk kode situs Anda secara real time, sehingga Anda dapat memaksimalkan UX blog Anda dalam waktu singkat sama sekali.

Anda Tidak Perlu Lagi Mengedit Melalui Blogger!

Jika Anda pernah mencoba memperbarui tema Blogger melalui fungsi pengeditan situs web, berarti Anda tahu betapa sulitnya melakukannya. Anda dapat melihat pratinjau desain Anda, namun Anda tidak dapat menyimpan perubahan untuk secara resmi melihat apa yang akan terjadi dengan situs Anda sampai Anda mempublikasikan hasil editnya. Jika Anda melewatkan satu baris kode atau melupakan satu elemen kecil, Anda harus kembali ke matriks pengeditan, temukan kesalahannya, perbarui lagi, dan ulangi sampai Anda memiliki blog yang responsif sekali lagi.

Apa Firebug yang memungkinkan Anda lakukan adalah melihat semua elemen yang membentuk sebuah situs web secara real time. Alih-alih mengedit dan kemudian menerbitkan, Anda dapat mengedit secara real time dan melihat pembaruan terjadi, semua tanpa mempengaruhi pengalaman pengguna pengunjung yang datang ke situs Anda saat Anda mengedit. Anda dapat mengubah font, warna, atau hampir hal lain dalam desain situs dengan cepat dan melihat hasil pekerjaan Anda seperti yang terjadi. Tidak suka? Batalkan perubahan anda

Ini sangat mudah.

Menggunakan Firebug untuk Menyesuaikan CSS di Blogger

Panduan ini akan menunjukkan kepada Anda bagaimana memodifikasi kode CSS dari template Blogger. Biasanya, deklarasi gaya Template Blogger CSS dapat diedit melalui file style.css, ditemukan di antara tag <b: skin> dan </ b: skin> .

Untuk mendownload Firebug dan dapatkan rincian lebih lanjut mengenai fitur canggihnya, kunjungi: Firebug untuk Firefox, atau jika Anda menggunakan Chrome, dapatkan aplikasi Firebug Lite . Saya akan merekomendasikan untuk menggunakan Firefox, yang lebih lengkap dan cepat, tapi bagaimanapun juga keduanya bekerja sama.

Setelah Firebug diinstal, ikon bug kecil akan tersedia di kanan atas bilah alamat browser Web Anda. Mengkliknya, layar terbelah horizontal akan ditampilkan di bagian bawah jendela browser. Halaman akan terus ditampilkan di bagian atas, sedangkan bagian bawahnya akan menampilkan HTML dari halaman web saat ini.

pembakar

Untuk menyesuaikan elemen web dari template Blogger, cukup klik ikon Firebug di toolbar, atau item "Periksa Elemen dengan Firebug" di menu konteks. Selanjutnya, klik tombol kursor biru untuk Memeriksa dan menempatkan kursor tepat di atas elemen yang akan disesuaikan.

Sebagai contoh, katakanlah kita ingin mengubah judul gadget "Arsip Blog". Setelah kami mengklik tombol periksa, turunkan judul "Arsip Blog" yang akan disorot seperti yang ditunjukkan pada gambar di bawah ini. Untuk mengubah elemen ini, klik di atasnya:

memeriksa elemen menggunakan pembakar

Sekarang kita memutuskan elemen mana yang ingin kita ubah, klik kanan pada panel "Style" dan pilih opsi "Add rule":

tambahkan aturan CSS di pembakar

Ini akan memberi kelas atau id elemen yang disorot - dalam kasus kami, judul Arsip Blog (# BlogArchive1> h2). Untuk mengedit aturan ini yang baru saja kita tambahkan, klik di dekat braket keriting kiri yang akan membuka kotak teks, sehingga kita bisa mengetikkan deklarasi CSS baru:

firebug css deklarasi

Dan inilah bagian yang menyenangkan. Katakanlah kita ingin membuat judul merah. Kita akan ketikkan warna dan tekan Enter, maka kita akan mengetikkan nilai warna atau teks merah dan tekan Enter. Kami juga akan mengatur ukuran font menjadi 20px, alignment teks ke center (text-align: center) dan membuat teks digarisbawahi (text-decoration: underline):

modifikasi css blogger dengan pembakar

Hal yang keren tentang Firebug adalah saat memodifikasi properti CSS apapun, Anda bisa melihat hasilnya langsung diaplikasikan pada halaman. Jadi, setelah menambahkan deklarasi ini, kami akan melihat judul bergaris merah besar untuk gadget Arsip Blog kami (lihat di gambar di atas).

Untuk menerapkan aturan CSS ini pada template Blogger, cukup pilih mulai dari braket keriting kanan dan ke simbol # (id) atau. (Kelas), lalu klik kanan dan Copy kode CSS.

copy aturan firebug css

Sebelum melakukan perubahan, sangat disarankan untuk membuat cadangan dari template Anda saat ini. Buka "Template" dan klik tombol "Backup / Restore" di sisi kanan atas. Di lokasi "Template" yang sama, klik tombol "Customize" dan arahkan ke "Advanced"> "Add CSS". Tempel aturan CSS yang baru saja Anda salin ke dalam kotak CSS:

tambahkan firebug css ke template blogger

Klik tombol "Terapkan ke blog" di pojok kanan atas untuk menyimpan perubahan dan melihat blog Anda.

Firebug juga memberi Anda satu keunggulan yang berbeda ...

Salah satu alasan terbaik untuk menginstal Firebug ke Chrome atau Firefox adalah memungkinkan Anda meniru beberapa desain situs web favorit Anda dengan cepat dan mudah. Alih-alih menyewa seorang desainer web untuk melakukan pekerjaan itu, yang bisa menghabiskan biaya ribuan, Anda bisa langsung memulai Firebug dan melihat apa gaya CSS untuk situs favorit Anda. Ini memungkinkan Anda membuat widget serupa.

Dari situlah, yang harus Anda lakukan hanyalah mengubah pengkodean untuk membuat elemen desain bekerja sesuai aturan custom.css Anda sendiri. Ini berarti Anda bisa membuat perubahan desain yang mudah ke blog Blogger Anda tanpa harus melalui semua menu dan fungsi editing sehingga template Anda bisa menjadi milik Anda sendiri. Apakah Anda memiliki beberapa pekerjaan yang harus dilakukan? Tentu - tapi Firebug melakukan semua pekerjaan utama untuk Anda.

Yang harus Anda lakukan adalah memiliki pikiran kreatif dan beberapa menit untuk membuat perubahan pada desain pengkodean. Apakah Anda pernah coding selama bertahun-tahun atau baru memulai blog pertama Anda, inilah cara terbaik untuk memastikan bahwa pengunjung Anda memiliki pengalaman terbaik!.... Terima kasih..
Avertisement
Comments