wiblogger

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.



Bagikan ke:

9 komentar untuk:

Panduan Lengkap Cara Insert / Memasukkan Gambar Pada Postingan Blogger
  1. Mau nanya mas. Di blog saya kok tidak bisa otomatis menuju link sumber gambar asli ya saat saya mengupload gambar dengan cara di atas? Mohon pencerahannya.

    BalasHapus
    Balasan
    1. Maksudnya gimana ya ?, Apakah maksudnya gambar tidak bisa diklik ?

      Hapus
  2. mau tanya dong, gimana si cara buat keterangan gambar setelah gambar di klik, keterangan gambar masuk dalam halaman berikutnya. mohon bantuannya. makasih

    BalasHapus
    Balasan
    1. Pertanyaannya sudah agak tinggi nih ^_^, Bisa saja dengan penggunaan javascript, alurnya kurang lebih seperti ini:

      GET Keterangan gambar saat diklik > Kunjungi halaman dengan menambahkan keterangan gambar pada Url tujuan (urltujuan?keterangangambar) > Pada halaman tujuan, buat script yang akan membaca dan menampilkan keterangan gambar yang terdapat pada URL. Done ^_^

      Hapus
  3. Komentar ini telah dihapus oleh administrator blog.

    BalasHapus
  4. Bagus artikelnya... Tp kok gk ada adsense nya yaaa....

    BalasHapus
    Balasan
    1. Kayaknya belum mau dimonetize mas ^_^

      Hapus
  5. Mas merubah ukuran tulisan sesuai dengan size selera kita bagai mana mas

    BalasHapus
  6. Maksudnya ukuran font post postingan ya ?. Kalu iya, itu di post editor kan juga sudah ada toolbar untuk set ukuran font. Kalu maunya set ukuran px sesuai selera, bisa dilakuin via mode HTML. Caranya, bungkus konten dengan format seperti ini:

    <div style='font-size:18px'>

    Konten text disini akan berukuran 18px.
    Ubah 18 sesuai selera ..............

    </div>

    BalasHapus

Silahkan tulis komentar anda untuk hal apapun yang masih berhubungan dengan post pada halaman ini. Dukungan tag HTML: Bold Text, Italic Text, and Link Text (Hanya jika diperlukan).

Berlangganan Artikel
Dengan berlangganan artikel kami, anda akan mendapatkan setiap update yang diterbitkan pada situs wiBlogger.com langsung melalui akun email anda. Pastikan juga anda mengkonfirmasi alamat email anda untuk dapat mengaktifkan layanan.
×
Jangan tampilkan lagi