kali ini EFA akan sharing jquery lagi, karena Tooltip kali ini di buat dengan bantuan jquery, dan sedikit berbeda dengan Tooltip - Tooltip biasanya, seperti apa bentuk Tooltip gambar dengan jquery, ini silahkan di lihat demo nya dibawah ini, ngak usah kemana mana, jadi coba sobat blogger mania sorot saja gambar ini, mereka pada telanjang sepertikita dulu.
kita lanjut ke tahap pembuatannya :
- Log in ( masuk di blog anda )
- Klik Rancangan
- Klik Edit HTML
- Cari Kode
</head>
- Setelah ketemu silahkan anda simpan kode di bawah ini di atas kode
</head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.js' type='text/javascript'></script>
<script>
this.imagePreview = function(){ /* CONFIG */
xOffset = 10;
yOffset = 30;
// these 2 variable determine popup's distance from the cursor
// you might want to adjust to get the right result
/* END CONFIG */
$("a.preview").hover(function(e){
this.t = this.title;
this.title = ""; var c = (this.t != "") ? "<br/>" + this.t : "";
$("body").append("<p id='preview'><img src='"+ this.href +"' alt='Image preview' />"+ c +"</p>");
$("#preview")
.css("top",(e.pageY - xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px")
.fadeIn("fast"); },
function(){
this.title = this.t; $("#preview").remove();
}); $("a.preview").mousemove(function(e){
$("#preview")
.css("top",(e.pageY - xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px");
}); };
// starting the script on page load
$(document).ready(function(){
imagePreview();
});
</script>
sekarang cari kode
]]></b:skin>
setelah ketemu silahkan anda simpan kode di bawah ini di atas kode
]]></b:skin>
#preview{
position:absolute;
border:2px solid #0e0;
background:#0B0;
padding:5px;
display:none;
color:#fff;
}
Ok sekarang silahkan klik SIMPAN TEMPLATE
dan kode pemanggilannya / penggunaannya ada di bawah ini,
dan kode pemanggilannya / penggunaannya ada di bawah ini,
<a href="Disini URL gambar Tooltip" class="preview"><img src="Disini url gambar" width="100" height="150"></a>
Atur ketinggian dan lebar gambar lihat kode
width = Lebar, [ silahkan sesuaikan dengan keinginan anda ]
height = Tinggi [ silahkan sesuaikan dengan keinginan anda ]
Disini URL gambar Tooltip, Disini url gambar = silahkan ganti dengan url gambarnya.
Untuk menggunakannya di sidebar silahkan Tambah gadget ► html/javascript
Kalau di postingan silahkan beralih dari mode Compose ke ► Edit html
Mungkin hanya itu yang bisa saya share semoga bermanfaat.
width = Lebar, [ silahkan sesuaikan dengan keinginan anda ]
height = Tinggi [ silahkan sesuaikan dengan keinginan anda ]
Disini URL gambar Tooltip, Disini url gambar = silahkan ganti dengan url gambarnya.
Untuk menggunakannya di sidebar silahkan Tambah gadget ► html/javascript
Kalau di postingan silahkan beralih dari mode Compose ke ► Edit html
Mungkin hanya itu yang bisa saya share semoga bermanfaat.
Mantap nian nih blog, macam mana nih buatnya, jangan lupe jengulah blog aku
ReplyDeleteGan saya mau nanya gimana cara bikin kolom komentar kayak gini dengan profilnya yang muncul ketika di sorot gan,,,?
ReplyDeleteAdmin bisa aja memberikan scriptnya kepada sobat, tapi admin kwatir kalau kalau tidak cocok ditemplate sobat, bila sobat berminat silahkan saja kirimkan alamat email sobat, nanti admin kirim scriptnya melalui email
DeleteTerima kasih min, tutorialnya oke punya, aku dah praktekin di http://stok-batik.blogspot.com/
ReplyDeleteMantap Gan.. sangat membantu.
ReplyDelete