URL Tooltip adalah sebuah cara atau fitur untuk menampilkan URL dari suatu link yang masih aktif pada suatu blog ketika link tersebut dibayangi cursor. URL Tooltip berbeda dengan Tooltip yang sobat blogger temukan di blog lain. Kalau di blog lain, Tooltip-nya menampilkan sebuah teks, kalau Tooltip yang ini menampilkan sebuah URL. Biasanya URL Tooltip ini di pasang di blog yang bernaung di bawah platform Wordpress, tapi sekarang URL Tooltip ini bisa sobat blogger nikmati di blog yang bernaung di bawah platform Blogger.
Cara Memasang URL Tootip di blog tidaklah sulit, sobat blogger hanya menambahkan sedikit kode di template sobat blogger. kode yang akan kita masukkan atau sisipkan adalah sebuah kode yang di buat oleh Frank Bueltge.
Cara Memasang URL Tooltip Di Blogspot
- Sign In di blogger.com
- Pada Menu drop down, pilih template
- Backup template sobat terlebih dahulu
- Selanjutnya, klik tombol Edit template dan klik Proceed
- Kasih tanda centang pada Expand Widget Template
- Cari kode </head>
- Kalau sudah ketemu, letakkan kode berikut, tepat di atas kode </head>
<style>Klik Save
/* Fading Tooltips By Frank Bueltge*/
body div#toolTip {
position:absolute;
z-index:1000;
min-width:150px;
background:#000;
border:2px double #ccc;
text-align:left;
padding:3px 5px 5px 5px;
min-height:1em;
-moz-border-radius:5px;
}
body div#toolTip p {
margin:0;
padding:0;
color:#ccc;
font:11px/12px verdana,arial,sans-serif;
font-weight:bold;
}
body div#toolTip p em {
display:block;
margin-top:2px;
color:#fff;
font-style:normal;
font-weight:normal;
}
body div#toolTip p em span {
font-weight:bold;
color:#fff;
}
</style>
<script src='http://javscript-code.googlecode.com/files/tooltips.js' type='text/javascript'/>
<script>
/*
Sweet Titles (c) Creative Commons 2005
http://creativecommons.org/licenses/by-sa/2.5/
*/
var sweetTitles = {
xCord : 0, // @Number: x pixel value of current cursor position
yCord : 0, // @Number: y pixel value of current cursor position
tipElements : ['a','abbr','acronym'], // @Array: Allowable elements that can have the toolTip
obj : Object, // @Element: That of which you're hovering over
tip : Object, // @Element: The actual toolTip itself
active : 0, // @Number: 0: Not Active || 1: Active
init : function() {
if ( !document.getElementById ||
!document.createElement ||
!document.getElementsByTagName ) {
return;
}
var i,j;
this.tip = document.createElement('div');
this.tip.id = 'toolTip';
document.getElementsByTagName('body')[0].appendChild(this.tip);
this.tip.style.top = '0';
this.tip.style.visibility = 'hidden';
var tipLen = this.tipElements.length;
for ( i=0; i<tipLen; i++ ) {
var current = document.getElementsByTagName(this.tipElements[i]);
var curLen = current.length;
for ( j=0; j<curLen; j++ ) {
addEvent(current[j],'mouseover',this.tipOver);
addEvent(current[j],'mouseout',this.tipOut);
current[j].setAttribute('tip',current[j].title);
current[j].removeAttribute('title');
}
}
},
updateXY : function(e) {
if ( document.captureEvents ) {
sweetTitles.xCord = e.pageX;
sweetTitles.yCord = e.pageY;
} else if ( window.event.clientX ) {
sweetTitles.xCord = window.event.clientX+document.documentElement.scrollLeft;
sweetTitles.yCord = window.event.clientY+document.documentElement.scrollTop;
}
},
tipOut: function() {
if ( window.tID ) {
clearTimeout(tID);
}
if ( window.opacityID ) {
clearTimeout(opacityID);
}
sweetTitles.tip.style.visibility = 'hidden';
},
checkNode : function() {
var trueObj = this.obj;
if ( this.tipElements.inArray(trueObj.nodeName.toLowerCase()) ) {
return trueObj;
} else {
return trueObj.parentNode;
}
},
tipOver : function(e) {
sweetTitles.obj = this;
tID = window.setTimeout("sweetTitles.tipShow()",500);
sweetTitles.updateXY(e);
},
tipShow : function() {
var scrX = Number(this.xCord);
var scrY = Number(this.yCord);
var tp = parseInt(scrY+15);
var lt = parseInt(scrX+10);
var anch = this.checkNode();
var addy = '';
var access = '';
if ( anch.nodeName.toLowerCase() == 'a' ) {
addy = (anch.href.length > 100 ? anch.href.toString().substring(0,100)+"..." : anch.href);
var access = ( anch.accessKey ? ' <span>['+anch.accessKey+']</span> ' : '' );
} else {
addy = anch.firstChild.nodeValue;
}
this.tip.innerHTML = "<p>"+anch.getAttribute('tip')+"<em>"+access+addy+"</em></p>";
if ( parseInt(document.documentElement.clientWidth+document.documentElement.scrollLeft) < parseInt(this.tip.offsetWidth+lt) ) {
this.tip.style.left = parseInt(lt-(this.tip.offsetWidth+10))+'px';
} else {
this.tip.style.left = lt+'px';
}
if ( parseInt(document.documentElement.clientHeight+document.documentElement.scrollTop) < parseInt(this.tip.offsetHeight+tp) ) {
this.tip.style.top = parseInt(tp-(this.tip.offsetHeight+10))+'px';
} else {
this.tip.style.top = tp+'px';
}
this.tip.style.visibility = 'visible';
this.tip.style.opacity = '.1';
this.tipFade(10);
},
tipFade: function(opac) {
var passed = parseInt(opac);
var newOpac = parseInt(passed+10);
if ( newOpac < 90 ) {
this.tip.style.opacity = '.'+newOpac;
this.tip.style.filter = "alpha(opacity:"+newOpac+")";
opacityID = window.setTimeout("sweetTitles.tipFade('"+newOpac+"')",20);
}
else {
this.tip.style.opacity = '.90';
this.tip.style.filter = "alpha(opacity:90)";
}
}
};
function pageLoader() {
sweetTitles.init();
}
addEvent(window,'load',pageLoader);
</script>
#000 adalah kode warna untuk background URL Tooltip, silahkan diganti dengan dengan kode warna yang lain.
Advertisment
0 komentar:
Posting Komentar