Tips dan Trik Blogger

HTML Cara Pasang Gambar atau Foto

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.
44 Komentar untuk "HTML Cara Pasang Gambar atau Foto"

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

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.

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

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

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

sipp kang tips triknya..sukses selalu...

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

Mantaaap,,,ni yg aq cari.Thx y

aku bingung untuk menerapkan cara ini

wah mantab broo infonya makasih maklum newbe

Postingan yg bagus,mau coba ah.

terimakasih ilmunya janganlupa kunjungi blog aku
kunjungi abun disini

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

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

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

Trims ..udah bebagi informasi, bermanfaat buat saya

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

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

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

wah bagus banget,,thanks yak infonya ^^

Komentar ini telah dihapus oleh pengarang. - Hapus

Berkunjung lagi ke blog ini :)

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.

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

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

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



http://bloggmul.blogspot.com

super gan p0stingnya

gan gmana cra meletakan gambar dibgian kiri aku pakai wap gan

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

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

Makasih Gan dan salam kenal infonya sangat bermanfaat.

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

Back To Top