Cara Membuat Link Pada Gambar

Dukun Design Tuesday, June 28, 2011
Untuk menambahkan link pada gambar menu bertuliskan (home, contact me, about me tips n trik) sebagaimana yang telah dijelaskan pada postingan yang lalu tentang cara membuat header sekaligu menu dengan Photoshop CS 4 maka, hal pertama yang harus dilakukan adalah:
1.   Membuka file .html dengan Notepad/Wordpad untuk mengedit file .html
2.  Cari kode “<table id” tanpa tanda kutip, tambahkan kode align=”center”  sehingga kodenya jadi <table align=”center”  id (kode tersebut untuk memberikan perintah rata tengah)
3.   Setelah itu, kita akan membuat gambar bertuliskan home (menu home) supaya bisa di klik dengan cara menambahkan kode <a href="home.html"> (kode ini untuk memberikan perintah link pada gambar). Yang saya beri warna merah nantinya bisa diganti dengan alamat url web/blog anda). Kode tersebut diletakkan sebelum kode gambar “home”.  Biar terlihat lebih rapi tambahkan juga kode ini border=”0”. Jangan lupa tutup dengan kode </a>. Lebih jelasnya lihat gambar berikut.
4.   Terapkan langkah 1 sampai 3 pada menu/gambar lain yang akan dijadikan link. seperti about me, contact me, tips n trik. Selamat Mencoba!
Catatan:
Anda bisa melihat nama file gambar yang sudah anda potong dengan slice tool pada folder images. 

Terima Kasih Telah Membaca Tutorial Photoshop di Dukun Design (Tips-Trik dan Teknik Belajar Photoshop) 

Blogger Template by BlogTusts Sticky Widget by Kang Is Published by GBT.

16 comments:

  1. Enaknya pakai dreamweafer mas..
    mudah tinggal drag klik aja :)

    mas ganti lah, jangan PsDesain, tapi PSD Desain aja :)
    thanks..

    ReplyDelete
  2. betul sekali kang... sebenernya ini bukan masalah enak ato tidaknya tapi berhubung laptop saya belum diinstal dreamweafer jadinya ujung-ujungnya bikin pake notepad :D hehehe

    injeh gan kulo ganti, link-nya dihidupinlah gan..

    ReplyDelete
  3. caranya gmana yah bro ? masukin ke blogspotnya ?

    ReplyDelete
  4. tolong di perluas yah gan ane udah bisa tapi cara tuangin ke blogspotnya gmana yah gan kaya punya agan ini , thanks buat infonyaa :)

    ReplyDelete
  5. thanks gan atas masukannya, semoga dilain kesempatan saya bisa membuat tutorialnya. oya kalau blog saya ini masih pakai header+menu horizontal bawaan blogger hehe :)

    ReplyDelete
  6. waw gan keren..ini yang saya cari2 thanks ya gan ^^

    ReplyDelete
  7. mas tolong doungg.... tutorialnya wat nuangin ke blogspotnya g mna???

    pengen bangets nh.... mas cuma ky gt doank... nagggung mas!!!!

    makasih..

    ReplyDelete
  8. maaf banget nih gan, lum bisa buat tutorialnya sampai saat ini... komputernya lagi rusak, monitor mati lum da gantinya T_T. sori banget ya gan...

    ReplyDelete
  9. cara uploadnya gimana gan.....?

    ReplyDelete
  10. maturnuwon bro

    http://freelicsoft.blogspot.com/

    ReplyDelete
  11. Thanks ilmunya, nambah wawasan ane nieh tentang link gambar

    ReplyDelete
  12. Makasih gan ... tapi belum saya coba ... entar kukasih kabar lagi ..

    ReplyDelete
  13. keren ini artikelnya membantu banget ;)

    ReplyDelete