Membuat Gambar atau Logo Menjadi Tombol Link

Pernahkan kita melihat di sebuah blog atau website ada sebuah gambar atau logo yang apabila kita klik maka akan menuju ke sebuah Link, Maka dari itu pada postingan kali ini saya akan mencoba menjelaskan tentang cara Membuat Gambar atau Logo Menjadi Tombol Link.

Agar sebuah gambar bisa dijadikan tombol link, maka ada beberapa langkah yang harus di lakukan :

1. Siapkan sebuah gambar atau logo yang sudah di simpan di folder komputer kita.
2. Buka situs Photo Bucket untuk mengupload gambar.
3. Kalau belum punya akun silahkan daftar dulu sampai selesai. Lalu sign in dengan akun agan.
4. Sesudah masuk lalu Pilih upload now seperti gambar di bawah ini :


Keterangan : Create new album untuk membuat album baru, sedangkan Upload From adalah tempat kita akan mengupload gambar, Pilih saja My Computer karena kita akan mengupload gambar dari komputer kita.

5. Klik 2 kali tombol hijau yang bertuliskan Select Photos and Videos, lalu pilih gambar atau logo yang sudah di siapkan tadi di folder komputer kita.
6. Klik ok untuk memulai upload, tunggu sampai ada tulisan upload complete.

7. Lalu klik tulisan Save and Continues to my album
8. Maka akan muncul gambar yang sudah kita upload tadi.

Maka akan terdapat HTML code gambar yang sudah kita upload, untuk contoh di atas saya mengupload Logo blogger. Tinggal copy kode tersebut ke blog kita untuk di jadikan tombol link.

Namun perjalanan belum selesai sobat, kita harus melanjutkan ke step berikutnya yaitu memasang HTML Code di blog kita. Yang pertama-tama kita lakukan adalah :

1. Sign In dulu ke akun blogger agan.
2. Pilih Rancangan lalu pilih Tambah gadget.
3. Sepeti biasa pilih HTML Java Script.
4. Masukkan HTML code yang telah di copy tadi, makan kodenya akan seperti di bawah ini :

<a href="http://s1214.photobucket.com/albums/cc496/fakhrur86/?action=view&amp;current=blogger-logo.jpg" target="_blank"><img src="http://i1214.photobucket.com/albums/cc496/fakhrur86/blogger-logo.jpg" border="0" alt="Photobucket"></a>

5. Gantilah Kode yang berwarna merah dengan kode Link yang kita kehendaki, untuk kali ini saya akan mengganti dengan Link Kode blog ini, sehingga menjadi :

<a href="http://encepfr.blogspot.com/" target="_blank"><img src="http://i1214.photobucket.com/albums/cc496/fakhrur86/blogger-logo.jpg" border="0" alt="Photobucket"></a>

6. Agar Posisinya berada di tengah maka kita tinggal menambahkan kode yang berwarna biru

<p align="center"><a href="http://encepfr.blogspot.com/" target="_blank"><img src="http://i1214.photobucket.com/albums/cc496/fakhrur86/blogger-logo.jpg" border="0" alt="Photobucket"></a></p>


Maka Hasilnya akan seperti di bawah ini :

Photobucket


Aduuuh ternyata lupa di resize ukurannya,. maaf ya gan. sebelum di Copy Kode HTML nya. biar ukurannya kecil harus di resize terlebih dahulu, Caranya yaitu Tinggal klik gambar kita yang ada di album Photobucket. maka akan tampil Seperti gambar di bawah ini :


Klik Resize untuk merubah ukuran gambar agar lebih kecil. setelah itu ambil kembali HTML code nya. Selain itu ada pilihan lain untuk Mengedit, Rotate, Share dan yang lainnya. Coba di pelajari sendiri saja oke.

Sekian postingan kali ini semoga tidak membingungkan.

2 comments

tutor yang bermanfaat gan....kalo pake imageshack bisa juga ya gan ? thnx infonya

Reply

@ Erdi : Makasih gan dah mampir. sama-sama. Iya bisa gan upload pake image shack sama kaya photobucket.

Reply

Posting Komentar