What is Inspect Element? Cara Edit Template Blogger Melalui Inspect Element

What is Inspect Element? Cara Edit Template Blogger Melalui Inspect Element

Apa itu Inspect Element ?

Inspect Element adalah Tool pada browser yang digunakan untuk memeriksa dan menguji halaman secara Live preview. Inspect Element memungkinkan Anda memeriksa skrip situs web dan berbagai elemennya. Katakanlah Anda ingin tahu bagaimana mereka menata tombol tertentu dari sebuah situs web, Anda dapat menggunakan Inspect Element untuk melihat tatanan pada template situs tersebut.

Cara membacanya tergantung pada pengetahuan Anda dalam pemehaman HTML, CSS dan JS. Jika Anda cukup tahu Anda harus bisa memahaminya. Namun, jika tidak, Anda harus mencoba mempelajari setidaknya dasar-dasar HTML dan CSS. Ini adalah cara termudah untuk mengedit halaman web di browser. Ketika kita mengklik Inspect Element di browser, maka akan muncul banyak tab di mana elemen, konsol, aplikasi, sumber dll ada. Ini menunjukkan kode halaman web seperti html, css, js.

Apa Yang Bisa Dilakukan Dengan Inspect Element?

1.Tempat edititor Html dan Css

2. Pengujian Responsif Website

3. Mengukur Kecepatan Web

4. Debugging Javascript

5. Alat untuk Audit Web seo

6. Mengukur Performa Memori dan CPU

Bagaimana Mengedit Template Dengan Bantuan Inspect Element?

1. Download aplikasi Opera mini (rekomendasi) untuk PC atau browser lain seperti Chrome, Mozila.
2. Login ke blog anda.
3. Pilih menu tema, klik edit html. Setelah itu akan muncul kotak yang berisi Html. biarkan
4. Buka alamat blog anda atau dengan klik tulisan "lihat blog" tepat dibawah nama blog
5. Setelah blog anda muncul lalu  Klik kanan pada tempat yang akan ada ubah. Disini saya akan

    merubah bagian pada cloud pada label

Add caption

6. lihat lah gambar dibawah ini 

• pada live preview menunjukan bahwa lokasi cloud yang berwarna pink tersebut berada pada span.label-size.label-size-4
• Pada element html anda menemukan "label-size label-size-4" yang berada pada tag span
• kemudian anda perhatikan pada bagian tampilan cssnya . cloud tersebut berada pada .label-size:nth-child(1)

7. Disini saya akan membuat cloud tersebut menjadi radius (lenkungan sisi). saya akan menambah
    kan kode border-radius:8px dibawah background

8. Perhatikan gambar diatas cloud label berhasil diterapkan. selanjutnya anda merapkannya pada
    template html blog anda.

9. Cari kode .label-size:nth-child(1) di pencarian dengan menekan tombol CTRL+F .

10. kemudian tambahkan border-radius:8px  didalam kurung setelah background .

11. Lakukan hal yang sama pada .label-size:nth-child dibawahnya. Kemudian simpan template dan          lihat hasilnya.

Informasi

Didalam menu inspector ada kumpulan file html, sedangkan di menu rules menyajikan kode css nya. Agar lebih mudah kamu bisa mencari layout mana yang akan diedit dengan cara klik icon "pick an element from the page" yang ada di pojok kiri inspector. Kamu juga bisa mengedit disitu dan itu tidak akan secara langsung mengganti tema kamu.

#keyword command
cara edit template
redesign web pemula
belajar design