Easiest Tooltip and Image Preview Using jQuery

Cara membuatnya :
1. Login blogger
2. Rancangan, Edit Html, Cari kode ]]></b:skin>
3. Dan Simpan kode berikut diatasnya :

/* ---------------
Easiest Tooltip and Image Preview with jQuery
---------------------------------- */
#Imagetip{
    margin:0;
    padding:0;
}
#Imagetip li{
    list-style:none;
    float:left;
    display:inline;
    margin-right:10px;
}



/*  */

#preview{
    position:absolute;
    border:1px solid #ccc;
    background:#333;
    padding:5px;
    display:none;
    color:#fff;
    }

selanjutnya simpan kode berikut diatas kode </head> :

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="http://kangdadang.googlecode.com/files/main2.js" type="text/javascript"></script>

terakhir cara pemanggilannya pda HTML :

<ul id="Imagetip">
<li><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWXlvonhRrMe1pcqk4JR60y3h77IwL93i9OpI_FoXFiv-S6ku8qaddK6hX-tD8fy_X3KBs-eMzDvkfNQ4iOTUuqi5219StNZ1x7yXZha8zAGne1EiYkCMX-3tV6djMqQ4sB7kq0f3KLJQ/s1600/1.jpg " class="preview" title="Lake and a mountain">
<img width="100px" height="75px" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWXlvonhRrMe1pcqk4JR60y3h77IwL93i9OpI_FoXFiv-S6ku8qaddK6hX-tD8fy_X3KBs-eMzDvkfNQ4iOTUuqi5219StNZ1x7yXZha8zAGne1EiYkCMX-3tV6djMqQ4sB7kq0f3KLJQ/s1600/1.jpg" alt="gallery thumbnail" /></a>
</li>
<li><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimay9fC0SmxCko3902V0x76xQwJo7g7yj4rj78nRfwebrNTexFSApxzbG2SdkikMjwV8HHpkApeVI67JBb17GkFZrji0BVV2nxVyqCmhVjbHZcEormRv-Pf80tEdT4b6qXk8MZfXSKe7s/s1600/2.jpg" class="preview" title="Fly fishing"><img width="100px" height="75px" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimay9fC0SmxCko3902V0x76xQwJo7g7yj4rj78nRfwebrNTexFSApxzbG2SdkikMjwV8HHpkApeVI67JBb17GkFZrji0BVV2nxVyqCmhVjbHZcEormRv-Pf80tEdT4b6qXk8MZfXSKe7s/s1600/2.jpg" alt="gallery thumbnail" /></a>
</li>
<li><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuIVAKUoIJ5xMUtsBPd2W7V8YOwN9iFMTeCU4-qvC5LAvlTQJWZc0F8dXADXPeKx6k4biriijX04Znl4DsHMf_Z197m3MbI-lPOL2eDnfnvRIXbyKYQ0HnyKG8pUZyFUlFLziGf7Cvwow/s1600/3.jpg" class="preview" title="Autumn"><img width="100px" height="75px" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuIVAKUoIJ5xMUtsBPd2W7V8YOwN9iFMTeCU4-qvC5LAvlTQJWZc0F8dXADXPeKx6k4biriijX04Znl4DsHMf_Z197m3MbI-lPOL2eDnfnvRIXbyKYQ0HnyKG8pUZyFUlFLziGf7Cvwow/s1600/3.jpg" alt="gallery thumbnail" /></a>
</li>
<li><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhU_YfkLMTSbjFfk949jc_uJoxX0nlb6Eqen1WEszGZoL8HvVwsXmxRIiHaqC97SfTXh8UWXUv0hl4vUfHp-p2ZFhKTVUSuQOmkPgEDyH_Ajg0MsNYrZUlEEOZlzReb0sxTnScQEJQxb4/s1600/4.jpg" class="preview" title="Skiing on a mountain"><img  width="100px" height="75px" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhU_YfkLMTSbjFfk949jc_uJoxX0nlb6Eqen1WEszGZoL8HvVwsXmxRIiHaqC97SfTXh8UWXUv0hl4vUfHp-p2ZFhKTVUSuQOmkPgEDyH_Ajg0MsNYrZUlEEOZlzReb0sxTnScQEJQxb4/s1600/4.jpg" alt="gallery thumbnail" /></a>
</li>
    </ul>

selamat mencoba dan mengembangkannya..... sukses...