Cara Membuat Link dengan Gambar

|
Cara Membuat Link dengan Gambar - Blogger

Cara Membuat Link dengan Gambar atau Logo - Link atau hyperlink dalam konteks blogger merupakan tautan atau penghubung antar halaman. Suatu halaman memiliki hubungan yang terkait dengan halaman lain.
Sebenarnya ada banyak bentuk link, yakni antara lain teks, tombol, dan gambar. Namun sesuai dengan topik yang akan kita bahas sekarang, saya akan share artikel bagaimana membuat sebuah link dengan menampilkan sebuah logo atau gambar. Jika pointer kursor mouse anda letakkan pada gambar, biasanya pointer akan berubah bentuk menjadi icon tangan atau icon lain yang sudah di setting secara khusus. Perubahan ini sebagai tanda bahwa gambar tersebut adalah sebuah link. Apabila gambar di klik, maka pengunjung atau pembaca akan diarahkan ke halaman lain yang sebelumnya telah di setting oleh pemilik blog.

Apa fungsi Link dengan Gambar?
Link dengan gambar atau gambar berlink terkadang digunakan ketika anda melakukan tukar link (link exchange) dengan blogger lain, atau ketika anda melakukan promosi di situs orang lain dan anda menginginkan link yang anda pasang menampilkan sebuah gambar, baik itu gambar banner dari produk yang akan anda jual atau logo dari blog anda. Dan ketika gambar atau logo tersebut di klik maka akan mengarah ke halaman blog anda, seperti yang sudah saya jelaskan diatas. Hal ini juga bisa anda lakukan ketika anda mempromosikan situs lain di blog anda. Selain itu link dengan gambar akan memperlihatkan keprofesionalan website atau blog dari link tersebut.

Bagaimana Cara Membuat Link  dengan Menampilkan Gambar atau Logo?
Cara membuat link pada blogger dengan tampilan sebuah logo atau gambar sangatlah mudah, tetapi masih banyak para blogger dan blogger newbie yang masih bingung bagaimana cara membuatnya. Saat membuat link atau tautan, pada umumnya akan menampilkan sebuah text berwarna biru (tergantung template) dengan sebuah garis dibawah text atau biasa disebut underline. Nah text atau tulisan ini bisa anda ganti dengan gambar, yakni dengan mengganti text dengan url gambar yang sebelumnya telah anda simpan pada media penyedia layanan file hosting tertentu. Yuk kita langsung ke langkah-langkahnya.

Langkah-langkah Membuat Link dengan Gambar atau Logo

Untuk membuat link dengan gambar, caranya cukup dengan menggabungkan kode HTML untuk membuat link dengan kode HTML untuk menampilkan gambar.

Upload Gambar
1. Sediakan gambar atau logo yang akan anda pasangkan sebuah link.
2. Silahkan upload gambar tersebut. Gambar bisa anda upload atau unggah pada blog yang anda miliki ketika membuat artikel, atau bisa juga pada file hosting tertentu. Untuk contoh, coba anda upload gambar pada postingan blog agar lebih praktis.
3. Buat Entri baru, kemudian gunakan fasilitas untuk memasukkan gambar pada editor postingan seperti gambar berikut.

Upload Gambar - Blogger

4. Tekan tombol Pilih file >> pilih gambar yang akan anda pasang >> klik Open >> tekan Add Selected hingga gambar muncul pada editor postingan, seperti gambar berikut.

Upload Gambar - Blogger

5. Klik kanan pada gambar tersebut, lalu pilih Salin Lokasi Tautan (Copy link address) untuk mendapatkan URL gambar yang akan anda pasang. Kemudian paste pada Notepad sebagai penyimpan sementara.

Buat Kode HTML link dengan Gambar
Berikut script kode HTML link dengan gambar.

<a href='URL-TUJUAN'  title='JUDUL-LINK'>
<img src='URL-GAMBAR' width='LEBAR-GAMBAR' height='TINGGI-GAMBAR' alt='DESKRIPSI-GAMBAR' border='none' />
</a>

Silahkan ganti tulisan berwarna merah sesuai dengan keperluan anda.
1. URL-TUJUAN, ganti dengan url tujuan misalkan (http://harmansh.blogspot.com). Apabila link tersebut di klik, maka pengguna akan diarahkan ke halaman harmansh.blogspot.com.
2. JUDUL-LINK, ganti dengan judul yang anda inginkan. Judul ini akan muncul tepat dibawah pointer kursor ketika pointer kursor diarahkan ke gambar.
3. URL-GAMBAR, ganti dengan url gambar yang sudah anda upload dan simpan di notepad tadi.
4. LEBAR-GAMBAR, ganti dengan nilai lebar gambar sesuai dengan keperluan.
5. TINGGI-GAMBAR, ganti dengan nilai tinggi gambar sesuai dengan keperluan.
6. DESKRIPSI-GAMBAR, ganti dengan kata kunci yang anda targetkan sesuai dengan halaman yang akan dituju. Sebaiknya diisi untuk meningkatkan SEO friendly gambar tersebut.

Berikut contoh script kode HTML link gambar yang sudah jadi.

<a href='https://harmansh.blogspot.com' title='HARMANSYAH BLOG'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhexg1D7cIm3R0OFSJR2krbqcmHGUdbB8X-UoNF_HYSjMczQaUe58SuIkajnwUptaB9w2I04g65rrW-srDQGA251SrZRU6hMtz6lG2s5VztC-HYbqbXZQY_L9KGWJOBbZXpwReMKwL_N8w/s1600/harmansh.blogspot.com.jpg' alt='tutorial blogger' width='300' height='200' border='no' /></a>

Hasilnya akan seperti berikut.

tutorial blogger


Coba anda arahkan pointer kursor anda dan klik gambar terssebut.
Baca juga :

Demikian tutorial sederhana tentang bagaimana cara membuat link dengan gambar atau logo. Semoga bermanfaat and " Happy Blogging "

Related Posts :

Silahkan klik disini untuk berlangganan Artikel Gratis via email, Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di HARMANSYAH BLOG

0 komentar:

Post a Comment

...... Terima kasih telah berkunjung, silahkan berkomentar dengan baik sopan sesuai dengan tema konten dan tidak mengandung unsur Sara ......