Coding, Tools

Cara Mengedit Template Blog Menggunakan Developer Tools

Cara Mengedit Template Blog Belajar Coding

Pengetahuan tentang bagaimana cara mengedit template blog, setidaknya memang harus dimiliki oleh seorang blogger. Minimal bisa tahu dasarnya saja sudah lumayan. Ketimbang tidak tahu sama sekali. Walaupun tidak salah juga kalau misalkan Anda lebih memilih untuk tidak mau ambil pusing. Karna sudah banyak juga kok template blog yang keren-keren yang bisa langsung Anda gunakan dengan secara praktis.

Nah, untuk Anda yang saat ini mungkin sedang penasaran atau punya keinginan untuk tahu gimana cara memodifikasi blog agar lebih menarik, kita bisa belajar bareng-bareng disini. Saya akan coba bahas dengan cara yang sangat sederhana, yang mudah-mudahan diakhir tulisan ini nanti Anda bisa praktekkan sendiri sampai berhasil.

Cara Mengedit Blog : Antara HTML dan CSS

Hal dasar pertama yang harus Anda tahu adalah dua hal dari bagian yang menyusun suatu template blog, yaitu HTML dan CSS. Jadi, secara sederhana tampilan blog Anda yang muncul di browser pengunjung itu terdiri dari dua bagian itu. Meski ada lagi bahasa program yang lain, tapi Anda tidak usah repot-repot. Untuk sekedar memodifikasi tampilan blog dengan HTML / CSS saja sudah bisa.

Poin yang perlu Anda ingat adalah kegunaan masing-masing. Ketika Anda mau ubah letak susunan dari template blog Anda, sebaiknya edit bagian HTML. Ketika Anda hanya mau ubah warna, ukuran, dan semacamnya, cukup edit bagian CSS saja. Ketika ada kesalahan saat Anda mengubah kode-kode CSS, konten Anda tetap terlihat di browser. Tapi kalau Anda salah ketik kode HTML, maka konten atau elemen di blog Anda bisa hilang atau gak muncul di browser. Jadi resikonya Anda sudah tahu kan? 😀

Tenang, tidak usah khawatir dulu. Kita masih belum mulai.

HTML itu yang gimana? Contohnya ini :

Kalau CSS yang gimana? Contohnya ini :

Cara bedakannya gampang, kalau yang HTML sering pakai tanda <> dan CSS sering pakai {}. Lebih lengkap mengenai materi coding HTML dan CSS di postingan berikutnya nanti akan kita bahas lagi.

Cara Mengedit Template dengan Developer Tools Chrome

Developer Tools adalah sebuah alat yang bisa digunakan untuk eksperimen (simulasi) secara langsung mengedit template blog dari browser Chrome. Jadi disini kita belum benar-benar menyimpan perubahan di template blogspot atau wordpress kita. Supaya apa? Paling tidak kita bisa lihat dulu perubahannya gimana, kalau bagus dan cocok baru nanti kita copy paste kode HTML/CSS dari developer tools ke template blog kita.

Untuk menggunakan tools ini Anda buka dulu alamat blog Anda dari Chrome, lalu klik kanan dan pilih Inspect. Atau bisa dari menu pojok kanan atas Chrome pilih Other Tools > Developer Tools (Alat Pengembang).

Tampilannya seperti ini :

Cara Mengedit Template Blog

Yang di sebelah kiri adalah baris-baris kode HTML sedangkan yang di kanan adalah baris kode CSS.

Poin penting yang perlu diingat, ketika misal saya mengarahkan pointer dan select di salah satu baris kode HTML seperti yang diatas saya pilih <div class="post-entry-content content"> maka di sebelah kanan akan muncul kode CSS yang sama dengan nama class dari elemen yang kita pilih tersebut. Jadi keduanya saling berkaitan dan tools ini akan menampilkan CSS-nya secara otomatis.

Akan berbeda ketika Anda mengedit blog langsung melihat ke file template-nya. Anda yang masih bingung pasti makin pusing mencari-cari antara mana kode HTML yang mau diedit dan mana pasangan CSS-nya. Dan resiko kesalahan jadi lebih tinggi.

Karna tools ini bisa dipakai untuk simulasi, Anda bisa mengubah-ubahnya sesuka hati. Coba saja klik kanan di bagian kode HTML yang manapun terserah Anda. Nanti ada pilihan edit HTML. Atau Anda bisa double click langsung di kode-kodenya dan tambahkan atau ubah atribut dari HTML. Men-copy lalu paste di bagian lain juga bisa.

Untuk CSS juga sama Anda bisa ubah dengan klik saja di bagian property style apa yang diinginkan. Dan untuk valuenya juga biasanya ada saran yang muncul mau diisi apa. Anda bisa coba hilangkan tanda centang dari salah satu baris property dan lihat apa yang berubah dari tampilan blog Anda secara langsung. Kalau mau tambahkan selector lain juga bisa klik tanda + di pojok kanan atas.

Dari browser Mozilla juga ada.

Inspect Element dari Browser Mozilla

Kurang lebih cara penggunaannya sama dengan yang dari browser Chrome. Paling tampilannya saja yang agak berbeda.

Cara Mengedit Template Blog Sendiri Inspect Element

Sepertinya kalau saya jelasin cuman dari tulisan seperti ini memang berasa kurang lengap yaa. Kalau saya ada banyak waktu luang nanti saya akan coba buatkan penjelasan yang lebih detail dalam bentuk video.

Sebenarnya dengan bantuan tools ini Anda bisa banyak belajar cara mengedit blog sendiri. Untuk bahan latihan Anda bisa coba cari template dalam bentuk HTML dan plus ada CSS-nya. Nanti Anda buka dari browser Chrome atau Mozilla, lalu coba-coba lakukan editing apapun terserah Anda. Untuk awalnya Anda bisa bermain-main dengan beragam jenis properti yang ada di CSS.

  • Gimana supaya ukurannya bisa berubah.
  • Gimana supaya letaknya bisa di kanan atau di kiri.
  • Gimana supaya warna dan jenis fontnya bisa diubah.

Sudah dulu aja yaa, lama-lama baca tulisan ini juga nanti yang ada Anda malah makin pusing. Saya sendiri juga bingung ini lagi nulis apaan. Hahaha.. Tapi kalau ternyata Anda sudah bisa ngerti yang saya tulis diatas Alhamdulillah, kalau enggak iyaa abaikan saja. 😀

Kedepan kalau masih tetap bisa konsisten di ChaidirWeb.Com, saya mau coba buatkan beberapa tutorial dengan kategori Coding tentunya yang lebih serius dari tulisan hari ini. Dengan penjelasan mulai dari dasar sampai Anda bisa mahir. Saya sendiri juga masih belajar jadi maklum kalau tutorialnya banyak kekurangan. Tapi gak masalah karna kita tetap bisa saling diskusi supaya bisa saling melengkapi. Ceileeeh.. saling melengkapi kayak pasangan aja!

Saya yakin sampai disini Anda pasti punya ide atau tanggapan, sok silahkan tulis di komentar yaa.

Sampai jumpa besok!

Ikutan Diskusi Disini GRATIS! Punya Tanggapan?

Komentar Anda* :

Nama Anda* :
Website Anda :