Tooltips untuk Images/Gambar

Berikut adalah bagai mana cara menggunakan/mendesain tooltips pada blog atao website.

Karna sebenarnya tooltips defauld sudah ada pada sebagian besar blog(blogspot) dan website,namun karna desain yang sederhana mungkin perlu bagi yang menginginkan untuk mendesain tooltips tersebut agar lebih menarik dan indah.

Berikut adalah cara yang saya anggap paling mudah dan sederhana,karena hanya perlu sekali edit template dan untuk berikutnya setiap kita menyertakan gambar pada entri maka tooltips tersebut otomatis menyertai gambar yang di entri.Dengan kata lain tidak perlu edit gambar satu-persatu menggunakan HTML/Java script.

Ok....Berikut adalah caranya :

• Login Ke Akun Blogger sobat

• Pilih Rancangan/Design Pilih EDIT HTML

1. Silahkan sobat Copy semua CSS ini dan letakan di atas ]]></b:skin>

#psychifio { font-family: "Arial", Geneva, san-serif; font-size: 11px; color: #fbf7be; text-align: center; text-shadow: 0px 1px 0px #aca99e; padding: 10px 0 30px 0; position: absolute; padding: 5px; display: none; border-radius: 25px; box-shadow: 5px 5px 8px #A9A9A9; background: #64950 url(http://image-on-tooltip.googlecode.com/files/jqttbg-1.gif) bottom left repeat; max-width:220px; border:5px solid #fff; } #psychifio img { border-radius: 15px; height: auto; margin-bottom: 10px; max-width: 320px; border: 7px solid #BF7272; }

2. Jika sudah tambahkan Javascript ini di atas </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/> <script type='text/javascript'> <script src='http://sites.google.com/site/zyztem33/js/tooltip%20gambar.js' type='text/javascript'/> </script> <script type='text/javascript'> //<![CDATA[ this.imagethumb = function () { xOffset = 150; yOffset = 10; $(".post-body img").hover(function (e) { this.t = this.title; this.title = ""; var c = (this.t != "") ? "<br/>" + this.t : ""; $("body").append("<p id='psychifio' style='padding:10px 6px 10px;'> <img src='" + this.src + "' alt='Image jqtt1' />" + c + "</p> "); $("#psychifio").css("top", (e.pageY - xOffset) + "px").css("left", (e.pageX + yOffset) + "px").fadeIn("slow") }, function () { this.title = this.t; $("#psychifio").remove() }); $(".post-body img").mousemove(function (e) { $("#psychifio").css("top", (e.pageY - xOffset) + "px").css("left", (e.pageX + yOffset) + "px") }) }; $(document).ready(function () { imagethumb() }); //]]> </script>

Perhatikan kode berikut : <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"> <script type="text/javascript"> Jika pada layout/html sobat sudah ada kode tersebut,maka sobat tidak perlu lagi menyertakan/tinggalkan kode itu.

3. Klik save template.
 Sekarang silahkan lihat blog/website sobat dan sorot gambar dengan mouse........
.:: Selamat mencoba ::.