Lanjutan posting sebelumnya : Cara mudah modif desain Blogger bagi Pemula-1.
Disini kita akan memulai dengan penggunaan Dev Tool atau Developer Tool alias Peralatan untuk Pengembang dalam hal ini pengembang website tentunya.
Mengenai Dev Tool ini juga pernah secara diulas ringkas pada postingan :
Tips Modifikasi Desain Blog.
Disini kita akan memulai dengan penggunaan Dev Tool atau Developer Tool alias Peralatan untuk Pengembang dalam hal ini pengembang website tentunya.
Mengenai Dev Tool ini juga pernah secara diulas ringkas pada postingan :
Tips Modifikasi Desain Blog.
Penggunaan DevTool
Untuk menampilkan Dev Tool, buka halaman yang akan didesain lalu klik kanan mouse > pilih Inspeksi. Cara pintasnya, tekan tombol F12.
Jika diringkas, penggunaan Dev Tool ini sebenarnya hanya 3 tahap namun berulang tentunya, sesuai kebutuhan yaitu :
Sorot
Untuk menyorot Elemen, aktifkan cursor penyorot, caranya klik menu kursor dibagian pojok kiri atas jendela Devtool lalu sorot elemen / bagian halaman mana yang akan didesain.
Pada saat elemen tersorot, secara otomatis kode sumbernya akan ditampilkan pada kolom yang tersedia.
Klik kembali menu kursor penyorot untuk menon-aktifkan fungsi penyorot.
Klik
Jika sudah disorot, Klik untuk menampilkan kode sumbernya.
Kolom kiri menampilkan kode HTML dan bagian kanan menampilkan CSS.
Kode sumber pada kedua kolom ini dapat diedit untuk menyesuaikan tampilannya. Namun ini bersifat sementara karena jika halaman di refresh / muat ulang maka kode sumbernya akan kembali seperti semula kecuali hasil edit kodenya sudah di Copy Paste dan diterapkan dalam Tema.
Edit
Untuk mengedit kode sumber elemen baik itu HTML atau CSS, klik dtepat rangkaian kodenya.
Untuk kode HTML / kolom kiri cara editnya, klik baris kode HTML nya lalu klik kanan mouse dan pilih opsi Edit HTML.
Untuk bagian CSS, sekali klik langsung bisa diedit untuk dihapus / diubah atau diganti kodenya.
Kelebihan lain DevTool ini untuk edit CSS tersedia fitur isi otomatis, dengan fitur ini kita juga bisa lebih banyak mengetahui kode-kode CSS yang bisa digunakan pada suatu kode. Karena tiap kode akan ditampilkan pilihan kode pasangannya secara keseluruhan, tinggal kita pilih saja mana yang ingin digunakan.
Bantuan memilih warna juga tersedia Color Picker :
Terakhir, jika hasil edit dengan bantuan Devtool ini dirasa sudah cocok, untuk menerapkannya, Copy kode yang sudah di edit :
Lalu paste / letakkan didalam Tema blog kamu kemudian simpan, buka link nya dan lihat hasilnya.
Selamat Mencoba.
Terakhir, jika hasil edit dengan bantuan Devtool ini dirasa sudah cocok, untuk menerapkannya, Copy kode yang sudah di edit :
"Mengawali suatu pekerjaan baru itu selalu terasa sulit
Tapi mereka yang sudah mahirpun mengawalinya dengan perasaan yang sama"