Home » , » HTML Cara Pasang Gambar atau Foto

HTML Cara Pasang Gambar atau Foto

Written By Ade Sanusi on 12.03.2008 | 11:04 PM

Terkait dengan pertanyaan di Shoutbox "Guest MAS CARANYA NARUK IKON FRIENDSTER DI BLOG ITU GIMANA CARANYA" Nah pada dasarnya pertanyaan itu bisa dengan mudah temen-temen jawab yaitu dengan mengunakan kode untuk gambar menggunakan HTML
Untuk memasang Gambar /Foto di Blog atau web, kita perlu mengatahui dulu alamat foto/gambar yang kita ingin tampilkan, Dahulu sudah agak lama saya bahas mengenai Cara menyimpan foto/gabar di internet salah satunya dengan menggunakan layanan Gratisan www.photobucket.com di sana juga anda sudah mendapatkan layanan yang saya rasa cukup memuaskan mulai dari pengaturan folder penyimpanan foto (album) modifikasi gambar secara online, dan Beserta kode gambar yang siap anda pakai untuk di pasang pada blog anda.

Di sini saya hanya memberikan sedikit gambaran atau cara untuk menampilkan gambar pada blog.

Kode yang di perlukan adalah kode ini: <img src="url gambar anda" alt="deskripsi gambar" width="x% atau xpx" height="y% atau ypx"/>
  • Supaya tidak terjadi masalah pada browser anda pastikan di akhir kode image gunakan /> itu menandakan penutup kode, pada awalnya kode Image tidak memerlukan penutup kode tapi pada perkembangannya, harus memiliki kode penutup, selain tiu anda bisa menggunakan kode </img> dengan catatan tidak menggunakan kode /> contohnya: <img src="...." > </img>.
  • SRC adalah URL gambar yang akan di pasang.
  • Width untuk menentukan lebar gambar, satuannya dalam pixel atau persentase, Untuk gambar yang ingin di tampilkan apa adanya, silahkan hapus kode width="......"
  • Height untuk menentukan tinggi gambar, satauannya sama seperti width yaitu persentase dan pixel.
  • ALT adalah kode untuk mendeskripsikan sebuah gaambar yang anda maksud hal ini berguna untuk mesin pencari menemukan gambar yang sesuai di cari.
selain kode di atas, masih banyak parameter atau kode tambahan untuk tag IMG. selengkapanya bisa di baca di sini :http://www.htmlcodetutorial.com/images/_IMG.html
 Berikut Contoh kode beserta hasilnya:

Gambar aslinya:
Dapatkan Uang lewat Klik Rupiah

<img src="http://klikrupiah.com/images/klik5.gif" alt="Dapatkan Uang lewat Klik Rupiah" width="50%" height="50%/>

Gambar seteleh di atur lebar dan tingginya sebesar 50% dar gambar normal.
Dapatkan Uang lewat Klik Rupiah

Pasang Link pada Gambar

Pada Gambar di atas terlihat bahwa tidak ada link /tautan ke situs atau blog orang lain. jika anda klik maka yang tampil adalah gambar itu sendiri. Cara menambahkan Link pada Gambar adalah cukup mudah, Caranya dengan meletakan tag <a></a> diantara tag <img> Contohnya sebagai berikut:

<a href='https://www.klikrupiah.com/index.php?ref=contoh' target='_blank'><img alt='Klik Dapet Duit' src='http://klikrupiah.com/images/klik5.gif'/></a>

Coba perhatikan kode di atas,  maka saat anda klik, gambar maka akan membuka halaman baru yaitu https://www.klikrupiah.com/index.php?ref=contoh adapun hasilnya bisa di coba langsung pada gambar di bawah ini:
Klik Dapet Duit

Tampilkan Gambar dari Blog/web Orang Lain

Kemudian bagaimana jika ingin menampilkan gambar dari situs atau blog orang lain?

