Kunjungi Blog terbaru saya corkismet - Coretan Kang Ismet - dan tinggalkan jejak sobat disana.

Cara Membuat Link Pada Gambar

Cara membuat link pada gambar, sebenarnya tidak jauh berbeda dengan link pada teks. Pada link teks, apabila kita meng-klik teks akan terbuka halaman web lain. Pada link gambar apabila kita klik gambar, maka terbuka halaman web baru.

Sebelum kepada link gambar, kita lihat dulu bagai mana kode HTML dasar dari link teks, seperti  ini:
<a href="url tujuan">anchor teks</a>
Maka apabila saya ingin membuat teks link yang ditujukan ke blog.kangismet.net, maka kodenya seperti ini:
<a href="http://blog.kangismet.net/">Blogger Tutorial</a>
Apabila kita ingin menampilkan gambar sebagai link, maka kita tinggal mengganti anchor teks menjadi gambar, kode dasarnya seperti ini:
<a href="url tujuan"><img src="url gambar" /></a>
Contoh kode, gambar yang ditujukan ke blog.kangismet.net:
<a href="http://blog.kangismet.net/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiY5BiSAJFulkadSXTch1NlZHGC3eRM-y-QjCvdZogNl_VH0Ck8ohtyA0EmtX325nyudPlliEQNjiSRa8lqHXnOZ1Ktd5O9blf2_IdII78ZFtPoVRlv-jt0Njsmnn5wqCEPPyiZ2MjmzO8/s1600/ki.png" /></a>
maka hasilnya seperti ini : (sok atuh silahkan di klik)

Kang Ismet

Beberapa hal yang perlu diperhatikan :

1. Untuk memasukan kode di atas harus pada mode HTML
2. Gambar harus sudah di upload
3. Supaya terbuka di tab baru tambahkan kode target="_blank" pada url tujuan, contoh:
<a href="http://blog.kangismet.net" target="_blank">
4. Supaya gambar terbaca di Search Engine, tambahkan kode alt="keterangan gambar" pada url gambar, contoh:
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyrOKsEgSsLVMPxpRiWGdUgDNWsqoCGe0rkErYj9rPeIMcayaJkV8KI5MdIrlm2IBNxb-xgcPFr_N2eQSe58Mzh9zHoOxV8i6jGhK6gYgQqvspWmJ_qTv-JSdWCrCBi_EaZTOzYH3gRBo/s1600/logo1.png" alt="logo blog kang ismet" />
5. Supaya keluar teks ketika mouse disimpan di atas gambar, tambahkan kode tittle="judul gambar", contoh:
<img src="http://4.bp.blogspot.com/- zzeju97zS34/TzUklCgI2mI/AAAAAAAABbA/WY6rUNgXmbY/s1600/logo1.png" alt="logo blog kang ismet" tittle="Blog Kang Ismet" />
6. Kode keseluruhan seperti ini :
<a href="http://blog.kangismet.net" target="_blank"><img src="http://4.bp.blogspot.com/- zzeju97zS34/TzUklCgI2mI/AAAAAAAABbA/WY6rUNgXmbY/s1600/logo1.png" alt="logo blog kang ismet" tittle="Blog Kang Ismet" /></a>
Untuk mengupload gambar, dan cara mengetahui alamat/url gambar silahkan kunjungi tutorial "Cara upload gambar ke Blogger".

Kalau ada saran atau komentar silahkan isi kolom komentarnya.
Happy Blogging sob...

Untuk mendapatkan update terbaru di Dasbor Blogger, silahkan ikuti Blog ini

85 komentar

1. Komentar ini, diurutkan dari yang terbaru
2. Tinggalkan komentar sesuai topik tulisan
3. Apabila ada pertanyaan diluar artikel silahkan kunjungi Ruang Obrolan.
4. Centang Beri tahu saya untuk mendapatkan notifikasi via Email ketika ada balasan
Masukkan URL Gambar atau Potongan Kode, atau Quote, lalu klik tombol yang kamu inginkan untuk di-parse. Salin hasil parse lalu paste ke kolom komentar.


