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
dan hasilnya .. jrrrrengggg disini link untuk membuka halaman baru
dan yang ini link untuk mengirim email
and ... ini dia hasilnya ( coba klik deh ) disini link untuk mengirim email
nahhh untuk yang ini nih link bergambarnya lihat yukk ..
keterangan :
dan hasilnya ...coba klik sendiri aja deh gambarnya ...
untuk kalian yang mungkin menginginkan alamat gambar yang lain ..
nih kebetulan aldi ada kok setelahnyopet punyanya kang rohman .hehehe 
tapi sekali lagi makasih yaaa kang rohman ..
:)happy
:(sad
;)winking
:Dbig grin
;;)batting eyelashes
>:D<big hug
:-/confused
:xlove struck
:">blushing
:Ptongue
:-*kiss
=((broken heart
:-Osurprise
X(angry
:>smug
B-)cool
:-Sworried
#:-Swhew!
>:)devil
:((crying
:))laughing
:straight face
/:)raised eyebrow
=))rolling on the floor
O:-)angel
:-Bnerd
=;talk to the hand
:o3puppy dog eyes - New!
:-??I don't know
%-(not listening
:@)pig
3:-Ocow
:()monkey
~:>chicken
@};-rose
%%-good luck
**==flag
(~~)pumpkin
~O)coffee
*-:)idea
8-Xskull
=:)bug
>-)alien
:-Lfrustrated
[-O<praying
$-)money eyes
:-"whistling
b-(feeling beat up
:)>-peace sign
[-Xshame on you
\:D/dancing
>:/bring it on
;))hee hee
:-@chatterbox
^:)^not worthy
:-joh go on
(*)star
o->hiro
o=>billy
o-+april
(%)yin yang
Artikel Tambahan :
ada lagi nih ..kalo yang iniengga 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 :
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
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
) ..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>
<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
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
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>
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 .
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
Post a Comment