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="http://1.bp.blogspot.com/-EL0iQY6651k/TtCFY0jbHxI/AAAAAAAABHc/2Mkwfc9bOVQ/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="http://4.bp.blogspot.com/-zzeju97zS34/TzUklCgI2mI/AAAAAAAABbA/WY6rUNgXmbY/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...

87 komentar

makasih banyak gan atas infonya....

Balas

makasi banyak...
saya butuh banget. dan artikel ini sangat membantu ^^
makasi makasi makasi ^^

Balas

thnks kng ismet buat infonya sip bangett..

Balas

trim's gan tutorialnya membantu banget

Balas

TERIMA KASIH.......... SANGAT MEMBANTU.SUMPAH! :D

Balas

asyik deh,,,
kl mau nyimpen foto tyz dilink,,dmna yy??akuu blm bisa,,,hihi
mkasii
:)

Balas

ooia uda ada,,, mkasii,,gg baca...
hehe..

:)

makasi beud

Balas

makaciiih tipsnya kang ismet ^^

Balas

mungkin template anda eror, gambar yang ingin di buat link harus gambar yang sudah diupload di internet

Balas

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.

Balas

Tutorial diatas berlaku umum, WordPress, Blogger, Joomla dll. Tapi penggunaan nya pada Mode HTML, bukan mode Compose kalau di Blogger

Balas

NyOBa kang... klo dipake komentar ternyata kok gak bisa ya IMGnya? bisanya bwt link doang kayak gini

Kisah Sukses Top Market Leader, Baca Sekarang…

Balas

weh..., mantap juga nih om.., cocok untuk newbi seperti saya.., ditunggu kunjungannya di
dejafatutor.blogspot.com

Balas

Mksh kang...

Balas

Barusan ane coba pasang gambar di footer ane.
It works !
Kelihatan sepele tentang image link, tp bermanfaat bgt.
Keren gan.

Balas

Harus di modif dulu JS nya sob :)

Balas

Ok sip blogging sob...

Balas

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

Balas

misi bro, kan saya udah masukin link facebook ke htmlnya, tapi ko kalo gambarnya di tekan tidak keluar link facebook ya?? itu gimana??

Balas

Mantab kang Ismet...
Saya langsung ke TKP dan berhasil..

Sukses selalu kang

Balas

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

Balas

mantaf gant thx gant atas infonya..sangat membantu

Balas

thanks gan... mau tanya gan, link nya itu di hitung ato pengaruh sama Pagerank gak ???

Balas

nice gan..
http://download-template-blogger-gratis.blogspot.com/

Balas

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/

Balas

makasih bgt buat tutorialnya,
udah keliling2 gak nemu, ternyata begini rupanya, hehe
makasih banyak kawan! :)

kunjungi blog mungilku ya:_ iRusMind.blogspot.com

Balas

makasih kang penjelasannya.

Balas

kang ko yang keluar hanya tulisan saja, gambar nya ga munul kang, gimana caranya ? tolong dibantu kang :D

Balas

Kg ismet, cara buat Commen admin kaya punya kg ismet gmna ya.. kasih tutorialnya dong...

Balas

Kang ku saya atos di klik, keren uy ieu anu ku saya dicari-cari. heheh
hatur nuhun kang :)

Balas

kunjungan sore gan...sambil baca-baca artikel kerren mas brow ismit hehe

monggo berkunjung balik ..

Balas

info yang sangat bermanfaat sob, ....

Balas

artikel yang sangat lengkap buat di pelajari, .... sukses selalu sob....

Balas

mantap sob infonya cara buat link digambar ini yg kita cari, makasih... salam kenal blogger dari SUMUT Tanjungbalai

Balas

wah mantab gan sucess,,,,,

Balas

lama saya nyari nya ternyata ketemu nya disini
ijin ilmu nya kang ismet.untuk saya pelajari lebih lanjut

Balas

Thanks Mas Bro, itu gambarnya di upload dulu ya

Balas

makasih, dapat ilmu lagi dari kang ismet...

Balas

iya dong.. kaau ga di upload, apa yang ditampilin :)

Balas

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.

Balas

wah ini yang sy pengen tau banget kang. makasi banget info nya...

Balas

Kang Kita Tuker Link Ya.! Capa Tau Bisa saling Share Artikel Atau Ilmu..!

Balas

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..

Balas

Informasi yang sangat bermanfaat sekali kang.. Mantap.
Terimakasih banyak.. Ijin blogwalking kang.. :)

Balas

info yg sangat bagus dan bermanfaat bagi saya, kunjungi balik yaa www.ankurniawan.blogspot.com

Balas

Thanks tutorial nya kang...sangat berguna bagi nubi seperti saya...

Balas

artikel lama,,manfaat tetap ada

Balas

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

Balas
Komentar ini telah dihapus oleh pengarang.

Nice share kang,, artikelnya sangat membantu,,

Balas

yang otomatis ada gak kang? heee
http://samboedy.blogspot.com/

Balas

Bantuin ane mnmbahkan kotak komentar Kan....

Balas

Upss... ralat... "bantuin ane mnmbahkan kotak komentar di blog ane Kang...."

Balas

maksudnya blognya ga ada kolom komentar? mana urlnya?

Balas

mantap beroooooo,,,,,,
www.goedangbagus.blogspot.com

Balas

mas bos udah saya coba... tapi; kursor saya arahkan ke gambar kok gak keluar tulisanya kenapa za????

by : www.tokoobat-69.blogspot.com

Balas

harus pake title="judul gambar"

Balas

terimaksih kang ni lagi cara membuat link pada gambar

Balas

Saya langsung coba dan hasilnya 'Works"

Balas

percobaan Sukses kang! ciptakan terus artikel dgn info2 yg bermanfaat kang ismet. salam blogger!
mohon silaturahminya http://rakaraperz.blogspot.com :)

Balas
Komentar ini telah dihapus oleh pengarang.
Komentar ini telah dihapus oleh pengarang.

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

Balas

artikel nya bagus sekali brow klik aja
http://www.obatkuatkalimantan.com/
http://obatpembesarpenis.org/
http://www.vakumpembesarpenis.com/

Balas

http://vimax69.com
http://gairahsexual.wordpress.com
http://obatkuatlaki2014.wordpress.com

Balas

Poskan Komentar


×
Chat