Sabtu, 07 Desember 2013

Browse Manual » Wiring » » » » » » » » » Editing Template Dengan Memanfaatkan Inspect Elements Google Chrome

Editing Template Dengan Memanfaatkan Inspect Elements Google Chrome

Pusing dengan kode-kode HTML template yang seabreg?. Memang, apabila kita mengedit HTML template, kita akan menemui begitu banyaknya kode-kode perintah yang letaknya kadang tidak berurutan dan kadang pula tidak diberi keterangan mengenai kegunaan perintah tersebut. Tentu saja ini akan memusingkan kita, bahkan jika kita salah dalam mengubah kode-kode tersebut maka akan terjadi dua kemungkinan: pertama, template kita tidak dapat di-parse, atau kedua, sekalipun bisa di-parse tapi tampilan blog kita menjadi amburadul.

Nah, untuk mengatasi masalah tersebut kamu bisa memanfaatkan browser Google Chrome. Dengan browser ini kita bisa mengetahui letak, warna, margin, padding, dll. dari elemen yang kita periksa. Dengan informasi mengenai elemen-elemen tersebut akan memudahkan kita dalam melakukan perubahan-perubahan tata letak sesuai dengan yang kita inginkan.

Misalnya kita akan memeriksa gambar yang terletak di samping judul, kita dapat melakukan langkah-langkah berikut:
  • Klik kanan mouse kamu sehingga muncul kotak dialog seperti nampak pada gambar berikut:

  • Kemudian klik pada bagian Periksa elemen (Inspect elements), sehingga muncul kotak dialog seperti gambar berikut:

    Dengan melihat kotak dialog ini kamu dapat mengetahui posisi class gambar, sumber gambar, margin dan padding untuk gambar tersebut, sehingga akan memudahkan kamu jika ingin melakukan pengeditan.

Selain untuk memeriksa elemen yang dipilih seperti pada contoh di atas, inspect elements ini juga dapat dilakukan di sembarang tempat. Caranya mirip seperti langkah pertama tadi, kemudian setelah muncul kotak dialog kamu klik salah satu elemen yang kamu inginkan, misalnya elemen post, maka elemen yang kamu pilih akan diblok sehingga kamu bisa mengetahui keberadaan elemen tersebut pada blog kamu, seperti nampak pada gambar berikut:

Kamupun dapat mengetahui lebih lanjut mengenai margin dan padding elemen dengan mengklik pada bagian Metrics, seperti nampak pada gambar di atas.

Nah, cukup mudah kan? Memang setiap browser memiliki kelebihan dan kekurangan. Jika pada Firefox dan Flock dapat ditambahkan Add-ons kedalamnya tetapi tidak bisa melakukan Inspect elements, sedangkan pada Google Chrome tidak bisa ditambahkan Add-ons tetapi bisa melakukan Inspect elements. Namun ada kesamaan dari ketiga browser ini yaitu sama-sama bisa melakukan Periksa sumber halaman (Inspect page source), yang kegunaannya untuk memeriksa sumber halaman yang terindeks dari blog kita.

Ok coy, selamat mencoba....

Tidak ada komentar:

Posting Komentar