Cara Menambahkan Gambar di Blog (Blogspot / Blogger)

Cara Menambahkan Gambar di Blog (Blogspot / Blogger)

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 :

  1. Bisa menambahkan gambar di blog
  2. Memahami cara terbaik meletakkan gambar di artikel
  3. 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 :

  1. Lebar kontainer gambar / artikel
  2. Lebar Gambar
  3. Volume Gambar
  4. 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.

cara-menambahkan-gambar-di-blog

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 :

  1. Silahkan klik link ini untuk melihat gambar
  2. 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 :

  1. Buat Postingan Baru
  2. Beri Judul Latihan 7 : Menambahkan Gambar Di Postingan
  3. Copy Dummy Text
  4. Ke Tampilan HTML >> Paste 
  5. Kembali Ke Tampilan Menulis, dari paragraf pertama tekan enter
  6. Klik sisipkan gambar >> Pilih upload dari komputer kemudian pilih gambarnya
  7. Teks alternatif tulis menambahkan-gambar-di-blog
  8. Teks judul tulis Menambahkan Gambar di Blog
  9. Ke tampilan html >> Klik Format untuk merapikan kode html
  10. 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 : cara-menambahkan-gambar-di-blogger

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

cara-upload-gambar-di-blog

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)

Artikel ini adalah bagian dari tips membuat blog dari nol, jangan lewatkan juga tutorial sebelumnya dengan klik tombol daftar isi

Komentar
Silahkan, saya ga nggigit !