Cara Buat Tooltip terbang Melayang di semua link dan gambar - pada kesempatan kali ini saya mau bahas tentang blogspot, mempercantik blog dengan tooltip, sebelum saya jelaskan bagaimana cara buat nya mari kita bacot dikit tentang apa itu tooltip :D .. tooltip itu apayah saya juga gak tau , hahahahha .. itu loh kalau link atau image di sentuh mouse title atau judul atau link terbang melayang seperti di blog saya ini, tapi kali ini tooltipnya lebih makyusss .. saya juga inging menggunakan tooltip ini nantinya :D ..
sementara kalau mau liat demo nya Cara Buat Tooltip terbang Melayang di semua link dan gambar sorot aja link di blog saya, sebelumnya juga saya pernah posting tooltip seperti punya saya di blog ini tapi saya lupa apa yah judul artikel nya , kalau gak salah ini sudah yang ke tiga kalinya saya posting masalah tooltip, tapi tooltip kali ini jauh lebih mudah cara buat nya , saya pastikan semua blogger pasti ingin mencoba , karna selain mempercantik blog, juga memudahkan pengunjung ..
CARA PERTAMA:
- Login Ke Akun Blogger sobat
- Pilih Rancangan/Design Kemudian Pilih EDIT HTML (dan jangan Lupa Untuk Mencentang Kolom Expand Template Widget )
- Copas KOde Berikut Tepat Diatas KOde </head>
kode:
<style>#tooltip{width:200px;text-transform:capitalize;z-index: 10000000;position:absolute;background:#444;-moz-border-radius:5px;-webkit-border-radius: 5px;-khtml-border-radius: 5px;border-radius: 5px;-o-transition:0.5s ease-out; -moz-transition:0.5s ease-out; -webkit-transition:0.5s ease-out;padding:2px 5px;font-size:12px;color:#000;border:1px dashed #ff0000;display:none;font-weight:bold}</style>
<script type='text/javascript'>
this.tooltip = function(){
xOffset = 10;
yOffset = 20;
$("a[title]").hover(function(e){
this.t = this.title;
this.title = "";
$("body").append("<p id='tooltip'>"+ this.t +"</p>");
$("#tooltip")
.css("top",(e.pageY - xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px")
.fadeIn("fast");
},
function(){
this.title = this.t;
$("#tooltip").remove();
});
$("a[title]").mousemove(function(e){
$("#tooltip")
.css("top",(e.pageY - xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px");
});
};
// starting the script on page load
$(document).ready(function(){
tooltip();
});
</script>
<script type='text/javascript'>
this.tooltip = function(){
xOffset = 10;
yOffset = 20;
$("a[title]").hover(function(e){
this.t = this.title;
this.title = "";
$("body").append("<p id='tooltip'>"+ this.t +"</p>");
$("#tooltip")
.css("top",(e.pageY - xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px")
.fadeIn("fast");
},
function(){
this.title = this.t;
$("#tooltip").remove();
});
$("a[title]").mousemove(function(e){
$("#tooltip")
.css("top",(e.pageY - xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px");
});
};
// starting the script on page load
$(document).ready(function(){
tooltip();
});
</script>
simpan.
CARA KEDUA:
- Login Ke Akun Blogger sobat
- Pilih Rancangan/Design Kemudian Pilih EDIT HTML (dan jangan Lupa Untuk Mencentang Kolom Expand Template Widget
- Copas KOde Berikut Tepat Dibawah KOde <body>
kode :
<script src="http://javascript-share.googlecode.com/files/wb.js"></script><a id='wb_ttauth' href='http://www.warungbebas.com'>Warung Internet</a><script type="text/javascript">//<![CDATA[
wb.tooltip_setting =
{
func : "Tooltip",
top : 5,
left : 5,
maxw : 300,
speed : 20,
timer : 40,
endalpha : 95,
alpha : 0,
style_plus : "#tt{border:1px solid #677FC2;background:#eceff5}#ttcont{background:#677FC2;color:#fff}"
};
//]]></script><script src="http://javascript-share.googlecode.com/files/wb_tooltips.js"></script>
<script src='http://javascript-share.googlecode.com/files/wb_autotooltips.js'></script><div id="warungbebasautotooltip">
wb.tooltip_setting =
{
func : "Tooltip",
top : 5,
left : 5,
maxw : 300,
speed : 20,
timer : 40,
endalpha : 95,
alpha : 0,
style_plus : "#tt{border:1px solid #677FC2;background:#eceff5}#ttcont{background:#677FC2;color:#fff}"
};
//]]></script><script src="http://javascript-share.googlecode.com/files/wb_tooltips.js"></script>
<script src='http://javascript-share.googlecode.com/files/wb_autotooltips.js'></script><div id="warungbebasautotooltip">
selanjutnya cari kode </body>
taruh kode di bawah ini tepat di atas nya
kode :
</div><script type='text/javascript'>wb.$_auto_tooltip('warungbebasautotooltip');</script>
simpan .dan lihat hasilnya .. sekian artikel tentang cara buat tooltip melayang
mantaap :)
BalasHapus