Menambahkan Gambar di Blog : Setelah menguasai teknik membuat link di blog sekarang waktunya menambahkan gambar di postingan blogspot
Artikel tanpa gambara akan terlihat hampa !
Goal kita dalam tutorial kali ini adalah :
- Bisa menambahkan gambar di blog
- Memahami cara terbaik meletakkan gambar di artikel
- Tau cara menghapus gambar di blog
Gambar Di Blog
Sebelum mulai memberi gambar di postingan blog, ada beberapa hal penting yang teman teman harus perhatikan :
- Lebar kontainer gambar / artikel
- Lebar Gambar
- Volume Gambar
- Pixel ratio a.k.a resolusi gambar
Lebar Kontainer Gambar / Artikel
Untuk melihat berapa lebar kontainer gambar atau lebar halaman di artikel silahkan gungakan inspect elemen.
Klik kanan, kemudian klik inspect.
Bila teman teman menggunakan template notable light green, maka lebar kontainer untuk gambar dan artikel adalah 740 pixel.
Lebar Gambar
Kita sudah tau lebar kontainer untuk gambar, sekarang saatnya menyesuaikan lebar gambar.
Bila kita menambahkan gambar dengan lebar melebihi lebar kontainer maka gambar secara default akan di resize seukuran lebar penuh kontainer.
Bila gambar kurang dari lebar kontainer maka gambar akan sedikit ke kiri, biasanya diakali dengan men “center” gambar dengan html jadi gambar akan berada di tengah
Saya juga tidak terlalu suka meng custom html untuk gambar
Dalam kasus mengupload gambar yang lebarnya kurang dari lebar kontainer, biasanya saya akali dengan mengedit gambarnya dengan menambahkan background putih se lebar kontainer
Gambarnya saya letakkan di tengah kemudian save.
Sekarang gambar baru saya lebarnya sama dengan lebar kontainer tanpa harus repot repot nge “center”
Volume Gambar
Jangan pernah menggunakan gambar dengan volume besar untuk artikel website (kecuali memang topik blog adalah tentang gambar)
Kenapa?
Performa blog akan turun karena browser harus mendownload gambar sebelum menampilkan keseluruhan artikel.
Solusinya mudah, tinggal compress gambar dengan tiny png atau tiny jpg, visit tiny png
Pixel Ratio
Tidak perlu bingung dengan istilah, pikel ratio artinya perbandingan lebar gambar dengan tinggi gambar.
Tampilan gambar yang bagus di hp menggunakan perbandingan lebar dan tinggi sebesar 16 : 9
Bila teman teman sulit menyesuaikan perbandingan ratio gambar karena memang tidak memahami ilmu edit gambar maka cukup dicuekin ajah
Ada waktunya di kemudian hari belajar tentang gambar, untuk saat ini pakai saja gambar yang ada.
Cara Menambahkan Gambar di Blog
Seperti biasa, kita akan membuat studi kasus menambahkan gambar di blog sebelum membahas secara menyeluruh apa saja yang telah kita lakukan.
Persiapan :
- Silahkan klik link ini untuk melihat gambar
- Simpan gambar di komputer (klik kanan save image as)
Dummy Text :
<p >
Saya sedang praktek menambahkan gambar di blog berplatform blogspot. Ini adalah gambar batu yang saya upload di blog :
</p>
<p >
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.”
</p>
<p >
“Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
</p>
Cara Menambahkan gambar di Blogspot :
- Buat Postingan Baru
- Beri Judul Latihan 7 : Menambahkan Gambar Di Postingan
- Copy Dummy Text
- Ke Tampilan HTML >> Paste
- Kembali Ke Tampilan Menulis, dari paragraf pertama tekan enter
- Klik sisipkan gambar >> Pilih upload dari komputer kemudian pilih gambarnya
- Teks alternatif tulis menambahkan-gambar-di-blog
- Teks judul tulis Menambahkan Gambar di Blog
- Ke tampilan html >> Klik Format untuk merapikan kode html
- Publikasikan
Seharusnya postingan yang baru saja teman teman buat akan sama dengan postingan yang saya buat, bisa di cek disini
Bila memiliki hambatan, berikut ini adalah animasi cara mengupload gambar di blog : 
Hasil latihan menambahkan gambar milik guru blogger bisa dilihat disini
Setelah praktek, waktunya membahas teori
Menambahkan Gambar di Blog Dengan Kode HTML
Waktunya memahami apa yang baru saja teman teman lakukan
Silahkan kembali edit postingan dan lihat kode html untuk gambar, kurang lebih akan terlihat seperti ini
Bila kita sederhanakan, pada dasarnya kode kode diatas adalah seperti berikut ini :
<div> opening div
<a> opening a
<img/> gambar teman teman
</a> closing a
</div> closing div
Gambar yang baru saja teman teman upload terletak didalam a (link), dan a sendiri berada di dalam div
Kurang lebih seperti itulah bahasa manusianya.
Kedua tag html diatas (tag div dan tag a bisa dihapus), kita hanya butuh kode html untuk gambar (img)
Beberapa tag penting didalam gambar adalah :
Alternate : alt=”menambahkan-gambar-di-blog”
Tag ini digunakan untuk memberitahukan kepada mesin, bahwa ini adalah gambar “sesuatu”,
Kenapa?
Karena mesin tidak bisa mengenali gambar seperti manusia,
Bila teman teman pernah mencari gambar di google lalu mengetik kata tertentu… nhaa google menampilkan gambar gambar yang memiliki alternate sesuai pencarian yang teman teman ketik, itulah fungsinya alternate
Title : title=”Menambahkan Gambar Di Blog”
Title ditujukan untuk manusia, bila teman teman meletakkan kursor (pointer) mouse diatas gambar, maka akan keluar tulisan, itulah fungsi title tag di gambar
Bila teman teman perhatikan lebih detail uraian diatas, pada alt kita menggunakan slash sebagai pemisah kata, sedangkan pada title kita menggunakan spasi (itulah rahasia dari optimasi seo pada gambar)