Aug 19, 2018

Cara Sederhana Ngoprekkin Kode HTML Di Blogger


Salah satu momok dalam ngeblog adalah soal kustomisasi desain blog. 


Nah, yang suka bikin garuk-garuk kepala dalam mengkustomisasi desain blog, apa lagi kalau bukan kode HTML. Kombinasi teks dan angka tanpa makna di mata orang awam seperti saya.

Saya sendiri suka desain-desain blog yang simpel dan minimalis

Saya pernah blunder ngoprek-ngoprek kode HTML dan berakhir dengan kegagalan. Yang bikin frustasi adalah, saya nggak tahu gimana caranya ngebalikin ke kondisi awal. Nggak ngerti mana yang musti dibenerin.

Akhirnya, daripada pusing-pusing, saya ambil lah desain blog gratisan di beberapa situs penyedia desain blog seperti gooyabi templates dan new blogger theme

Nyatanya, walaupun dengan template 'siap saji' pun, saya masih harus berhadapan dengan yang namanya kode-kode HTML, untuk mengkustomisasi menu bar maupun alamat media sosial di clickable icon

Akhirnya saya mau nggak mau belajar sendiri gimana caranya ngedit HTML.

Seiring berjalannya waktu ditambah latihan (karena walaupun waktu berlalu tapi nggak ngapa-ngapain ya sama aja bohong), saya mulai bisa melihat pola dalam editing HTML ini. Pola alias prinsip dasar dalam mengedit kode HTML.

Analogi Restoran
Saya melihat oprek-mengoprek kode HTML ini seperti sebuah restoran (berlaku juga di depot, dan warteg). Kode HTML itu ibarat dapur, sedangkan menu restoran adalah tampilan blognya.

Artinya, apa yang ditampilkan di menu restoran harusnya ada barangnya di dapur kan? Kalau di daftar menu ada Steak Daging, artinya di dapur ada daging toh ya. Lak lucu kalau katanya ada Steak, giliran dipesan, njeketek dagingnya nggak ada.

Demikian pula dengan blog. Yuk kita cek penampakan blog berikut ini.


Coba tengok di area menu bar. Di situ ada beberapa opsi seperti: home, business, sampai uncategorized.

Nah, kembali ke analogi restoran tadi. Tampilan blog seperti ini ibarat menu yang dipegang oleh pelanggan. Kalau di menu ada, jadi di dapur (kode HTML) harusnya ada juga kan?

Jadi ini yang saya lakukan,

  1. Masuk ke Theme di dasbor Blogger
  2. Klik Edit HTML
  3. Cari teks 'business' menggunakan Ctrl+F
  4. Ganti tanda pagar ('#') dengan alamat url salah satu menu saya (misal menu profil), lalu ganti teks business yang berwarna hitam dengan profil
  5. Save theme dan tampilan pun berubah

Lesson Learned
Kustomisasi menu adalah salah satu dari sekelumit proses mengedit kode HTML yang cukup ruwet beberapa waktu lalu, ketika awal-awal ngeblog. Namun setelah mengetahui caranya ada beberapa kesimpulan yang saya tarik:

  • Begin with the end, tentukan dulu mana yang mau dikustomisasi, kemudian masuk menu dasbor dan edit HTML-nya
  • Cara sederhana mengkustomisasi tampilan blog adalah menggunakan Ctrl+F
  • Kode HTML dibuat berwarna-warni, tapi untuk merubah tampilan teks, carilah teks berwarna hitam
  • Setiap halaman (misal About Me) ternyata ada alamat link-nya
  • '#' adalah tempat untuk meletakkan alamat link yang diinginkan (misal halaman about me)
Jadi begitulah cara saya (yang nggak jago kode HTML) mengkustomisasi tampilan blog melalui HTML. Semoga bermanfaat dan nggak mbingungi

Kalau kamu mau coba, sebaiknya gunakan komputer or laptop. Kalau handphone dipakai buat nulis postingan aja.

Oya, in case saya lupa nyebut...tips ini berlaku untuk platform Blogger ya.

Kalau kamu punya pengalaman lain seputar kustomisasi blog via HTML boleh berbagi di kolom komentar. Like or share kalau menurut kamu postingan ini bermanfaat.

See you at next post!

Share:

6 comments:

  1. Makasih tips dan infonya...soalnya aku juga gaptek klo soal html ini..

    ReplyDelete
    Replies
    1. Semoga bermanfaat ya...monggo dicoba-coba 😊

      Delete
  2. Koneksi suka mempengaruhi juga. Perlu kekuatan sinyal

    ReplyDelete
  3. Memang butuh waktu dan ketelatenan kalau ngoprek sendiri. Tapi puas kalo berhasil

    ReplyDelete

Semua komentar masuk akan dimoderasi terlebih dahulu.