Cara Pasang Tooltip dan zoom image Jquery

Hallo sobat Blogger Kumpulan tutorial kali ini akan bikin tooltip yang sekaligus dengan effec Zoom image /gambar membesar untuk melihat contoh klik aja disini arahkan cursor /mouse ke gambar
gimana keren kan ...!!! cara buat nya kayak gini

1. login ke blooger
2. masuk rancangan >>edit Html
3. Jangan lupa download lengkap template nya takut ad kesalahan 
4. Cari kode ]]></b:skin> dan letek kan kode di bawah ini tepat di atas kode ]]></b:skin> 
5.  berikut kode nya
/* --------------- 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;     }
6. Seterus nya cari kode </head> lalu simpan kode di bawah ini tepat di atas 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>
7. Save template
8. Terus cara penempatan di postingan gunakan kode di bawah ini
<ul id="Imagetip"> <li><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibrfU7EPvCKnkRidLxDZ70aec6Hb59rmlqSOA4ns31qvtjs6wJ6trTtK1s2EMMsgcLJXaX_O6IHi8rVvi3CtdyzVC_SCtuH8ws4NLLvTgSqdcXeraNqmSz3NK4Vzo9UnX8D4YfBoRLhRU/s1600/1.jpg " class="preview" title="Lake and a mountain"> <img width="100px" height="75px" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibrfU7EPvCKnkRidLxDZ70aec6Hb59rmlqSOA4ns31qvtjs6wJ6trTtK1s2EMMsgcLJXaX_O6IHi8rVvi3CtdyzVC_SCtuH8ws4NLLvTgSqdcXeraNqmSz3NK4Vzo9UnX8D4YfBoRLhRU/s1600/1.jpg" alt="gallery thumbnail" /></a> </li></ul>

Oke selamat mencoba semoga berhasil.....!!!!