CARA MUDAH MEMBUAT KODE HTML GAMBAR


Artikel ini saya dedikasikan untuk seorang sahabat new blogger nun jauh diseberang. Beberapa hari yang lalu, beliau meninggalkan pesan di shoutbox dengan identitas "guest" yang tidak disertai link, sehingga saya tidak tahu siapa sesungguhnya beliau dan bagaimana melacak keberadaannya. Ada dua hal yang ditanyakan, yaitu begaimana membuat link dan bagaimana membuat shoutbox jadi berwarna. Bagi seorang blogger yang sudah lama berkecimpung dalam dunia blogging dan seluk-beluk bogging, dua hal ini tentu saja bukan sesuatu yang sulit untuk dilakukan. Tapi bagi seorang pemula, itu bukan perkara yang mudah.


Terinspirasi oleh pertanyaan sahabat tadi, maka pada kesempatan ini saya akan coba berbagi dengan sahabat, terutama sahabat pemula yang baru saja berkecimpun dalam dunia blogging, cara mudah membuat kode html gambar sekaligus membuat link. Untuk membuat shoutbox jadi berwarna insya Allah dibahas pada kesempatan yang lain.

Saya awali dengan membuat kode html gambar. Kita ambil contoh icon gambar "U Comment I Follow sebagaimana gambar yang sahabat dapat lihat di bawah ini :




Langkah pertama yang harus dilakukan agar gambar memiliki kode HTML adalah dengan menguploadnya kebeberapa situs yang menyediakan fasilitas ini. Situs yang sering saya gunakan adalah www.photobucket.com. untuk membuat account di photobucket, silahkan klik di sini. Setelah memiliki account di photobucket, login ke account sahabat, lalu upload gambar yang ingin dibuat kode HTML nya. Setelah selesai upload, klik gambar yang diupload tadi dan tunggu beberapa saat sampai muncul kode HTML nya. Copi kode tersebut lalu paste pada notepad. Contoh kode HTML gambar di atas seperti ini :

<img src="http://i637.photobucket.com/albums/uu95/ukhuwah/follow2.jpg
">

Kode ini sudah bisa ditambahkan ke sebagai widget ke elemen halaman blog sahabat tetapi belum bisa diklik. Sekarang, bagaimana menjadikan kode HTML gambar ini menjadi sebuah link yang bisa diklik pengunjung?. Berikut caranya. Misalnya gambar ini akan saya link ke blog ini (http://www.sbahry.co.cc). Maka linknya seperti ini :


<a href="http://www.sbahry.co.cc" target="new"><img src="http://i637.photobucket.com/albums/uu95/ukhuwah/follow2.jpg
"></a>


Contoh kongkritnya seperti ini :




Gambar ini sudah berbentuk sebuah link, jika diklik akan membawa sahabat ke sebuah jendela baru tetap di blog saya ini. Mengapa demikian?, karena ada perintah untuk membuka halaman baru yaitu kode (target="new")yang saya berikan pada pada link di atas. Untuk membuktikannya silahkan klik gambar tersebut di atas.

Sekarang bagaimana caranya membuat link blog yang sahabat blogger sering temukan dengan tulisan "Klik di sini" sebagaimana pertanyaan sahabat yang saya kemukakan di awal tulisan ini, berikut caranya :

Alamat blog ini adalah http://www.sbahry.co.cc maka linknya seperti ini :

<a href="http://www.sbahry.co.cc">www.sbahry.co.cc</a>

hasilnya seperti ini :

www.sbahry.co.cc

Yang nampak dari link ini adalah alamat blog yang apabila diklik tidak membuka sebuah jendela baru. Jika ingin membuat jendela baru, maka pada link tersebut harus ditambahkan kode target="new", sehingga bentuknya seperti menjadi seperti ini :


<a href="http://www.sbahry.co.cc" target="new">www.sbahry.co.cc</a>


Untuk menyembunyikan alamat blog, www.sbahry.co.cc dapat diganti dengan tulisan "Klik di sini", sehingga bentuknya menjadi seperti ini :

<a href="http://www.sbahry.co.cc" target="new">
Klik di sini</a>

Untuk membuktikannya silahkan Klik di sini

Sekarang bagaimana membuat link satu halaman dari sebuah artikel yang ditulis kemudian ingin ditautkan dengan artikel lain dengan tema yang sama dalam suatu blog. Caranya sebagai berikut :

Sebagai langkah awal, sahabat harus terlebih dahulu mengetahui alamat artikel yang akan ditautkan. Caranya mudah, cukup klik judul artikel yang ingin ditautkan kemudian perhatikan address bar, itulah alamat artikel tersebut. Kopi lalu simpan pada notepad. Langkah selanjutnya adalah membuat link.

Misalnya artikel yang sedang sahabat baca ini akan saya tautkan dengan artikel "SOSIALIASI PENGGUNAAN ICON U COMMENT I FOLLOW" yang alamatnya


http://www.sbahry.co.cc/2009/05/sosialisasi-penggunaan-
icon-u-comment-i.html


maka linknya menjadi seperti ini :


<a href="http://www.sbahry.co.cc/2009/05/sosialisasi-penggunaan-
icon-u-comment-i.html">klik si sini</a>


untuk membuktikannya silahkan klik si sini

Ok sahabat, mudah bukan?. Berhubung jari-jari saya juga sudah pegal-pegal, maka artikel ini saya cukupkan sampai disini. Selamat mencoba semoga bermanfaat.

Baca juga artikel berikut :



Comments :

27 komentar to “CARA MUDAH MEMBUAT KODE HTML GAMBAR”

JengSri mengatakan...
on 

di coba ahhh

NYoMaN mengatakan...
on 

memang patut dicoba Jeng

Agung mengatakan...
on 

bagus :)

