Membuat Tooltip Gambar Dalam Link

Tooltip gambar dalam link setelah membaca PERKEMBANGAN ANDROID YANG SEMAKIN MENINGKAT sekarang kita akan bahas tentang tooltip lagi, jadi maksud dari judul di atas adalah ketika orang menyentuh link maka tooltip yang berbentuk gambar akan muncul, dah ngerti belum .. . ? kalau belum langsung cek demonya :)
Nah Setelah Lihat Demonya silahkan anda simak caranya :

DEMO

Klik Rancangan

1. Log in ke blog anda:
2. Klik Rancangan
3. Klik Edit HTML
4. Cari kode </head>
5. Simpan kode di bawah ini di atas kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
<script src="http://sites.google.com/site/zyztem33/js/tooltip%20gambar.js" type="text/javascript"/>
<style type="text/css">
#screenshot{
 position:absolute;
 border:1px solid #ccc;
 background:#090;
 padding:5px;
 display:none;
 color:#fff;
 overflow: hidden
 }
</style>

Jika script Yang saya garis bawahi sudah ada ( jquery sudah ada ) di blog anda semua jadi gak usah lagi di copy script nya yang bergaris bawah cukup yang tidak bergaris bawah saja, kemudian setelah anda simpan di atas kode </head> silahkan anda klik simpan template, dan sekarang cara menggunakannya yaitu dengan menambahkan atribut rel dan juga class ke dalam link seperti di bawah ini :

<a class="screenshot" href="URL Link" rel="URL Link Gambar" title="Disini Judul">Disini Nama Link</a>

Jadi Gunakan kode itu, silahkan gunakan dimana saja yang penting halal hehehe oh iya kalau bisa download script nya dan simpan di hosting sendiri ya..!

Related Post :