Link HTML Gambar | Cara Membuat Link HTML Bergambar

 oke selamat malam semua ( so'alnya aldi membuatnya malem hari nih smug ) ..
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 surprise .hehehe big grin .
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 batting eyelashes .
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 smug
  •  oke lanjut ke tulisan berwarna hijau : untuk yang ini adalah tinggi dan lebar gambarnya .. ( kalo yang ini engga usah di jelasin .. udah paham kan feeling beat up )


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

HTML tutorial



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

   

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

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

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

big grin: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;;)batting eyelashes
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/5.gif" width=18 height=18 border=0> 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

straight face: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/:)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=))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> 

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

nerd:-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=;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>


puppy dog eyes - New!: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:-??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%-(not listening
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/107.gif" width=52 height=18 border=0> 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

feeling beat upb-(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:)>-peace sign
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/67.gif" width=22 height=18 border=0> 

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

dancing\: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>:/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;))hee hee
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/71.gif" width=18 height=18 border=0> 

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

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

oh go on:-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(*)star
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/79.gif" width=18 height=18 border=0> 

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

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

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

yin yang(%)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 :





DeidaraBird Koleksi Gambar Animasi Bergerak Naruto GIF Lengkap



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

26 komentar:

  1. saya suka blok anda tentang link html gambar cara membuat link html, saya berharap untuk melihat lebih banyak dari anda. apakah anda menjalankan situs lain????

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

    BalasHapus
  3. MANCAP BROOO IJIN COPAS,.,.,,

    BalasHapus
  4. Gua saloet tuh......... Lanjut truzzzzzz Broooooooo........

    BalasHapus
  5. bagus sekali. tapi, narutonya mana?
    saya mau yang naruto. :)

    BalasHapus
  6. Ternyata masih ada orang yang baek ati ya... bagi2 ilmunya. Thanks Mas.....! Oh... ya... Untuk sahabat2 blogger, tolong kasih masukkan untuk blogQ biar tambah siiip gitu! Soalnya Q bloggger PEMULa. ni alamatnyahttp:\\www.tazakkagroup.blogspot.com

    BalasHapus
  7. ilmu yang sangat bermanfaat bos, ijin copas ya. thanks

    BalasHapus
  8. maksih yah nama andah telah saya taruh di blog saya namanya http://lavesaru.blogspot.com/

    BalasHapus
  9. Info Ini Sangat Bermanfaat Bro, Upload Lagi Dong Berita Yang Keren Tentang Widget Dan Tentang Blog.

    Jangan Lupa Mampir Ke Blog Saya Juga Yach http://dheaz23.blogspot.com :D


    BalasHapus
  10. ilmu yang sangat membantu, makasih sob. mampi juga di blog saya art images

    BalasHapus
  11. sumber penghasilan tanpa modal dari internet
    www.dollarkristian.blogspot.com

    BalasHapus
  12. mantap gan, izin coba
    www.aefsm.blogspot.com

    BalasHapus
  13. Cara buat sendiri gimana ???

    BalasHapus
  14. sangat bermanfaat nih.,.posting ane jadi ada pareasinya

    BalasHapus
  15. wow, bagus-bagus gambar animasinya. Ada ngak gambar ayam atau burung agrybird nendang2, karena web saya tentnag ayam bangkok aduan bogor laga super http://ayam-bangkok-com.blogspot.com

    BalasHapus
  16. mantap banget ilmunya, komplit.
    makasih gan

    BalasHapus
  17. Seep boleh di coba NEXT
    D - Sh4re
    http://d-sh4re.blogspot.com/

    BalasHapus
  18. Mksh byk yaaah.akan saya praktekkan

    BalasHapus

Diberdayakan oleh Blogger.