Cara Membuat Gambar dengan Link di Blog Kita

Saat melakukan aktivitas Blogging, kita sering melihat ada gambar yang ketika diklik akan mengarah kepada link tertentu. Misalnya pada blog saya, ada banner: Ingin baca novel Afifah Afra secara gratis? Jika gambar itu diklik akan mengarah pada halaman https://fiksiislami.com/tag/simfoni-bunga-rumput/ yakni tag untuk novel saya yang dimuat di website fiksiislami.com. Bagi seorang Blogger, ini penting banget ya, sebab kita bisa membuat promosi-promosi gratis tentang produk-produk kita yang sedang ingin kita push. Selain bisa mengarah ke tautan di website lain, kita juga bisa membuat tautan ke dalam tulisan di blog kita sendiri. 

Sebenarnya, ini bukan hal sulit. Bagi Blogger yang sudah terbiasa utak-atik kode HTML, tentu membuat gambar dengan link sangat mudah dilakukan. Tetapi, bagi yang belum terbiasa, ini perkara yang sedikit agak rumit. Saya sendiri saja kadang masih harus buka-buka internet untuk mencari tahu caranya, karena lupa, haha....

Jadi, salah satu motif membuat tulisan ini, sebenarnya untuk membantu saya mengingat kalau lupa, selain juga mengisi agar blog saya tidak dibiarkan tanpa tulisan, wkkk.... Eh, tapi juga untuk membantu teman-teman semua yang masih dalam proses berkenalan dengan dunia Blogging sih. Apapun, semoga tulisan singkat saya ini bermanfaat.

Bagaimana cara membuat gambar dengan link?

Pertama, kita harus tahu dulu kode HTML dari gambar berlink. Kodenya seperti ini:

<a href="DIISI DENGAN LINK"> <img style="width: 500px; 

height: 200px;"src="DIISI LINK SUMBER GAMBAR" /></a>

Perhatikan yang saya kasih warna merah. Kode href adalah link yang akan kita cantumkan. Misal, gambar akan kita tautkan ke https://fiksiislami.com/ maka href bisa ditulis dengan tautan tersebut. Width dan height adalah ukuran dari gambar tersebut. Jika kita ingin ukurannya menyesuaikan, bisa kita isi auto. 

Adapun src adalah source atau link sumber gambar. Bagaimana cara mendapatkan link sumber gambar? Jika gambar kita dapatkan dari internet, kita bisa klik kanan gambar tersebut, lalu pilih copy image address, dan pastekan ke src kode tersebut. Secara lebih mendetail, untuk mendapatkan alamat gambar, saya membuat posting khusus di sini Cara Mendapatkan Alamat Gambar (Image Address) di Internet.

Contoh:

<a href="https://fiksiislami.com/"> 

<img style="width: 500px; 

height: 200px;"

src="https://fiksiislami.com/wp-content/uploads/2023/01/cerpen-suara-yang-tersembunyi-696x408.jpg" /></a>

Kedua, kita tentu akan menempatkan gambar tersebut pada tempat tertentu, bukan? Kalau mau ditempatken di widget, kita bisa menambahkan dengan cara memilih tata letak, lalu memilih add gadget (tambahkan gadget) dan pilih HTML/Javascript, dan copaskan kode HTML di atas. Cara ini kalau kita menggunakan platform Blogspot ya, kalau dengan platform lain seperti Wordpress caranya sedikit lebih rumit, tapi prinsipnya mirip. Hanya saja, biasanya para pengguna Wordpress itu sudah bukan pemula lagi, sehingga tidak perlu saya share caranya, karena pasti sudah lebih pandai daripada saya, haha.

Kalau gambar mau kita letakkan di posting, pilih tampilan HTML dan copaskan kode tersebut di tempat yang kita inginkan.

Mudah sekali kan? Selamat mencoba!