image quote pre code
  1. makasih banyak gan atas infonya....
    1. sama2 gan...
  2. makasi banyak...
    saya butuh banget. dan artikel ini sangat membantu ^^
    makasi makasi makasi ^^
  3. keren ya tutornya :)
  4. Aseeeeeeek :) nice blog ..
  5. thx bro, ijin prktek
  6. thnks kng ismet buat infonya sip bangett..
  7. trim's gan tutorialnya membantu banget
  8. TERIMA KASIH.......... SANGAT MEMBANTU.SUMPAH! :D
  9. asyik deh,,,
    kl mau nyimpen foto tyz dilink,,dmna yy??akuu blm bisa,,,hihi
    mkasii
    :)
  10. ooia uda ada,,, mkasii,,gg baca...
    hehe..

    :)

    makasi beud
  11. makaciiih tipsnya kang ismet ^^
  12. kok gak bisa?
    1. mungkin template anda eror, gambar yang ingin di buat link harus gambar yang sudah diupload di internet
  13. maaf itu turtorial untuk wordpress kalau untuk blog tidak bisa. atau mungkin bisa nya untuk blogger.com yang tampilan lama kalau yg tampilan sekarang tidak bisa.
    1. Tutorial diatas berlaku umum, WordPress, Blogger, Joomla dll. Tapi penggunaan nya pada Mode HTML, bukan mode Compose kalau di Blogger
  14. NyOBa kang... klo dipake komentar ternyata kok gak bisa ya IMGnya? bisanya bwt link doang kayak gini

    Kisah Sukses Top Market Leader, Baca Sekarang…
    1. Harus di modif dulu JS nya sob :)
  15. Thanks Infonya ,,, berkunjung blik ya GAN
    The Rasya Notes
    Rebutan Rumah Gratis Semudah 1-2-3
  16. weh..., mantap juga nih om.., cocok untuk newbi seperti saya.., ditunggu kunjungannya di
    dejafatutor.blogspot.com
    1. Sip sob...
  17. Mksh kang...
    1. Sama2 sob :)
  18. Barusan ane coba pasang gambar di footer ane.
    It works !
    Kelihatan sepele tentang image link, tp bermanfaat bgt.
    Keren gan.
    1. Ok sip blogging sob...
  19. salam sukses bro Blog ini sangat bagus dan memiliki konten yang berkualitas, saya undang pemilik blog untuk datang di blog saya http://akawan92.blogspot.com/p/link-exchange_18.html
    untuk silaturahmi dan kalau mau kita tukaran link.
    Kalau berkunjung jangan lupa tinggalkan komentar agar saya bisa berkunjung lagi di sini.link kang ismed sudah terpasng di tempat saya jgn lupa follow back ya kang
    Ok see you prend,
    Thank’s
  20. misi bro, kan saya udah masukin link facebook ke htmlnya, tapi ko kalo gambarnya di tekan tidak keluar link facebook ya?? itu gimana??
  21. Mantab kang Ismet...
    Saya langsung ke TKP dan berhasil..

    Sukses selalu kang
  22. Mas, follow back ya...
    Thanks infonya.
    Link juga udah saya pasang di http://www.dulida.com/2012/06/tukar-link-dengan-dulidacom.html.

    Terima kasih
  23. makasih iponyah gan yah
  24. mantaf gant thx gant atas infonya..sangat membantu
  25. thanks gan... mau tanya gan, link nya itu di hitung ato pengaruh sama Pagerank gak ???
  26. nice gan..
    http://download-template-blogger-gratis.blogspot.com/
  27. makasih info nya gan... ane nubie baru belajar bikin blog td siang nih... monggo silahkan jalan2 gan... maaf kalo postingan nya masih sedikit...

    http://awismuhammad.blogspot.com/
  28. makasih bgt buat tutorialnya,
    udah keliling2 gak nemu, ternyata begini rupanya, hehe
    makasih banyak kawan! :)

    kunjungi blog mungilku ya:_ iRusMind.blogspot.com
  29. makasih kang penjelasannya.
  30. kang ko yang keluar hanya tulisan saja, gambar nya ga munul kang, gimana caranya ? tolong dibantu kang :D
  31. Kang ku saya atos di klik, keren uy ieu anu ku saya dicari-cari. heheh
    hatur nuhun kang :)
  32. kunjungan sore gan...sambil baca-baca artikel kerren mas brow ismit hehe

    monggo berkunjung balik ..
  33. mantap nih buat di coba, ....
  34. info yang sangat bermanfaat sob, ....
  35. artikel yang sangat lengkap buat di pelajari, .... sukses selalu sob....
  36. mantap sob infonya cara buat link digambar ini yg kita cari, makasih... salam kenal blogger dari SUMUT Tanjungbalai
  37. berfungsi mas :D
  38. wah mantab gan sucess,,,,,
  39. lama saya nyari nya ternyata ketemu nya disini
    ijin ilmu nya kang ismet.untuk saya pelajari lebih lanjut
  40. mantapppp kwan
  41. Thanks Mas Bro, itu gambarnya di upload dulu ya
    1. iya dong.. kaau ga di upload, apa yang ditampilin :)
  42. makasih, dapat ilmu lagi dari kang ismet...
  43. Mantap kang.... Lanjutkan karya'a semoga ilmu yang di bagi bisa bermanfaat bagi semua'a, dan semoga buat kang ismet mendapatkan apa yang di harapkan Amiennnnnnnnn......... 1000x.
  44. Nyimak kang,keren banget
  45. makasih yah infonya
  46. wah ini yang sy pengen tau banget kang. makasi banget info nya...
  47. Kang Kita Tuker Link Ya.! Capa Tau Bisa saling Share Artikel Atau Ilmu..!
  48. sudah dicoba.
  49. Terima kasih atas kesempatan berkomentarnya. saya ingin bertanya kepada Bapak, Kalau membuat gambar thumbnail di template gallery spt di bocahbayi.com ngelink ke halaman postnya bagaimana kode HTMLnya Pak?. Trims sebelumnya..
  50. Informasi yang sangat bermanfaat sekali kang.. Mantap.
    Terimakasih banyak.. Ijin blogwalking kang.. :)
  51. info yg sangat bagus dan bermanfaat bagi saya, kunjungi balik yaa www.ankurniawan.blogspot.com
  52. Thanks tutorial nya kang...sangat berguna bagi nubi seperti saya...
  53. thanks
  54. tanks gan..
  55. wah,,bermanfaat skali
  56. artikel lama,,manfaat tetap ada
  57. mantap kang...
  58. alhamdulilla.... sipp
  59. membuat slide content yang mudah gmana mas? Banyak trik tapi tidak bisa jalan semua. mohon pencerahan :-)
    http://hermanto-ridwan.blogspot.com/2013/03/rumah-minimalis-efisien-10-m-x-12-m.html
  60. Admin
    Komentar ini telah dihapus oleh pengarang.
  61. Nice share kang,, artikelnya sangat membantu,,
    1. sama2 sob...
  62. yang otomatis ada gak kang? heee
    http://samboedy.blogspot.com/
  63. Bantuin ane mnmbahkan kotak komentar Kan....
  64. Upss... ralat... "bantuin ane mnmbahkan kotak komentar di blog ane Kang...."
    1. maksudnya blognya ga ada kolom komentar? mana urlnya?
  65. mantap beroooooo,,,,,,
    www.goedangbagus.blogspot.com
  66. mas bos udah saya coba... tapi; kursor saya arahkan ke gambar kok gak keluar tulisanya kenapa za????

    by : www.tokoobat-69.blogspot.com
    1. harus pake title="judul gambar"
  67. terimaksih kang ni lagi cara membuat link pada gambar
  68. Saya langsung coba dan hasilnya 'Works"
  69. percobaan Sukses kang! ciptakan terus artikel dgn info2 yg bermanfaat kang ismet. salam blogger!
    mohon silaturahminya http://rakaraperz.blogspot.com :)
  70. Leon Channel
    Komentar ini telah dihapus oleh pengarang.
  71. griya obat kuat
    Komentar ini telah dihapus oleh pengarang.
  72. Terima Ksih,,,,sangat membantu,,,,lain kali mampir kesini ya gan,,,sekalian minta komentarnya,,,http://inibarujalanterbaikuntukdownloadgame.blogspot.com/2014/10/download-pes-2010-hanya-9mb-100-work-by.html
  73. artikel nya bagus sekali brow klik aja
    http://www.obatkuatkalimantan.com/
    http://obatpembesarpenis.org/
    http://www.vakumpembesarpenis.com/
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.