Easiest Tooltip and Image Preview Using jQuery

Hallo sobat Blogger pingin nepatin janji nich kan di pertemuan seblumnya dah janji untuk membuat tooltip ,nah kali ini kita akan membahas tata cara pembuatan tooltip dengan kode css yaitu Easiest Tooltip and Image Preview Using
jQuery contoh nya seperti gambar di bawah ini coba sorot dengan cursor apa yang terjadi.....

• 
  
• 
  
• 
  

Gimana keren kan.........nah untuk cara membuatnya ikuti tutorial nya yach..

• Login ke blogger
  
• masuk rancagan
• Edit Html ,jangan lupa Centang kotak Expand Template Widget Lalu cari kode ]]></b:skin>
• Lalu Copas kode di bawah ini diatas ]]></b:skin>
/* --------------- 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;     }
Lalu simpan kode di bawah ini tepat di atas kode </head> berikut kode nya
<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>
• Lalu Save Template

Nah untuk cara pemasangan di HTML atau postingan gunakan kode seperti di bawah ini

<ul id="Imagetip">
<li><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnDBUYkLmTPA-UdsIIyxOkoMnGKdAQCgYDvVz0ip18rwqZyNd7dIymuWCnWMeMQiLqVvd3brsCxsVEFwhoGjxBHobsqQObnwP5ZNEqyho6LPq5SCEDn0SQpecq1LBvP4PcAsSlcH1SkuA/s1600/1.jpg " class="preview" title="Lake and a mountain">
<img width="100px" height="75px" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnDBUYkLmTPA-UdsIIyxOkoMnGKdAQCgYDvVz0ip18rwqZyNd7dIymuWCnWMeMQiLqVvd3brsCxsVEFwhoGjxBHobsqQObnwP5ZNEqyho6LPq5SCEDn0SQpecq1LBvP4PcAsSlcH1SkuA/s1600/1.jpg" alt="gallery thumbnail" /></a>
</li>
<li><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmwaCRGX5Slj8SFSsNLODOHpE2W8WF6qfD5yPoM5GUsu-eNWtm3mkkBo-fy_biIiw7d3ght8qaIsdjXegfLbBGqBWTDs96mmn9AGC1mWo5KXB8PgIgS1L8ElbFjEDv4xtUdjNYEdv4uXg/s1600/2.jpg" class="preview" title="Fly fishing"><img width="100px" height="75px" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmwaCRGX5Slj8SFSsNLODOHpE2W8WF6qfD5yPoM5GUsu-eNWtm3mkkBo-fy_biIiw7d3ght8qaIsdjXegfLbBGqBWTDs96mmn9AGC1mWo5KXB8PgIgS1L8ElbFjEDv4xtUdjNYEdv4uXg/s1600/2.jpg" alt="gallery thumbnail" /></a>
</li>
<li><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiF-ZpMWcKjQDLiGSLmBIMs7w9QFE3Cc_nWSOdRO6lvoyu7YAgJaT4EOh34chSVny_DTW-a0HqvQYGeUy23eHZ7JSMKbPOkpobqhhyeVWSMNBaaROt4KuV_myYtY25ZH-v_ofzNEGx3nQU/s1600/3.jpg" class="preview" title="Autumn"><img width="100px" height="75px" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiF-ZpMWcKjQDLiGSLmBIMs7w9QFE3Cc_nWSOdRO6lvoyu7YAgJaT4EOh34chSVny_DTW-a0HqvQYGeUy23eHZ7JSMKbPOkpobqhhyeVWSMNBaaROt4KuV_myYtY25ZH-v_ofzNEGx3nQU/s1600/3.jpg" alt="gallery thumbnail" /></a>
</li>
<li><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6t_H1WnnFcpFUyud6N2VwselO_zG9ddEptlf0iUkOGxdCh3cJGIc67XPVXNnn7G77VmAmgEBA6eTFt51V_1fW54zfjZ2eDNzvEZTSG2rS4nkt67AETogxiHi4Hvm-3a9psgvIdEjklzc/s1600/4.jpg" class="preview" title="Skiing on a mountain"><img  width="100px" height="75px" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6t_H1WnnFcpFUyud6N2VwselO_zG9ddEptlf0iUkOGxdCh3cJGIc67XPVXNnn7G77VmAmgEBA6eTFt51V_1fW54zfjZ2eDNzvEZTSG2rS4nkt67AETogxiHi4Hvm-3a9psgvIdEjklzc/s1600/4.jpg" alt="gallery thumbnail" /></a>
</li>
    </ul>

Selamat mencoba semoga Tidak berhasil salaaaaaam oh ya jangan lupa coment dulu yach