contoh menu navigasi dengan tooltip http://shofitkj.blogspot.com
kalau sudah melihat contoh yang diatas tadi. Langsung kita coba bagaimana membuatnya
* Login ke blogger
* Rancangan
* Edit HTML
* Copy JQuery versi 1.2.3 dibawah ini sesudah kode <head>
copy kode dibawah ini sesudah kode JQuery tadi
letakkan kode css berikut sebelum atau diatas kode ]]></b:skin>
* Terus simpan template dan copy kode dibawah ini dan tambahkan di gadget
kalau ingin memngganti url image menu tooltip https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiV5CefJnKCNDBJwXpFj2jFWCFLqPooq-3oVS1Uux-TpSOW9w-ZQ0VpkD65Q4XY_yqaW5_mgfxZTFYQkzLdDk7msOTTdz_P887laORKYNY33kfsbDrnDkhByMARtjvOON1D8HMljZwap-8/s1600/button.gif bisa digunakan image menu tooltip transparent atau spacer.gif alamat url gambarnya dibawah ini
*kalau ingin lebih lengkap bisa download image tooltip disini
kalau sudah melihat contoh yang diatas tadi. Langsung kita coba bagaimana membuatnya
* Login ke blogger
* Rancangan
* Edit HTML
* Copy JQuery versi 1.2.3 dibawah ini sesudah kode <head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js' type='text/javascript'/>
copy kode dibawah ini sesudah kode JQuery tadi
<script type='text/javascript'>
$(document).ready(function(){
$(".menu2 a").append("<em></em>");
$(".menu2 a").hover(function() {
$(this).find("em").animate({opacity: "show", top: "-75"}, "slow");
var hoverText = $(this).attr("title");
$(this).find("em").text(hoverText);
}, function() {
$(this).find("em").animate({opacity: "hide", top: "-85"}, "fast");
});
});
</script>
$(document).ready(function(){
$(".menu2 a").append("<em></em>");
$(".menu2 a").hover(function() {
$(this).find("em").animate({opacity: "show", top: "-75"}, "slow");
var hoverText = $(this).attr("title");
$(this).find("em").text(hoverText);
}, function() {
$(this).find("em").animate({opacity: "hide", top: "-85"}, "fast");
});
});
</script>
letakkan kode css berikut sebelum atau diatas kode ]]></b:skin>
* Terus simpan template dan copy kode dibawah ini dan tambahkan di gadget
kalau ingin memngganti url image menu tooltip https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiV5CefJnKCNDBJwXpFj2jFWCFLqPooq-3oVS1Uux-TpSOW9w-ZQ0VpkD65Q4XY_yqaW5_mgfxZTFYQkzLdDk7msOTTdz_P887laORKYNY33kfsbDrnDkhByMARtjvOON1D8HMljZwap-8/s1600/button.gif bisa digunakan image menu tooltip transparent atau spacer.gif alamat url gambarnya dibawah ini
https://sites.google.com/site/shofitkj/tooltip/spacer-tooltip.gif
*kalau ingin lebih lengkap bisa download image tooltip disini
0 komentar:
Posting Komentar