Materi 6: Panduan Lengkap Cara Insert / Memasukkan Gambar Pada Postingan Blogger

Pada materi cara membuat postingan sebelumnya, anda sudah mengenal beberapa elemen, toolbar serta setting yang terdapat pada antarmuka pembuatan post. Pada materi ini, kita akan mulai mempelajari bagaimana cara menambahkan gambar pada postingan dengan memanfaatkan menu toolbar yang tersedia.

Daftar Isi:
  1. Upload dan tambahkan gambar ke postingan
  2. Beberapa fungsi (toolbar) pada gambar
  3. Tentang Atribut Title dan Alt pada Gambar
  4. Mengatur posisi gambar sejajar dengan text / paragraf


1. Upload (Menambahkan) Gambar ke Postingan

Disini saya anggap anda telah membaca materi sebelumnya tentang cara membuat post. Untuk mulai memasukkan gambar, klik posisi gambar yang dikehendaki (poin 1) dan kemudian klik toolbar Insert Image (poin 2):

Cara memasukkan gambar kedalam postingan blog

Disini, kita akan memasukkan gambar dengan metode Upload. Klik "Pilih File" dan pilih gambar yang akan ditambahkan kedalam post.

Cara memasukkan gambar kedalam postingan blog

Blogger juga memungkinkan kita untuk dapat mengupload banyak gambar sekaligus. Untuk contoh pada tutorial ini, saya hanya mengupload satu gambar saja.

Proses upload akan berjalan. Setelah proses upload selesai, klik pada gambar dan klik "Add Selected" untuk menambahkan gambar kedalam postingan.

Cara memasukkan gambar kedalam postingan blog

Gambar akan ditambahkan kedalam postingan. Untuk proses upload gambar melalui mode penulisan compose, ukuran gambar akan secara otomatis diperkecil dengan lebar 320px (medium).

Cara memasukkan gambar kedalam postingan blog

Anda dapat melihat struktur Tag HTML penyusun gambar ini dengan cara beralih ke mode penulisan HTML.

Cara memasukkan gambar kedalam postingan blog
Tag Html Gambar


Sekarang, Klik pada gambar yang telah anda tambahkan. Terdapat beberapa toolbar berkaitan dengan gambar.

Cara memasukkan gambar kedalam postingan blog

Keterangan:
  • Bagian 1
    Pengaturan ukuran gambar, dimulai dari small (kecil) hingga ke ukuran original (ukuran asli)
  • Bagian 2
    Mengatur alignment gambar (rata kiri, tengah, kanan)
  • Bagian 3
    Add caption, fungsi ini digunakan untuk menambahkan keterangan tepat dibawah gambar
  • Bagian 4
    Add properties, lebih jelas tentang ini akan kita bahas pada poin berikutnya
  • Bagian 5
    Hapus gambar
  • Bagian 6
    Menambahkan atau menghapus link gambar. Pada keadaan default, gambar yang ditambahkan dengan cara diatas akan mengandung link ke gambar itu sendiri. Dengan membiarkan link pada gambar, ini akan memungkinkan pembaca untuk dapat menampilkan gambar secara penuh (ukuran asli).


3. Tentang Atribut Title dan Alt pada Gambar

Pada Bagian 4: add properties, fungsi dari atribut ini adalah untuk memberikan deskripsi gambar pada Mesin Pencari (Google.com misalnya). Lebih jauh tentang ini akan anda jumpai nanti pada Materi SEO.

Untuk menambahkan properti, pada antarmuka penulisan post mode Compose, klik pada gambar dan klik add properties. Akan muncul 2 form text, yaitu Title dan Alt.

cara menambahkan alt tag gambar

Keterangan:
  • Title
    Ini adalah text yang akan muncul ketika mouse diarahkan pada gambar.
  • Alt
    Alt adalah singkatan dari Alternative Text. Bagian ini bertujuan untuk memberitahukan mesin pencari "Tentang Apa" yang disampaikan pada gambar

Anda bisa mengisi kedua bagian ini (Title dan Alt) sesuai dengan "Topik" yang terdapat pada gambar. Atau, jika anda bingung, anda juga bisa mengisi bagian ini dengan judul artikel yang anda buat.

cara menambahkan alt tag gambar

Jika bagian title dan alt ini sudah anda tambahkan, sekarang coba beralih lagi ke mode HTML, anda akan melihat Attribute Title dan Alt juga akan ditambahkan pada kode HTML gambar. Untuk lebih jelas tentang tag HTML gambar ini akan kita pelajari nanti.

4. Mengatur Posisi Gambar Agar Menyatu atau Sejajar dengan Text (Float style)

Pada mode compose ini, secara default posisi gambar yang ditambahkan adalah rata tengah. Selain memanfaatkan toolbar alignment (Kiri, tengah, kanan), anda juga bisa mengatur posisi gambar menyatu atau sejajar dengan text. Apa yang saya maksud dengan sejajar ini adalah kurang lebih seperti berikut:

cara mengatur posisi gambar sejajar dan menyatu dengan text

Untuk mulai mengatur posisi gambar seperti diatas, Drag and Drop gambar ke posisi yang anda kehendaki (kiri atau kanan paragraf). Lebih jelasnya jika anda masih belum mengerti tentang apa itu yang dimaksud dengan drag and drop, Klik pada gambar dan tahan (jangan dilepas). Selanjutnya Arahkan ke posisi yang anda kehendaki, dalam contoh posisi diatas adalah ke sisi kanan paragraf pertama.

Sekarang publikasikan artikel anda. Sebelum itu, atur juga label post seperti yang telah dijelaskan pada materi sebelumnya. Untuk beberapa Pengaturan post lainnya bisa dilewatkan saja (biarkan secara default).

cara mengatur posisi gambar sejajar dan menyatu dengan text

Berikut adalah tampilan pada blog.

cara mengatur posisi gambar sejajar dan menyatu dengan text

Pada tutorial ini, saya hanya menjelaskan bagaimana cara menambahkan gambar ke postingan dengan metode upload. Untuk beberapa menu pilihan lainnya yang tersedia pada antarmuka insert gambar, silahkan dipelajari secara mandiri ^_^.


Subscribe to receive free email updates:

0 Response to "Materi 6: Panduan Lengkap Cara Insert / Memasukkan Gambar Pada Postingan Blogger"

Posting Komentar

loading...