Setiawan mengatakan...
on 

makasih infonya mas... akan saya coba.. nice.. keep posting..

Riz@l mengatakan...
on 

thank info nya patut dicoba...

pixellcell mengatakan...
on 

Thanks infonya sob, keep sharing ...

Ardhiansyam mengatakan...
on 

Keren sob tutoriaknya, mengalir dan mudah dipahami :)

V3 Alifah mengatakan...
on 

yup :)...padat dan mengena

flying_low17 mengatakan...
on 

Hello my friend, thank you for the visit, new day of happiness and peace. Hugs Valter.
http://flying-low17.blogspot.com
http://flying-low18.blogspot.com

Karumbu mengatakan...
on 

infonya menarik, mudah dicerna, dan bermanfaat buat blogger baru seperti saya. makasih. salam kenal.

Siganteng mengatakan...
on 

kunjungan untuk sahabat

Indoster.blogspot.com mengatakan...
on 

salam perdana dari indoster.blogspot.com

Blok c No.3 mengatakan...
on 

yupz...sangat bermanfaat...

Panca mengatakan...
on 

nice post n inspiratif deh...salam kenal yah

Visit me on http://pancallok.blogspot.com

SeriBahasa mengatakan...
on 

kan manusia namanya ragamnya juga ya berjenis. ya punya kepentingan masing-masing, tapi pada pikiran saya kedua belah pihak sama mendapat manfaatnya. hampir lupa mas sabry terima kasih tipnya. udah dicopy semua buat rujukkan.

Dwi Budi Priyanta mengatakan...
on 

Wah...info Bagus...
Salam Sukse..

My Blog mengatakan...
on 

makasih mas info nya...
salam knl..

kakara mengatakan...
on 

Nice posting.. Keep share frenz:)

bu beng cu mengatakan...
on 

Thank's ya. Saya copy dulu artikelnya.

Lina mengatakan...
on 

Klo itu aku dah lumayan ngerti. Hehe...

Sanur Sukur mengatakan...
on 

makasih banget....saya pengen bikin link tapi ngga bisa bisa

Citra Pradipta mengatakan...
on 

makasih bnyak pak^^
very very usefull for me.. hhe

kang tatang mengatakan...
on 

Keren Infonya :)
salam untuk sahabat semua :)

kangtatang

phsyco_izzy mengatakan...
on 

semua yang di posting Bang Bahri's ku coba ah.....
nambah ilmu nich....

Firman Panca Sekti Andy mengatakan...
on 

TriMaKasih mas.. Sangat2 memBantu.. Saya NewBie dan Lagi kebIngUNgan menCarI Cara UNTUK memBuat Open new Tab.. sekali lagi makasizH mas.. benar2 sngaT memBantu.. Numpang promo BloG Ya Mas.

www.veroccanews.blogspot.com
www.veroccanewsworld.blogspot.com
www.veroccamp3.blogspot.com
www.punyapucca.blogspot.com

mohon di follow ya mas.. makasih banyak

YPP mengatakan...
on 

Assalamualaikum

Mas mau nanya, gimana caranya bikin text area berjalan seperti punya Mas "Link blog teman-temankoe"

kunjing balik http://almunawwar.wordpress.com/

Terma Kasih

PuM2 mengatakan...
on 

Thx bgt atas infonya... sungguh mmbantu bagi saya yg masih newbie... sukses selalu bersaa artikel2nya bang...

Posting Komentar

Template by - Abdul Munir | Daya Earth Blogger Template