Cara menampilkan gambar di blog

Terkadang kita membutuhkan gambar didalam template, entah sebagai logo blog, banner/iklan, atau sebagai pemanis agar blog terlihat lebih bagus saat dipandang mata.

Ya, menggunakan gambar sebagai logo blog / website adalah hal termudah dan jamak yang umum dilakukan para desainer template, pasalnya untuk membuat tulisan ataupun logo dengan kode css/html sangatlah rumit (atau bahkan banyak yang enggan melakukannya).

Sehingga, menggunakan tulisan/logo yang dibuat dengan gambar adalah pilihan terbaik.

Cara menampilkan gambar di blog

Pada prinsipnya, ada 3 hal yang diperlukan untuk menampilkan gambar di template blog.
  1. Tempat menyimpan gambar secara online
  2. Alamat url gambar yang sudah disimpan
  3. Tag html untuk mengatur tampilnya gambar 
Hal pertama adalah tempat untuk mengupload dan menyimpan gambar tersebut secara online. Gambar yang akan digunakan perlu kita simpan di situs/portal yang selalu online agar gambar bisa selalu tampil.

Setelah gambar ter-upload dan tersimpan secara online, langkah selanjutnya yang diperlukan adalah memiliki alamat url tempat gambar tersebut disimpan. Alamat url gambar kemudian disusun bersama tag html dan dipasang kedalam template blog kita.

Setelah pengaturan dan penyimpanan tag html di template blog selesai maka kita bisa menampilkan gambar tersebut didalam blog/website kita sendiri.

Nah sudah terbayang kan proses yang diperlukan untuk menampilkan gambar di template blog ?

Pada artikel kita kali ini, saya akan menyampaikan cara untuk memasang dan menampilkan gambar kedalam template blog di Blogspot. Simak langkahnya dibawah berikut


Upload gambar yang akan digunakan


Langkah pertama adalah kita perlu mengupload gambar. Disini kita memanfaatkan blogspot sebagai tempat untuk meletakkan gambar yang akan digunakan, maka sebaiknya kamu login terlebih dahulu dengan akun blogspot kamu, lalu ikuti langkah-langkah mengupload gambar sebagai berikut.

Upload gambar di posting blog
  1. Buka menu posts
  2. Pilih New post
  3. Berikan judul Kumpulan gambar untuk template atau sesuaikan dengan keinginan Kamu
  4. Klik ikon bergambar Foto
  5. Klik choose files pada menu Upload
  6. Pilih gambar yang ingin Kamu upload dari komputer
  7. Setelah proses loading selesai, klik gambar tersebut (sampai muncul garis biru disekelilingnya)
  8. Klik tombol Add selected
  9. Proses upload gambar kedalam draft postingan selesai


Menyalin alamat URL gambar


Setelah gambar selesai di upload, arahkan mouse ke atas gambar. Klik kanan mouse kamu, lalu pilih salin alamat url gambar. Setelah itu, pastekan alamat url gambar kedalam notepad untuk sementara.

Salin alamat gambar dan paste ke notepad

Berikut adalah contoh alamat url gambar yang disimpan di blogspot.

https://4.bp.blogspot.com/-tQedy5XKB4s/WXWwq_mx-TI/AAAAAAAAH9c/qEKKgGOVIU4S-v4Sq6uj-Z0dwLR-DYWqgCLcBGAs/s1600/stop.gif

Setelah kamu mendapatkan alamat url gambarnya, maka post yang barusan kamu buat tidak perlu dipublikasikan. Cukup klik tombol save atau simpan sebagai draft agar url gambar bisa digunakan lagi di lain waktu.


Memasang gambar kedalam template


Alamat url gambar yang sudah kamu punya tidak bisa langsung dipasang kedalam template, untuk itu diperlukan tag html agar gambar bisa tampil. Untuk pemasangannya, gunakan tag html seperti dibawah berikut

  <img src="alamat-url-gambar.jpg" alt="deskripsi gambar" title="judul gambar" />

Atau jika Kamu ingin agar gambar yang diklik bisa mengarah ke halaman suatu url website atau blog tertentu (misalnya ke halaman home, website pengiklan,dll), tag html berikut ini bisa kamu gunakan,

<a href="http://www.url-blog-tujuan.com" target="_blank"><img src="alamat-url-gambar.jpg" alt="deskripsi gambar" title="judul gambar" /></a>

Keterangan untuk tulisan yang berwarna merah
  • alamat-url-gambar.jpg : isikan dengan alamat url gambar yang sudah kamu simpan sebelumnya
  • deskripsi gambar : isikan dengan kata/kalimat deskripsi yang menjelaskan gambar
  • judul gambar : isikan dengan Judul untuk gambar yang digunakan
  • www.url-blog-tujuan.com : isikan dengan Alamat url tujuan


Setelah selesai mengatur tag html gambar, langkah berikutnya adalah memasang gambar ke template. Untuk pemasangan gambar kedalam template blog, Kamu bisa melakukannya dari menu layout >> add a gadget >> gadget html/javascript, lalu copy pastekan tag html gambar yang sudah dibuat sebelumnya kedalam gadget html/javascript. Atur posisi dimana kamu ingin meletakkan gambar tersebut. Setelah selesai, simpan perubahan dan lihat hasilnya.

Baca juga :


Kesimpulan

Hal utama yang diperlukan untuk menampilkan gambar di blog adalah alamat url gambar yang sudah disusun kedalam tag html.

Selain itu tempat penyimpanan gambar secara online (host) juga menjadi hal penting lainnya. Jika situs /portal tempat kita menyimpan gambar itu down/mati/tutup tentunya gambar yang ada di blog kita ikut error sehingga gambar tidak bisa muncul.

Demikianlah artikel cara menampilkan gambar di blog ini bisa saya sampaikan, semoga bermanfaat.

Berlangganan Artikel Via Email :

6 comments:

  1. Its the best, thankyou gan,,, aku tunggu kunjungan balik nya ya,, :) New bie,,,

    ReplyDelete
  2. Aku bisa dengan mudah melakukan kunjungan balik, karena ada jejak di blog saya..hehe

    ReplyDelete
    Replies
    1. Iya mas. Sudah coba cuma saya masih cari tau untung ruginya buka itu, sebenarnya pernah saya buka, cuma capek saya moderasi komen2 orang luar yg ga jelas itu, sehari bisa 30an komentar, apalagi dia pakenya anonim.

      Tapi semenjak saya tutup aga santai saya sama ni blog.

      Delete
  3. Mas kalau upload gambar biar lolos di google page test, mas teguh pakai tips apa? trims

    ReplyDelete
    Replies
    1. Saya biasanya pakai file png mas, trus dikompres lagi gambarnya di situs kompress gambar online.

      Ukuran file yang digunakan sekitar 80 - 150Kb. Agak sedikit repot sih memang tapi hasilnya lumayan, gambar bisa lolos di pagespeed.

      Kalo ukurannya lebih dari 150 kb sering nyangkut juga di page speed :) itu aja sih yang sering saya lakukan kalau urusan gambar dalam artikel . .

      Delete

Informasi:
Form komentar ini menggunakan moderasi, setiap komentar yang masuk akan melalui proses pemeriksaan sebelum ditampilkan dalam kolom komentar. Memasang link yang sifatnya promosi di dalam komentar tidak akan di tampilkan. Hanya komentar yang membangun dan sesuai topik artikel saja yang akan saya tampilkan. Mohon maaf atas ketidaknyamanannya.