Link HTML Gambar | Cara Membuat Link HTML Bergambar

 oke selamat malam semua ( so'alnya aldi membuatnya malem hari nih  ) ..
belum lama ini banyak teman aldi yang bertanya .. Mereka ingin membuat Link HTML bergambar .
tapi sayangnya mereka engga tau ntuh cara ngebuatnya .. lon kok engga tau tapi mau bikin  .hehehe  .
oke deh sekalian aja aldi buatin postingan buat teman aldi yang satu ini .

ehmm .. langsung masuk ke topik pembahasan aja yuk ....
sekedar mengingatkan saja sebelumnya aldi kan sudah buat tutorial HTML untuk membuat link email bagi kalian yang mungkin ingin membacanya silakan klik disini yaa  .
ehmmm ... kok engga di klik  ??? . engga tertarik yaa . oke desss kalo gitu , gpp ..lets go

pertama aldi akan sharing sedikit info nih untuk kalian ..
dalam link - link html itu sebenarnya mempunyai banyak ke gunaan lhoo .. engga percaya ..
nih contoh nya ..

ini untuk membuat link biasa
 

<a href="www.zengbogel.blogspot.com">disini link untuk membuka halaman baru<a/>

dan hasilnya .. jrrrrengggg       disini link untuk membuka halaman baru


dan yang ini link untuk mengirim email 

<a href="mailto:aldi_fe@yahoo.com">disini link untuk mengirim email<a/>

and ... ini dia hasilnya  ( coba klik deh )              disini link untuk mengirim email

---

nahhh untuk yang ini nih  link bergambarnya  lihat yukk ..

<a href="www.zengbogel.blogspot.com">
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/77.gif"
width="20" height="20" />
</a>

keterangan :

•  tulisan yang aldi beri warna merah : disni adalah letak alamat web/blog yang ingin kalian tuju
•  tulisan yang berwarna biru  : ini adalah letak alamat gambarnya .
  ( misal kalian membuat gambar dan meng upload nya di photobucket .. maka nanti akan ada linknya kan .. nahhh  link itulah    yang akan kalian pakai dalam hal ini) - nanti akan aldi jelaskan cara meng uploadgambarnya  ke   photobucket. kira-kira 2 hari lagi 
•  oke lanjut ke tulisan berwarna hijau : untuk yang ini adalah tinggi dan lebar gambarnya .. ( kalo yang ini engga usah di jelasin .. udah paham kan  )

dan hasilnya ...coba klik sendiri aja deh gambarnya ...

---

 untuk kalian yang mungkin menginginkan alamat gambar yang lain ..
nih kebetulan aldi ada kok setelah nyopet punyanya kang rohman .hehehe 
tapi sekali lagi makasih yaaa kang rohman ..

   

:)happy 
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif" width=18 height=18 border=0> 

:(sad
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif" width=18 height=18 border=0> 

;)winking
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif" width=18 height=18 border=0> 

:Dbig grin
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif" width=18 height=18 border=0> 

;;)batting eyelashes
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/5.gif" width=18 height=18 border=0> 

>:D<big hug
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/6.gif" width=42 height=18 border=0> 

:-/confused
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif" width=20 height=18 border=0> 

:xlove struck
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/8.gif" width=18 height=18 border=0> 

:">blushing
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/9.gif" width=18 height=18 border=0> 

:Ptongue
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif" width=18 height=18 border=0> 

:-*kiss
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif" width=18 height=18 border=0> 

=((broken heart
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/12.gif" width=18 height=18 border=0> 

:-Osurprise
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/13.gif" width=18 height=18 border=0> 

X(angry
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/14.gif" width=34 height=18 border=0> 

:>smug
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/15.gif" width=18 height=18 border=0> 

B-)cool
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/16.gif" width=18 height=18 border=0> 

:-Sworried
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/17.gif" width=18 height=18 border=0> 

#:-Swhew!
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/18.gif" width=34 height=18 border=0> 

>:)devil
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/19.gif" width=18 height=18 border=0> 

:((crying
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif" width=22 height=18 border=0> 

:))laughing
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif" width=18 height=18 border=0> 

:straight face
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/22.gif" width=18 height=18 border=0> 

/:)raised eyebrow
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/23.gif" width=18 height=18 border=0> 

=))rolling on the floor
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif" width=30 height=18 border=0> 

O:-)angel
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/25.gif" width=30 height=18 border=0> 

:-Bnerd
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/26.gif" width=24 height=18 border=0> 

=;talk to the hand
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/27.gif" width=18 height=18 border=0>


:o3puppy dog eyes - New!

<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/108.gif" width=31 height=18 border=0> 

:-??I don't know
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/106.gif" width=40 height=18 border=0> 

%-(not listening
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/107.gif" width=52 height=18 border=0> 

:@)pig
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/49.gif" width=18 height=18 border=0> 

3:-Ocow
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/50.gif" width=18 height=18 border=0> 

:()monkey
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/51.gif" width=21 height=18 border=0> 

~:>chicken
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/52.gif" width=18 height=18 border=0> 