Caranya hanya mencari alamat gambar yang ingin anda gunakan dan berikut screenshotnya: (sebagai sample saya menggunakan logo www.friendster.com

Cari gambar yang ingin anda pasang, kemudian klik kanan pada image tadi nanti akan muncul menu seperti ini:
Kemudian Pilih dan klik "Copy Image Location" nah setelah di copy silahkan gabungkan dengan kode Image yang sudah di berikan sebalumnya: atau silahkan paste dulu ke notepad atau halaman kerja anda di sini alamatnya sebagai berikut:
http://images.friendster.com/images/friendster_nav_logo.png

Kemudian Siapkan Alamat atau url yang ingin di jadikan link pada saat gamabr /logo Friendster tadi di klik: saya contohkan menggunakan URL friendster saya yaitu: http://profiles.friendster.com/adesanusi Nah setelah terkumpul maka selanjutnya adalah penggabungan yaitu sebagai berikut:

<a href='http://profiles.friendster.com/adesanusi' target='_blank'><img alt='Friendsternya Ade Sanusi' src='http://images.friendster.com/images/friendster_nav_logo.png'/></a>


Dan Hasilnya Sebagai berikut:
Friendsternya Ade Sanusi
Silahkan klik Icon friendster di atas nanti akan tampil Account fiendster saya. Pemasangan dapat di terapkan pada Widget blog maupun postingan blog anda. Semoga berhasil.
Share this article :

+ Komentar + 44 Komentar

Kamis, 04 Desember, 2008

Mas ade..mank,y pertamaxx ntu apaan?? Hehe...
Mau tnx nih, cara bkin menu yg kayak di friendster gmn??
Itu lho kalo,y cursor diarahin maka menu yg muncul byk...
Hore..bensin(gak prtamax lg) haha :D

Kamis, 04 Desember, 2008

Pertamax itu ya Komentar yang pertma, Mengapa? Kok banyak yang berebut di komentar pertama ya Besar kemungkinan Blog kita akan di kunjungi oleh pengunjung berikutnya.

Kamis, 04 Desember, 2008

Mantab Tutorialnya,...
Sukses mas ade,... mas ato ade yach??

Kamis, 04 Desember, 2008

Ade, mau domain gratis ? Cuma bikin artikel dapet domain loh... Mau ?

Jumat, 05 Desember, 2008

ci ade mah bisaan

Sabtu, 06 Desember, 2008

mas ade..mungkin keluar dari topik nie.. bagaimana cranya nampilin icon social bookmark di bawah label seperti mas ade??? ditunggu nie tutorialnya kalo ada mas..:D

Sabtu, 06 Desember, 2008

sipp kang tips triknya..sukses selalu...

Sabtu, 20 Desember, 2008

akhirnya setelah melakukan pencarian yg melelahkan ketemu jg trik nya..
thx berat mas ade..
tukeran link yux mas!?

Kamis, 07 Mei, 2009

thanks infonya

Senin, 21 September, 2009

Mantaaap,,,ni yg aq cari.Thx y

Kamis, 04 Maret, 2010

aku bingung untuk menerapkan cara ini

Kamis, 22 April, 2010

wah mantab broo infonya makasih maklum newbe

Sabtu, 19 Juni, 2010

Postingan yg bagus,mau coba ah.

Sabtu, 21 Agustus, 2010

terimakasih ilmunya janganlupa kunjungi blog aku
kunjungi abun disini

Jumat, 27 Agustus, 2010

ajari aku broo knjung blog ku ya

Jumat, 27 Agustus, 2010

gw baru ne broo...maen di blog

Sabtu, 02 Oktober, 2010

Ini dia mas yang saya cari-cari..oh kayak gitu caranya tak coba dulu mas.tengkiu ya atas infonya

Senin, 18 Oktober, 2010

salam kenal..
cara pasang gambar di blog, berguna banget infonya

Rabu, 03 November, 2010

nambah ilmu gan ^_^

Jumat, 17 Desember, 2010

matur nuwun juragan....webku sekarang sudah bergambar pribadi mantap

Jumat, 17 Desember, 2010

Trims ..udah bebagi informasi, bermanfaat buat saya

Kamis, 17 Maret, 2011

Tipsnya sederhana tetapi manfaatnya besar sekali ... salut dan salam kenal buat anda ...

www.dolananmusik.blogspot.com
www.chorddigital.blogspot.com

Senin, 11 April, 2011

salam kenal aja,gwe lg cari caranya dan akhirnya boleh aku coba semoga berhasil.thx

Kamis, 05 Mei, 2011

mantap

Jumat, 06 Mei, 2011

wah bagus banget,,thanks yak infonya ^^

Oh jadi bisa buat banner ya pake ginian??

Selasa, 27 September, 2011

wah gak mudeng

Senin, 10 Oktober, 2011

thx for share...

Senin, 17 Oktober, 2011

mantappp ....

Minggu, 23 Oktober, 2011

Berkunjung lagi ke blog ini :)

Selasa, 07 Februari, 2012

What valuable information. Really helpful, I'm a new comer in blogging. You have written very useful tips. These are very essential tips since time is very important. Thank you.

Selasa, 07 Februari, 2012

This is simply great...amazing I like this very much...It will be really very helpful for me...thanks a lot for such an wonderful info..

Selasa, 08 Mei, 2012

http://ichin14.blogspot.com
mampir gan..

Selasa, 15 Mei, 2012

thanks bro..artikelnya bagus dan bermanfaat.........



http://bloggmul.blogspot.com

Kamis, 12 Juli, 2012

super gan p0stingnya

gan gmana cra meletakan gambar dibgian kiri aku pakai wap gan

Minggu, 29 Juli, 2012

Makasi infonya om, cuma saya belum bisa menerapkan. Saya ingin membuat banner berupa gambar tapi urlnya menuju ke halaman blog saya. Bisa dikasi penjelasannya mas. Nih blog saya Video bokep

Rabu, 14 November, 2012

thaks

Senin, 17 Desember, 2012

thanks infonya gan,,,,

Jumat, 26 April, 2013

da mantep tipsnya niee...!!! buat tips yang lain

Kamis, 06 Juni, 2013

Makasih Gan dan salam kenal infonya sangat bermanfaat.

Rabu, 02 Oktober, 2013

keren gan...

Selasa, 21 Januari, 2014

maksih gan... infonya

Senin, 04 Agustus, 2014

Terima kasih infonya

Poskan Komentar

Terima Kasih telah Mengunjungi Blog ini dan Silahkan tinggalkan Komentar Anda...