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.
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.
- Buka halaman blogger dan login akun blogger.
- Pilih blog yang ingin diberi perubahan.
- Pilih layout dan pilih add widget sesuai lokasi penempatan gambar yang diinginkan.
- 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>
<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
informasinya bisa dicoba
ReplyDeleteiya gan..
DeleteThanks gan infonya ^^
ReplyDeleteoke gan sama - sama
DeleteHasilnya kyak aph gan?
ReplyDeleteini widget untuk menambahkan gambar gan, nah umumnya cara nambahin gambar kan ada yang diberi link juga di atas situ saya dah kasih tipsnya gan...
Deleteusul dah,
ReplyDeletekalo blognya tentang "blog"
gimana kalo tampilannya di buat yang "umum" atau yang "menarik" gan?
Hmm.. maksudnya nih tampilan di halaman blogspot saya kurang umum seperti gimana gan? hehehe
Deletegpp thank you buat masukannya gan..
Tapi kalo gini, apakah aspek responsive design jadi agak berkurang ya? soalnya ukuran image langsung di fix-in pake width+height.
ReplyDeleteNah justru di artikel atas saya ada tulis untuk ukuran width dan height bisa menggunakan satuan px atau % gan..
DeleteKalau 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..
saya langsung coba cara menambah wigdet ya gan
ReplyDeleteIya gan silahkan dicoba gan buat latihan juga nulis kode HTML secara manual gan..
Deletegan punya ane kan pake template nya org, nah ada gambar trtntu yg ga bisa dihapus. tuh gmna gan?
ReplyDeleteKlo gambar tersebut dari template bawaan, menghapusnya melalui edit HTML gan..
Deleteitu ngedit lewat html kan ?
ReplyDeleteIya nulis pake kode HTML ini gan..
DeleteTergantung 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)
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
ReplyDeleteOowhh iyaa betul gan, setuju kalau kode CSS terkadang tidak bisa semuanya sama diterapkan pada setiap template..
DeleteMakasih gan buat masukannya..
izin praktek gan
ReplyDeleteKalau memasang link di image apa tidak masalah itu ya?
ReplyDeleteTidak masalah gan, sebetulnya sama aja dengan membuat sebuah hyperlink hanya saja hyperlink tersebut berwujud sebuah objek gambar (bukan sebuah text)
Deleteijin praktek gan ,
ReplyDeleteaku mau coba
ReplyDeletetips yang bermanfaat cocok untuk pasang iklan
ReplyDeleteIya 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
DeleteIjin praktek om..
ReplyDeleteOk gan bisa coba gan
Delete