@};-rose
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/53.gif" width=18 height=18 border=0> 

%%-good luck
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/54.gif" width=18 height=18 border=0> 

**==flag
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/55.gif" width=25 height=18 border=0> 

(~~)pumpkin
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/56.gif" width=17 height=18 border=0> 

~O)coffee
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/57.gif" width=18 height=18 border=0> 

*-:)idea
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/58.gif" width=30 height=18 border=0> 

8-Xskull
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/59.gif" width=18 height=18 border=0> 

=:)bug
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/60.gif" width=20 height=18 border=0> 

>-)alien
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/61.gif" width=18 height=18 border=0> 

:-Lfrustrated
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/62.gif" width=18 height=18 border=0> 

[-O<praying
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/63.gif" width=18 height=18 border=0> 

$-)money eyes
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/64.gif" width=18 height=18 border=0> 

:-"whistling
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/65.gif" width=22 height=18 border=0> 

b-(feeling beat up
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/66.gif" width=18 height=18 border=0> 

:)>-peace sign
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/67.gif" width=22 height=18 border=0> 

[-Xshame on you
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/68.gif" width=22 height=18 border=0> 

\:D/dancing
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/69.gif" width=26 height=18 border=0> 

>:/bring it on
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/70.gif" width=23 height=18 border=0> 

;))hee hee
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/71.gif" width=18 height=18 border=0> 

:-@chatterbox
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/76.gif" width=36 height=18 border=0> 

^:)^not worthy
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/77.gif" width=32 height=18 border=0> 

:-joh go on
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/78.gif" width=26 height=18 border=0> 

(*)star
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/79.gif" width=18 height=18 border=0> 

o->hiro
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/72.gif" width=18 height=18 border=0> 

o=>billy
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/73.gif" width=18 height=18 border=0> 

o-+april
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/74.gif" width=18 height=18 border=0> 

(%)yin yang
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/75.gif" width=18 height=18 border=0>                  



Artikel Tambahan :

ada lagi nih ..kalo yang ini engga nyopet  ..hehehe.
 lihat yaa kalo engga nanti aldi chidori nih ...





<img border="0" src="http://pic60.picturetrail.com/VOL1698/12134860/21582353/355343104.jpg " title="Click to get more." /></img>



<img border="0" src="http://onepieceindo.files.wordpress.com/2009/10/luffyattack.gif?w=200&h=100" title="Click to get more." /></img>


<img border="0" src="http://onepieceindo.files.wordpress.com/2009/10/zoroattack.gif?w=150&h=100" title="Click to get more." /></img>



<img border="0" src="http://onepieceindo.files.wordpress.com/2009/10/sanji.gif?w=120&h=76" title="Click to get more." /></img>


<img border="0" src="http://onepieceindo.files.wordpress.com/2009/10/1_121.gif?w=100&h=150" title="Click to get more." /></img>




<img border="0" src="http://i446.photobucket.com/albums/qq182/kisot06/Akatsuki%20gif/DeidaraBird.gif " title="Click to get more." /></img>




<img border="0" src="http://i446.photobucket.com/albums/qq182/kisot06/Naruto1%20gif/Kakashi.gif " title="Click to get more." /></img>

---

untuk kalian yang ingin melihat animasi-animasi seperti di atas lebih banyak lagi .. silakan klik disini
nanti kalian copypaste saja .. sebagai contoh :

<div style="position: fixed; bottom: 0px; left: 10px;width:130px;height:160px;"><a href="http://www.zengbogel.blogspot.com" target="_blank"><img border="0" src="http://i446.photobucket.com/albums/qq182/kisot06/Akatsuki%20gif/DeidaraBird.gif " title="Click to get more." /></a><small><center><a href="http://www.zengbogel.blogspot.com" target="_blank">Widget Animasi</a></center></small></div>

sekedar mengingatkan perhatikan tulisan yang berwarna merah .. kalian copy paste alamat- alamat animasi tersebut yaa ..


oke deh kalo kalian masih bingung juga cara membuat link dengan animasi di atas, biar aldi kasih contoh :
langsung di klik aja yaa ...



dan ini scriptnya

<a href="http://zengbogel.blogspot.com/2011/11/cara-pasang-animasi-lucu-pada-blog.html" target="_blank"><img src="http://i446.photobucket.com/albums/qq182/kisot06/Akatsuki%20gif/DeidaraBird.gif"
width="200" height="150" /></a>

kalian dapat mengatur tinggi gambar dan panjang gambar dengan mengubah angka pada tulisan yang berwarna orange pada contoh di atas .

width="100" => untuk mengatur panjang gambar
height="100" => untuk mengatur tinggi gambar

sekedar tambahan

sebenarnya link ini sudah aldi berikan tadi di atas .. tapi tidak apalah sekedar mengingatkan saja yaa .
bagi kalian yang ingin membuat gambar animasi lucu ada di pojok blog kalian silakan klik disini

dan bagi kalian yang ingin membuat tulisan berjalan (marquee) dengan animasi silakan klik disini

selamat mencoba