Membuat link gambar melayang

Posted by Unknown on Minggu, 26 Februari 2012 0

Cerdaskom Tips SEO: Akhir-akhir ini cerdaskom banyak membahas tentang tisp seo dikarenakan banyaknya permintaan dari rekan blogger. kemarin seorang teman rekan blogger bertanya pada cerdaskom, "Bagaimana membuat link gambar melayang?". untuk menjawab pertanyaan rekan tersebut maka buku tamu cerdaskom sekarang melayang di kanan bawah. hal ini cerdaskom sengaja sebagai gambaran dari tips link gambar melayang kali ini (lih.gambar)

contoh: lihat pada kana bawah bergambar buku

Langsung saja ke TKP:
1.Silakan masuk blogger, lalu Klik Rancangan
2. Klik Tambah Gadget (terserah dimana saja), lalu seperti biasa pilih HTML/Javascript
Pada bahasan kali cerdaskom akan membagi 4 posisi link gambar melayang: Jadi rekan blogger cukup mengcopy kode dibawah ini:

Gambar berada di Pojok Kanan-Atas:
<a href="http://cerdaskom.cbox.ws/" style="display:scroll;position:fixed;top:5px;right:5px;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiK2p9U3SoZtl4QVlISMVyqrqTTEjtXLxobLuCFoUJEa-ij3kTZ3E3rfvPTq3SDnY-0zKPwJGFfsLPDUCcG0nITz5adYE9j_dvOdU-UKEKc5Yqx8vvf3dAL6zBG6GQjHCKSjOFxrMGgost/s1600/buku_tamu.jpg"/></a>

Gambar berada di Pojok Kanan-Bawah:
<a href="http://cerdaskom.cbox.ws/" style="display:scroll;position:fixed;bottom:5px;right:5px;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiK2p9U3SoZtl4QVlISMVyqrqTTEjtXLxobLuCFoUJEa-ij3kTZ3E3rfvPTq3SDnY-0zKPwJGFfsLPDUCcG0nITz5adYE9j_dvOdU-UKEKc5Yqx8vvf3dAL6zBG6GQjHCKSjOFxrMGgost/s1600/buku_tamu.jpg"/></a>

Gambar berada di Pojok Kiri-Atas:
<a href="http://cerdaskom.cbox.ws/" style="display:scroll;position:fixed;top:5px;left:5px;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiK2p9U3SoZtl4QVlISMVyqrqTTEjtXLxobLuCFoUJEa-ij3kTZ3E3rfvPTq3SDnY-0zKPwJGFfsLPDUCcG0nITz5adYE9j_dvOdU-UKEKc5Yqx8vvf3dAL6zBG6GQjHCKSjOFxrMGgost/s1600/buku_tamu.jpg"/></a>

Gambar berada di Pojok Kiri-Bawah:
<a href="http://cerdaskom.cbox.ws/" style="display:scroll;position:fixed;top:5px;left:5px;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiK2p9U3SoZtl4QVlISMVyqrqTTEjtXLxobLuCFoUJEa-ij3kTZ3E3rfvPTq3SDnY-0zKPwJGFfsLPDUCcG0nITz5adYE9j_dvOdU-UKEKc5Yqx8vvf3dAL6zBG6GQjHCKSjOFxrMGgost/s1600/buku_tamu.jpg"/></a>

3. Klik Simpan Dan Lihat hasilnya

Keterangan link gambar melayang:
Sebenarnya ide membuat gambar melayang tidaklah sulit, untuk itu mari kita lihat keterangan penggunaan kodenya:

<a href="http://cerdaskom.cbox.ws/" : adalah link yang dituju ketika gambar di klik


style="display:scroll;position:fixed;top:5px;left:5px;"> : Merupakan posisi dari gambar lihat jika posisinya atas-kiri maka penulisannya Top; left tetapi jika posisinya atas-kanan maka Top;Right demikian seterusnya sementara style="display artinya gambar dimunculkan.


<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiK2p9U3SoZtl4QVlISMVyqrqTTEjtXLxobLuCFoUJEa-ij3kTZ3E3rfvPTq3SDnY-0zKPwJGFfsLPDUCcG0nITz5adYE9j_dvOdU-UKEKc5Yqx8vvf3dAL6zBG6GQjHCKSjOFxrMGgost/s1600/buku_tamu.jpg"/>
: Merupakan link gambar yang akan ditampilkan. untuk membuat link gambar ini sendiri cukup mudah, anda bisa memasukan gambar terlebih dahulu ke picasa atau tempat penyimpanan gambar lainnya lalu anda klik kanan gambar tersebut pilih - open image new tab, nantinya lokasi link gambar akan kelihatan. Cara lainnya adalah dengan mengambil dari google cari ukuran gambar yang kecil lalu klik kanan gambar- pilih open image new tab. lokasi link gambar akan kelihatan.

NB: Teknik ini sebenarnya tidak hanya berlaku untuk gambar, tetapi juga animasi, iklan dan video.
Semoga ulasaan cerdaskom kali ini bermanfaat!