*

Jumat, 30 Desember 2011

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.....



  • gallery thumbnail
  • gallery thumbnail
  • gallery thumbnail






Gimana keren kan.........nah untuk cara membuatnya ikuti tutorial nya yach..
  • Login ke blogger
  • masuk rancagan
  • Edit Html ,jangan lupa Centang kotak 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

0 komentar:

Posting Komentar

 
Copyright @ 2009 Tip dan Trik modifikasi blog: Easiest Tooltip and Image Preview Using jQuery | Original Template: Minima Black | Modifikasi oleh NATALUDIN | Top