Home »
Tips Blogger
»
Easiest Tooltip And Image Preview Using jQuery
Cara membuatnya :
- Login blogger
- Rancangan, Edit Html, Cari kode ]]></b:skin>
- 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 pemasangan di HTML :
<ul id="Imagetip">
<li><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-UVRGWb4iClvUcSemc26QtUSSX0STLHmVFcUpus4yNISsUALrwNH54QiPSDZn9yuooWXdffvcp-YFM-KzsWiRmwU6zRPYKB7V1PLX0SB51cobm33PMV2OkAHFpYqcbjwoTC1h5SxDimY/s1600/1.jpg " class="preview" title="Lake and a mountain">
<img width="100px" height="75px" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-UVRGWb4iClvUcSemc26QtUSSX0STLHmVFcUpus4yNISsUALrwNH54QiPSDZn9yuooWXdffvcp-YFM-KzsWiRmwU6zRPYKB7V1PLX0SB51cobm33PMV2OkAHFpYqcbjwoTC1h5SxDimY/s1600/1.jpg" alt="gallery thumbnail" /></a>
</li>
<li><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGP2p3vsOdIpIPAc1ufhWaz8qSHypTUmuTRQ0Xr1OBYbLkkaiP5mb__S5OFQamkhbqPGY2IQazU5oshyphenhyphenFC2pY2L7xI_8TNq6lGU4cm0ByCMB_9tWAY3dU6jM0VOXYS_Coth-Mqpuj5pW0/s1600/2.jpg" class="preview" title="Fly fishing"><img width="100px" height="75px" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGP2p3vsOdIpIPAc1ufhWaz8qSHypTUmuTRQ0Xr1OBYbLkkaiP5mb__S5OFQamkhbqPGY2IQazU5oshyphenhyphenFC2pY2L7xI_8TNq6lGU4cm0ByCMB_9tWAY3dU6jM0VOXYS_Coth-Mqpuj5pW0/s1600/2.jpg" alt="gallery thumbnail" /></a>
</li>
<li><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgi0FWQ6VBW8plL_Gs9J-hgt9Qp-6I6zhHRuJU2WPs0RJFRKwAkAkwdT4m8DqVO8Lp8uicYPwXigy-2jlO4afo7Fs1mxi2bpET-thBc70uzJcBDS_DrkPz5EP5H2XKDbm3rFHSYmpPCoMA/s1600/3.jpg" class="preview" title="Autumn"><img width="100px" height="75px" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgi0FWQ6VBW8plL_Gs9J-hgt9Qp-6I6zhHRuJU2WPs0RJFRKwAkAkwdT4m8DqVO8Lp8uicYPwXigy-2jlO4afo7Fs1mxi2bpET-thBc70uzJcBDS_DrkPz5EP5H2XKDbm3rFHSYmpPCoMA/s1600/3.jpg" alt="gallery thumbnail" /></a>
</li>
<li><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNp7uKPJivYnAgYbKNeVuhEtj7-Dtlu1Da5IfLyY4i-uBKyAiQ0XPDCNJPT_W_THPQqFV1Zm-GGuWPkFsCeWf_6-M9Rkvp6Rp_idLaHFUywBRWQU8mZ8AU7kZ3b30b1aOKGbwDYAEGLAM/s1600/4.jpg" class="preview" title="Skiing on a mountain"><img width="100px" height="75px" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNp7uKPJivYnAgYbKNeVuhEtj7-Dtlu1Da5IfLyY4i-uBKyAiQ0XPDCNJPT_W_THPQqFV1Zm-GGuWPkFsCeWf_6-M9Rkvp6Rp_idLaHFUywBRWQU8mZ8AU7kZ3b30b1aOKGbwDYAEGLAM/s1600/4.jpg" alt="gallery thumbnail" /></a>
</li>
</ul>
