Membuat Tooltip gambar dalam link pada blog

Tooltip gambar dalam link.Setelah beberapa hari posting tentang fakta unik sekarang kembali lagi posting tentang trik blogspot, lebih tepatnya posting tentang membuat tooltip gambar dalam link.
kebanyakan yang kita tahu tooltip itu adalah menampilkan konten text jika kita sorot sebuah link, tapi pada banyak website juga banyak yang menerapkan trik ini.
Jika anda bingung , berikut ini contohnya:
Silahkan sorot mouse anda ke link berikut ini.

Contoh tooltip

Untuk cara-caranya cukup gampang.
1.silahkan ke design/rancangan-->edit Html.
pastekan kode berikut ini di atas </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>

2.jika sudah simpan template anda, selanjutnya untuk membuat tooltip , silahkan gunakan link berikut ini di mana pun anda suka.

<a class="screenshot" href="url tujuan" rel="url gambar tooltip" title="judul gambar">nama tooltip</a>

tips : jika anda membuat sebuah link pada blog, cukup anda tambahkan kode berikut di antara a dan href.
<a  class="screenshot" rel="url gambar tooltip" href=" "> </a>

Untuk mengubah desain tooltip anda , silahkan anda edit css yang di letakkan di atas </head> tadi. mungkin anda mau mengubah ukuran , border dan menambahkan hal-hal lainnya .. selamat berkreasi .tapi jika ngikut tampilan ini aja udah oke koq.