Menggunakan Google Chrome Mendesain Blog

Google Chrome memiliki kemampuan yang sangat baik yang memungkinkan Anda untuk melihat bagaimana desain blog Anda  menyesuaikan pengaturan yang anda lakukan. Anda dapat mendesain ulang atau mengedit  gaya situs web apapun keinginan Anda menggunakan Chrome. Selain merancang template, salah satu hal yang membutuhkan waktu banyak yang alignment objek pada bagian <div>. Properti margin dan padding juag bisa membuat kepala sakit jika Anda tidak terbiasa dengan alat seperti Chrome.  Anda juga dapat melihat kode CSS properti seperti jenis font dan efek sebuah situs yang digunakan. Semua ini dilakukan menggunakan Perangkat Pengembang yang disediakan oleh Google Chrome. Yang memungkinkan Anda untuk mengedit CSS, HTML dan Script dari setiap website online Anda. Saya yakin Anda akan menikmati tutorial ini.

Desain Menu Menggunakan Chrome

Sebelum menggunkan  perangkat ini terlebih dahulu anda download dan instal Google Chrome pada Laptop atau PC anda. Jika belom anda download, silahkan Download di Sini.

Setelah melakukan kedua hal (Download dan Intal) di atas, silahkan buka blog/site yang akan anda edit.

Kita ambil contoh untuk engedit Menu Navigasi Blog.

Silahkan klik kanan pada blog anda (dimana aja boleh), kemudian pilih "Periksa Halaman/Inspect element" seperti gambar di bawah ini

Maka tampilannya akan tampak seperti gambar berikut ini

Dengan Memilih "Periksa elemen" akan membuka jendela baru dengan dua kolom. Kolom pertama (sebelah kiri) menunjukkan HTML utama  dari blog Anda dan kolom kanan menampilkan gaya CSS yang diterapkan pada setiap bagian <div> pada blog anda.
Ketika Anda bergerak ke atas atau bawah kursor mouse anda ke atas tag <div> di bagian HTML anda akan melihat daerah yang sedang disorot jelas di dalam blog Anda. Karena saya mengklik navigasi sub karena itu bagian <div> untuk navigasi sub disorot secara default di bagian html dan saya dapat dengan jelas melihat gaya CSS yang muncul di sebelah kanan bawah kolom CSS. Berikut adalah gaya CSS untuk navbar seperti yang ditunjukkan pada kolom CSS:

#catmenu {
margin: 0px;
padding: 0px;
width: 962px;
background: rgb(37, 37, 37) url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj06Pk3GsrpyIkdVOrirq-LHjCY-SWstOhu_z_yIXhS7SMk1tb2f5wn0EQI6Q425iZlgj0SHP28-m_qFzA80Wqud_gJSwQAUxWeACoWfL_5aAln5vuNGmLHbZ4weE2zixctfajKkZI9kX_V/) repeat-x;
height: 33px;
}

Anda dapat melihat gambar yang disediakan dengan 7 sifat yang berbeda. Kita dapat mengubah warna latar belakang dari menu, kita bisa mengatur lebar dan tinggi, warna font, perbatasan dan keselarasan menggunakan margin dan padding. Untuk mengedit properti apapun hanya klik dua kali dan mengubahnya. Mari kita mengubah latar belakang Merah.Untuk mengedit backgroundnya silahkan lakukan double klik pada kode warnanya tersebut. Sehingga tampak seperti gambar di bawah ini

Sehingga tampilannya tampak seperti di bawah ini:

perubahan yang terjadi

Selain tiu juga sobat blogger dapat mengubah sifat-sifat yang terdapat pada elemen blog Anda. Mungkin lebih jelasnya sobat blogger dapat mempraktekkannya sendiri. Jika ada pertanyaan silahkan tinggalkan komentar di bawah ini. Semoga bermanfaat, dan mohon maaf jika ada kesalahan. (Jkt/2012)