Cara Menambahkan Gambar di HTML Blog

Cara Menambahkan Gambar di HTML Blog - Kita akan membahas bagagaimana Cara Menambahkan Gambar di HTML Blog.

Menambahkan minimalnya satu gambar pada suatu postingan blog sangat bermanfaat sekali.

Terutama untuk mendatangkan pengunjung melalui google pencarian gambar (Google Image). Selain itu, juga untuk menarik perhatian secara visual dan memperjelas isi artikel.

Jika Anda ingin menambahkan gambar pada postingan blog Anda, berikut ini langkah-langkah yang dilakukan dari tahap persiapan, upload, dan pengeditan agar postingan Anda lebih SEO.

#1 Persiapan

Sebelum menambahkan gambar ke HTML atau postingan blog, Anda perlu menentukan gambar dengan ukuran yang tepat.

Khususnya untuk Anda pengguna Template Lajang, ukuran gambar yang direkomendasikan adalah gambar dengan rasio 16:9.

Misalnya, jika ukuran lebar gambar Anda 160px, maka tinggi gambar Anda 90px. Silahkan kunjungi web Calculate Aspect Ratio untuk menentukan lebar dan tinggi gambar Anda jika menggunakan rasio 16:9.

Setelah menentukan ukuran gambarnya, silahkan kompress dulu agar gambar Anda lebih ringan dan kalau bisa ubah ke format webp. Untuk mengompress ukurang gambar Anda, bisa lakukan secara online di iloveimg dan untuk mengubah format file dari JPG ke WEBP, silahkan kunjungi convertio.

#2 Proses Upload

Jika Anda telah menyiapkan gambar Anda, untuk menambahkan gambar Anda ke postingan blog Anda, silahkan lakukan dengan langkah-langkah berikut ini.

1. Login ke Blogger.
2. Di kiri atas, pilih blog yang ingin ditambahkan gambar.
3. Klik postingan yang ingin Anda edit atau buat postingan baru.
4. Di bagian atas, klik "Sisipkan gambar".
5. Pilih dari mana Anda ingin mengupload gambar.
6. Pilih satu atau beberapa gambar, lalu klik Sisipkan.

Untuk lebih lengkapnya, baca di Bantuan Blogger Di Sini.

#3 Edit Agar SEO

Setelah Anda berhasil mengupload gambar di blog Anda, kode HTML-nya kurang lebih akan seperti di bawah ini.

<div class="separator" style="clear: both;"><a href="https://blogger.googleusercontent.com/img/a/AVvXsEjbz27U_2TWuBKp5hoq5CfcjpAFvjxNquf7Gn5owUnPYMyqsuepwq93VO0ao8Xdb_kkwwax4ESksaEXAE4ULnKVEWaNjXf-4EN7y7H_efTLgO2PwCw8vLVbI1nA7OceIGemSGI98PqKtaSI2aDMZI6MO4XbH7Lxf94tAXjlhm3EK81esdbuxKNKJZz6=s192" style="display: block; padding: 1em 0; text-align: center; "><img alt="" border="0" width="320" data-original-height="192" data-original-width="192" src="https://blogger.googleusercontent.com/img/a/AVvXsEjbz27U_2TWuBKp5hoq5CfcjpAFvjxNquf7Gn5owUnPYMyqsuepwq93VO0ao8Xdb_kkwwax4ESksaEXAE4ULnKVEWaNjXf-4EN7y7H_efTLgO2PwCw8vLVbI1nA7OceIGemSGI98PqKtaSI2aDMZI6MO4XbH7Lxf94tAXjlhm3EK81esdbuxKNKJZz6=s320"/></a></div>

Tulisan tebal tersebut merupakan tempat URL GAMBAR Anda nantinya. Sekarang Anda bisa menampilkan gambar Anda dimana saja yang Anda inginkan di dalam HTML blog Anda dengan menuliskan kode HTMLnya berikut ini.

<img src="URL GAMBAR ANDA" alt="JUDUL ATAU NAMA GAMBAR ANDA" width="300px" height="250px"/>

Ubah ukurannya sesuai dengan ukuran gambar Anda yang telah Anda tentukan. Jika Anda menerapkannya dengan benar, maka gambar akan tampil seperti di bawah ini.

Kita bisa membungkus kode di atas agar gambar berada di tengah postingan dengan cara berikut ini.

<div style="text-align: center; "><img src="URL GAMBAR ANDA" alt="JUDUL ATAU NAMA GAMBAR ANDA" width="300px" height="250px"/></div>

Hasil:

Demikianlah Cara Menambahkan Gambar di HTML Blog, semoga bermanfaat.

Buka lainnya di Tutorial HTML untuk Blogger Pemula.