Home » » Cara Pasang Tooltip dan zoom image Jquery

Cara Pasang Tooltip dan zoom image Jquery

Written By Unknown on Sabtu, 30 Juli 2011 | 22.29

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
  6. /* --------------- 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;     }
  7. Seterus nya cari kode </head> lalu simpan kode di bawah ini tepat di atas kode </head>
  8. <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>
  9. Save template
  10. Terus cara penempatan di postingan gunakan kode di bawah ini
  11. <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.....!!!!
Share this article :

0 komentar:

Posting Komentar

 
Support : Your Link | Your Link | Your Link
Copyright © 2013. kumpulan tutorial - All Rights Reserved
Template Created by Creating Website Published by Mas Template
Proudly powered by Blogger
top