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:
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....
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....
12 komentarPosting Komentar
Info yang sangat berguna,... Terima kasih sobat.
hehe-hehe. elmu lg ni.
sorry, jd hrs install dulu google chrom ye???
lagi, info yg bermanfaat dari kang enEs. Siip, kang!
wah ini dia sob yang aku cari.. makasih ya :)
Blom pake google chrome sob
Numpang komen jg ni...infonya sangat bermanfaat...good postng.Tapi sayang aku ga bs langsung dnlwd googlenya...krn aku komen via mobile...sukses selalu friend
@Rev Setiawan, J-T, Ivan, Ica, Irva, Kokok9love:
Terimakasih atas komennya, semoga bisa diterapkan. Mudah, gampang dan bisa membuat kita lebih banyak tahu ttg kode HTML dg insfect element ini sob...
wue blog komplit, terimakasih.
wah mantep bos dadi ngerti cara gunak kene suwun yo
permisi mas mau tanya kalau edit templatenya blogger langsung di google chrome bisa gak?
trims
gan cara mengsave bagaimana mengapa kalau kembalu kok default lagi
mantap kakak coba dah
Tambahkan Komentar
Terimakasih atas semua apresiasi yang sobat berikan.