Tempat belajar blogspot

Membuat Link Aktif Menggunakan Gambar


Cara Membuat Gambar Bisa di Klik

Penambahan gambar sebenarnya bisa dilakukan lagi dengan cara yang lebih cepat yaitu dengan menggunakan fitur add widget "image" pada menu layout pada blogger, tapi cara penambahan gambar yang akan dibahas pada artikel ini adalah cara manual yang memungkinkan kita bisa lebih leluasa memberikan sedikit efek perubahan menggunakan CSS seperti ukuran lebar (width) dan tinggi (height) sebuah gambar dengan satuan pixel (px) atau persentase dan tidak hanya CSS namun seperti HTML Links pun bisa kita tambahkan kedalam gambar tersebut.

Mungkin ada yang berpikir "Apakah sangat penting trik ini?", bagi saya pribadi ini tetap trik opsional karena didalam blogger pun menyediakan fitur add image yang lebih mudah tapi bagi kita yang ingin memahami ilmu seputar pembuatan blog lebih dalam tentu trik penambahan gambar dengan URL saya rasa cukup penting untuk dipelajari. Ilustrasi gambar URL atau image link bisa dilihat pada gambar dibawah ini.

Cara Membuat Iklan Banner

Penjelasan ilustrasi link gambar

Gambar yang terdapat pada website A sebenarnya adalah sebuah link aktif atau URL yang diberi gambar, link tersebut bisa ditujukan ke website lain atau halaman lain pada website itu sendiri. Jadi pada saat ada pengunjung yang melakukan klik di gambar tersebut, maka pengunjung akan langsung diteruskan menuju halaman dari link aktif yang disisipkan.

Beberapa contoh lain penggunaan link gambar

  • Pemasangan iklan gambar yang menuju website advertiser, ini bisa disebut juga sebagai iklan banner.
  • Menambahkan gambar yang menuju halaman lain pada website itu sendiri, untuk mendongkrak angka pageview halaman tersebut.
  • Menambahkan gambar yang bisa dikaitkan dengan artikel lain dalam website itu sendiri.

Cara menambahkan link aktif di gambar.

  1. Buka halaman blogger dan login akun blogger.
  2. Pilih blog yang ingin diberi perubahan.
  3. Pilih layout dan pilih add widget sesuai lokasi penempatan gambar yang diinginkan.
  4. Pilih add HTML / Javascript dan masukan kode dibawah ini, kemudian pilih save apabila proses konfigurasi telas selesai.

<div align="center">
<a href="URL YANG DITUJU" target="_blank">
<img alt="JUDUL GAMBAR" title="JUDUL GAMBAR" height="TINGGI GAMBAR" src="DIRECT LINK GAMBAR" width="LEBAR GAMBAR"/>
</a>
</div>

Penjelasan kode diatas

  • URL YANG DITUJU adalah alamat URL atau link yang akan mengarahkan halaman pengunjung ke URL yang tertulis apabila gambar tersebut di klik
  • JUDUL GAMBAR pada atribut alt dan title berfungsi untuk memberikan judul pada gambar tersebut, atribute alt berfungsi untuk menampilkan judul gambar apabila gambar gagal di download (tidak muncul) sedangkan atribut title berfungsi untuk menampilkan judul gambar apabila gambar tersebut dilalui cursor mouse.
  • TINGGI GAMBAR dan LEBAR GAMBAR adalah atribut untuk menentukan ukuran gambar, ukuran gambar ini dapat berjalan dengan beberapa satuan contoh misal satuan pixel atau px dan satuan persentase yang berdasarkan ukuran resolusi browser.
  • DIRECT LINK GAMBAR adalah alamat URL atau link dari gambar yang akan dimuat atau dimunculkan.

Sampai disini dulu tutorial "Membuat link gambar", semoga informasi ini dapat bermanfaat bagi kita yang ingin membuat link dengan variasi gambar atau pembuatan banner iklan.
Terima kasih

Artikel ini ditulis oleh :
Amateur Blog Design

27 comments:

  1. Replies
    1. ini widget untuk menambahkan gambar gan, nah umumnya cara nambahin gambar kan ada yang diberi link juga di atas situ saya dah kasih tipsnya gan...

      Delete
  2. usul dah,
    kalo blognya tentang "blog"
    gimana kalo tampilannya di buat yang "umum" atau yang "menarik" gan?

    ReplyDelete
    Replies
    1. Hmm.. maksudnya nih tampilan di halaman blogspot saya kurang umum seperti gimana gan? hehehe
      gpp thank you buat masukannya gan..

      Delete
  3. Tapi kalo gini, apakah aspek responsive design jadi agak berkurang ya? soalnya ukuran image langsung di fix-in pake width+height.

    ReplyDelete
    Replies
    1. Nah justru di artikel atas saya ada tulis untuk ukuran width dan height bisa menggunakan satuan px atau % gan..

      Kalau pake satuan px ya emank ukuran fixed seberapa lebar ukuran layar maka div tersebut akan memiliki width: ....px
      Sedangkan apabila kita menggunakan satuan % maka ukuran width sebuah div akan mengikuti lebar layar, karena makna satuan persentase adalah berapa persen dari ukuran layar..

      Jadi tergantung sikon bentuk layout template kita gan..

      Delete
  4. saya langsung coba cara menambah wigdet ya gan

    ReplyDelete
    Replies
    1. Iya gan silahkan dicoba gan buat latihan juga nulis kode HTML secara manual gan..

      Delete
  5. gan punya ane kan pake template nya org, nah ada gambar trtntu yg ga bisa dihapus. tuh gmna gan?

    ReplyDelete
    Replies
    1. Klo gambar tersebut dari template bawaan, menghapusnya melalui edit HTML gan..

      Delete
  6. Replies
    1. Iya nulis pake kode HTML ini gan..
      Tergantung agan ingin menambahkan gambar melalui tata letak atau edit HTML gan..

      Kalau ingin dari tata letak tinggal memilih tambah widget kosongan (widget untuk menulis kode HTML)

      Delete
  7. Good job bang. Tapi saya mau bilang kalau cuma ngandelin css text-align:center nggak semua template bisa posisi di tengah. Template blog saya malah harus ditambahin (margin-right:auto;margin-left:auto). Bukannya menggurui, ini hanya bagi pengalaman aja bang hehe

    ReplyDelete
    Replies
    1. Oowhh iyaa betul gan, setuju kalau kode CSS terkadang tidak bisa semuanya sama diterapkan pada setiap template..
      Makasih gan buat masukannya..

      Delete
  8. Kalau memasang link di image apa tidak masalah itu ya?

    ReplyDelete
    Replies
    1. Tidak masalah gan, sebetulnya sama aja dengan membuat sebuah hyperlink hanya saja hyperlink tersebut berwujud sebuah objek gambar (bukan sebuah text)

      Delete
  9. tips yang bermanfaat cocok untuk pasang iklan

    ReplyDelete
    Replies
    1. Iya betul gan, setidaknya klo kita bisa mengerti penulisan manual untuk menambahkan widget gambar dengan URL akan sangat membantu apabila halaman blog kita ingin di beri slot iklan

      Delete

1. Berkomentarlah dengan sopan.
2. Berdiskusilah dengan bijak.
3. Dilarang SPAM.
4. Dilarang SARA.
5. Dilarang menuliskan tautan link.

Featured Post

Apa itu CSS Syntax dan Selector

CSS ( Cascading Style Sheet ) sudah dijelaskan mengenai pengertian CSS pada artikel sebelumnya Apa itu CSS , namun pada artikel yang sekara...