Now Reading
Inspect Element Untuk Modifikasi CSS

Inspect Element Untuk Modifikasi CSS

Memodifikasi template merupakan pekerjaan tersendiri. Untuk mendapatkan template yang ramah mesin pencari, ringan saat loading, dan nyaman dibaca tentunya membutuhkan kemampuan dasar yang mau tidak mau harus dikuasai. Walaupun banyak tersedia template gratis, namun tidak sedikit juga yang merasa kurang puas dengan template gratisan tersebut.

Ada beberapa kekurangan yang kadang dimiliki oleh template gratis. Pertama adalah dibenamkannya script yang terlalu banyak, sehingga memperlambat loading blog. Kedua, tidak mudahnya memodifikasi kode yang sudah ada. Ketiga, proses editing template yang tidak mudah karena sifatnya yang gratis sehingga tidak dapat mengganti sesuai keinginan. Dan tentunya masih banyak kekurangan lainnya.

Jadi apa yang harus dilakukan? Hal termudah adalah dengan menggunakan template bawaan dari platform, untuk kemudian dilakukan modifikasi seperlunya untuk tampilan sesuai keinginan. Template bawaan, sifatnya lebih ringan karena tidak ada script berat yang dibenamkan dan dapat menyesuaikan tampilan sesuai keinginan. Selain itu, minimalis akan selalu menjadi desain yang terbaik bukan.

Hal dasar untuk memodifikasi tampilan adalah dengan mengubah CSS. CSS itu sendiri adalah kode yang dapat mempercantik setiap bagian dari template. Bahasa mudahnya adalah pakaian. Jadi blog tersebut menggunakan baju warna merah, celana hitam, dengan asesoris. Dengan kode CSS inilah kita dapat menentukan setiap warna atau asesoris setiap bagian.

Kode CSS contohnya berbentuk seperti di bawah ini :

body {
font-size: 20px;
font-family: “Arial”, Times New Roman;
color: #444444;
}

Akan tetapi saat ingin mengubah dan mengimplementasikan CSS, kita memerlukan kode di elemen yang tepat. Seperti misalnya ingin mengubah ukuran font tulisan menjadi besar, maka penggantian ukuran juga harus pada elemen yang tepat. Pada saat inilah kita membutuhkan fitur Inspect Element pada browser. Baik itu Mozilla Firefox, Safari, maupun Chrome. Semua browser akan selalu dilengkapi dengan fitur Inspeksi setiap elemen.

Dengan fitur ini, kita dapat melakukan inspeksi pada setiap bagian yang ingin kita rubah CSSnya. Bahkan kita langsung dapat mengganti dan melihat hasilnya seperti apa. Baru setelah dirasa cocok, kita bisa memasukkan kodenya pada kode editing blog. Semua kode CSS dapat diimplementasikan. Seperti misalnya mengubah judul di tengah, menghilangkan bayang-bayang, atau menambah garis.

Klik Kanan dan Klik Inspect Element

Langkah mudah untuk fitur Inspect Element ini adalah dengan klik kanan pada blog yang akan diedit kemudian pilih Inspect Element. Kemudian akan keluar box yang ada di bawah dan klik icon pembesar pada kiri atas box. Setelah itu bisa langsung mengarahkan kursor pada element yang akan diubah. Sedangkan box sebelah kanan adalah rangkaian kode CSS yang dimiliki oleh elemen tersebut. Baru kemudian, kita bisa menambahkan atau mengurangi kode yang sudah ada.

Bagian 1

Icon pembesar untuk mengarahkan kursor dan menunjukkan bagian HTML dari elemen tersebut.

Bagian 2

See Also

Bagian elemen yang dimaksud. Akan ada highlight sehingga menunjukkan posisi elemen yang benar.

Bagian 3

Kode CSS yang dapat kita modifikasi. Bisa menghapus dan menambahkan kode sesuai keinginan. Setelah dirasa sudah pas, maka kode tersebut baru kita pindahkan ke dalam kode editing blog. Kode yang kita ganti pada Inspect Element hanya bersifat sementara dan melihat hasil dari penggunaan kode.

Mencari Error Pada Blog

Fitur Inspect Element ini juga dapat digunakan untuk mencari error pada blog. Seperti misalnya ada link yang tiba-tiba muncul, ada elemen tambahan, dan muncul kode-kode aneh. Dengan menemukan asal muasal kodenya melalui Inspect Element, maka hal ini akan mudah diatasi. Maka jangan ragu untuk mencoba dan bereksperimen dengan Inspect Element.

Selamat mencoba 🙂

View Comments (24)

Leave a Reply to liza Cancel reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

© 2015 Blogger Perempuan Network.
All Rights Reserved.

Scroll To Top