Cara Edit HTML dan CSS dengan Mudah Untuk Pemula - Kebanyakan pemula (newbie) seperti saya ini bingung ketika ingin mengedit bagian HTML di blog. Kasus yang sering terjadi sih, saat kita mau mengedit bagian HTML atau CSS-nya tapi bingung bagian mana yang harus kita edit.
Baca juga: Pengaturan DNS Dasar Untuk Pengguna Blogspot
Oiya, sebelumnya masalah judul yang ada embel-embel 'pemula'-nya bukan berarti penulis ini sudah master ya. Sama, saya juga masih sangat newbie. Hanya saja ingin berbagi sedikit pengalaman tentang edit HTML dan CSS di blog ini.
Untuk menuju bagian Edit HTML, masuk ke dashboard lalu pilih Template dan klik tulisan Edit HTML. Sebenernya sih, dibagian Edit HTML isinya bukan hanya bahasa HTML saja, banyak juga bahasa web lainnya seperti CSS, JavaScript, dll. Karena masih newbie, biasanya sih yang diotak-atik hanya seputar HTML dan CSS. Sedangkan bahasa lainnya dibiarkan saja karena masih nggak ngerti fungsinya buat apa - saya banget ini mah, hehe.
HTML itu sendiri artinya Hyper Text Markup Language yang fungsinya untuk mengatur susunan elemen-elemen atau struktur yang akan ditampilkan dalam sebuah halaman web. Sedangkan CSS adalah Cascading Style Sheet yang fungsinya untuk mengatur tampilan / bentuk / style dari elemen-elemen pada sebuah halaman web. Sebenarnya HTML juga bisa sih mengatur tampilan, namun akan lebih efektif dan terorganisir jika menggunakan CSS. Nah, jadi HTML tanpa CSS itu sama dengan berantakan.
Okeh, udah basa basinya lanjut ke pembahasan utama mengenai cara edit HTML dan CSS dengan mudah di blog. Sebagai contoh, saya mau mengedit blog initehbukan.blogspot.com dengan mengunakan Mozilla. Bagian yang akan diedit adalah menu horizontal dibawah header. Simak langkahnya dibawah ini.
Edit CSS
Kita akan mengubah style menu pada CSS. Yang tadinya menu background berwarna merah akan diubah menjadi kuning dan warna font menjadi hitam.
1. Buka Edit HTML dan juga halaman blog-nya
2. Pada halaman blog, klik kanan bagian yang akan diedit (menu atas) lalu pilih Inspect Element (Q). Akan muncul semacam editor dibagian bawahnya.
3. Untuk CSS, kita lihat dibagian kanan. Perhatikan kode-kode tersebut, karena kode itulah yang mempengaruhi sytle dari elemen yang kita pilih tadi. Lihat kode #navbarsecond .dropdown a, kode ini merupakan bagian yang bisa digunakan untuk mengubah style pada elemen tersebut. Namun selain kode yang paling atas ini, kode bagian bawahnya juga berpengaruh terhadap elemen.
Selanjutnya ganti value pada color: yaitu #FFF menjadi #000 (kode hex untuk warna hitam) dan value pada background: yaitu #F53B3C menjadi #FFB432 (kode hex untuk warna kuning). Setelah diganti, lihat perubahan pada menu tersebut. Jika sesuai yang kita inginkan, berarti kode yang tadi diganti bisa diterapkan juga di Edit HTML.
5. Terapkan kode tersebut dibagian Edit HTML. Caranya kita masuk ke Edit HTML lalu cari #navbarsecond .dropdown a maka akan tampil kode-kodenya. Ubah sesuai dengan yang tadi kita inginkan. Menjadi seperti dibawah ini.
6. Selesai, tinggal klik Simpan Template. Untuk edit elemen yang lain caranya juga seperti ini. Sebenarnya cara ini hanya untuk memudahkan kita mengetahui bagian mana yang akan kita edit dan juga sebagai preview hasil yang akan kita terapkan. Jadi pastikan setelah dicoba-coba, langsung diterapkan di Edit HTML-nya.
Edit HTML
Tak jauh berbeda dengan edit CSS, caranya hampir sama. Untuk HTML, kita pakai bagian editor disebelah kiri. Contohnya kita akan menambah menu 'Tes' pada bagian menu atas yang tadi.
1. Contohnya seperti tadi kita klik pada menu Bogor EduCARE lalu klik Inspect Element (Q).
2. Setelah itu lihat pada bagian editor kiri. Karena yang kita pilih tadi merupakan elemen objek, maka kita cari elemen pengaturnya atau kepalanya. Biasanya ditandai dengan kode id pada HTML-nya. Lihat gambar dibawah ini, elemen objek ini mengakar pada <div id="navbarsecond">. Maka pilih bagian <div id="navbarsecond"> lalu klik kanan dan pilih Edit As HTML.
3. Mulai deh kita menambahkan kode-kode HTML. Karena kita akan menambah menu 'Tes', maka tambahkan kode <li><a href="http://initehbukan.blogspot.com/search/label/Tes">Tes</a></li>. Lihat gambar dibawah ini.
4. Setelah itu lihat perubahannya jika sesuai dengan yang kita inginkan, maka salin lagi kode tersebut pada bagian Edit HTML seperti dibawah ini.
5. Selesai deh, menambah ataupun mengubah menu tab di blog dan bagiannya lainnya di blog menjadi semakin mudah karena ada petunjuknya, hehe.
Baca juga: Tes Kemampuanmu Tentang CSS dan HTML
Dengan bantuan seperti ini pastinya kalian nggak kerepotan lagi untuk mengedit HTML ataupun CSS yang ada. Tapi ini juga harus didukung dengan pengetahuan mengenai bahasa-bahasa HTML ataupun CSS. Ya walaupun mengerti hanya sedikit, itu akan sangat membantu.
Sekian sobat, semoga postingan tentang cara edit HTML dan CSS dengan mudah untuk pemula ini dapat dipahami dengan seksama dan dalam tempo yang sesingkat-singkatnya. Depok, 30 Oktober 2015. Atas nama bangsa Indonesia, sampai jumpa.
6 comments