Cara pasang url tooltip di blogspot


Tooltip yang terdapat pada blog yang berplatform wordpress kini boleh di pasang pada blog yang berplatform blogspot. Tooltip ini akan membantu dan memudahkan visitor untuk melihat URL bagi active link yang terdapat pada sesebuah blog.

Untuk memasang tooltip yang memaparkan url seperti yang boleh anda lihat pada active link yang terdapat di blog ini, anda hanya perlu ikut beberapa langkah yang mudah di bawah.

Langkah 1

Log in blog => Dashboard => Template => Edit HTML => Proceed

Langkah 2

Dengan menggunakan keyboard, tekan kekunci Ctrl + F. Seterusnya, taip atau paste kod </head>  pada ruang Find dan tekan kekunci Enter.

Langkah 3

Salin kod berwarna di bawah dan paste di atas atau sebelum kod </head>

<style>
/* 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 : [&#39;a&#39;,&#39;abbr&#39;,&#39;acronym&#39;], // @Array: Allowable elements that can have the toolTip
obj : Object, // @Element: That of which you&#39;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(&#39;div&#39;);
this.tip.id = &#39;toolTip&#39;;
document.getElementsByTagName(&#39;body&#39;)[0].appendChild(this.tip);
this.tip.style.top = &#39;0&#39;;
this.tip.style.visibility = &#39;hidden&#39;;
var tipLen = this.tipElements.length;
for ( i=0; i&lt;tipLen; i++ ) {
var current = document.getElementsByTagName(this.tipElements[i]);
var curLen = current.length;
for ( j=0; j&lt;curLen; j++ ) {
addEvent(current[j],&#39;mouseover&#39;,this.tipOver);
addEvent(current[j],&#39;mouseout&#39;,this.tipOut);
current[j].setAttribute(&#39;tip&#39;,current[j].title);
current[j].removeAttribute(&#39;title&#39;);
}
}
},
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 = &#39;hidden&#39;;
},
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(&quot;sweetTitles.tipShow()&quot;,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 = &#39;&#39;;
var access = &#39;&#39;;
if ( anch.nodeName.toLowerCase() == &#39;a&#39; ) {
addy = (anch.href.length &gt; 100 ? anch.href.toString().substring(0,100)+&quot;...&quot; : anch.href);
var access = ( anch.accessKey ? &#39; &lt;span&gt;[&#39;+anch.accessKey+&#39;]&lt;/span&gt; &#39; : &#39;&#39; );
} else {
addy = anch.firstChild.nodeValue;
}
this.tip.innerHTML = &quot;&lt;p&gt;&quot;+anch.getAttribute(&#39;tip&#39;)+&quot;&lt;em&gt;&quot;+access+addy+&quot;&lt;/em&gt;&lt;/p&gt;&quot;;
if ( parseInt(document.documentElement.clientWidth+document.documentElement.scrollLeft) &lt; parseInt(this.tip.offsetWidth+lt) ) {
this.tip.style.left = parseInt(lt-(this.tip.offsetWidth+10))+&#39;px&#39;;
} else {
this.tip.style.left = lt+&#39;px&#39;;
}
if ( parseInt(document.documentElement.clientHeight+document.documentElement.scrollTop) &lt; parseInt(this.tip.offsetHeight+tp) ) {
this.tip.style.top = parseInt(tp-(this.tip.offsetHeight+10))+&#39;px&#39;;
} else {
this.tip.style.top = tp+&#39;px&#39;;
}
this.tip.style.visibility = &#39;visible&#39;;
this.tip.style.opacity = &#39;.1&#39;;
this.tipFade(10);
},
tipFade: function(opac) {
var passed = parseInt(opac);
var newOpac = parseInt(passed+10);
if ( newOpac &lt; 90 ) {
this.tip.style.opacity = &#39;.&#39;+newOpac;
this.tip.style.filter = &quot;alpha(opacity:&quot;+newOpac+&quot;)&quot;;
opacityID = window.setTimeout(&quot;sweetTitles.tipFade(&#39;&quot;+newOpac+&quot;&#39;)&quot;,20);
}
else {
this.tip.style.opacity = &#39;.90&#39;;
this.tip.style.filter = &quot;alpha(opacity:90)&quot;;
}
}
};
function pageLoader() {
sweetTitles.init();
}
addEvent(window,&#39;load&#39;,pageLoader);
</script>


Akhir sekali, klik preview dan jika tida mesej Error yang terpapar, klik saja Save.

p/s: Untuk menukar warna background tooltip tersebut, sila edit background: #000 dengan menukarkan nilai 000 tersebut kepada warna yang anda inginkan.

{ 24 comments.. read them below or add one }

bella YOYO bella YOYO 1:58 AM
seriously i don't get it.
zulkbo zulkbo 2:26 AM
salam..
nampak menarik..
saya pasti cuba nanti
thanks Bro :)
simiey[dot]com simiey[dot]com 4:16 PM
nak taip kod ape pada kotak find bro?
Iza Teratak Usang Iza Teratak Usang 5:33 PM
@simiey[dot]com

a'a la..
kod apa yang nak di taip..
dah bersedia nak buat segera ni...
M'Rie R'Nie M'Rie R'Nie 3:42 AM
sebelum code /head
Nescafe ais Nescafe ais 7:26 AM
Sori.. Tak perasan pulak problem ni..kihkih

Paste sebelum kod </head>

Dah diupdate. Tq :)
Iza Teratak Usang Iza Teratak Usang 7:31 PM
Assalam..
Dah buat tapi....
tak ada error dan tak ada apa2 perubahan pun pada blog.
Kat mana silapnya ya?
Nescafe aisNescafe ais 9:19 AM
@Iza Teratak Usang wsalam. Cuba paste kod tu selepas kod <body>
Iza Teratak Usang Iza Teratak Usang 4:45 PM
Ada tak yang dah boleh buat benda ni?
Muaz Faris Muaz Faris 3:59 PM
alhmdulillah. sudah pasang..

thanks for info
Muaz Faris Muaz Faris 4:00 PM
tuan blog.. sudi anchor link dengan blog saya tak?
Iza Teratak Usang Iza Teratak Usang 7:17 PM
@Muaz Faris
Pasang kat blog mana? nak tengok. Saya buat tak nak jadi samada letak di head atau body...
alya alya 11:56 PM
blog tak bubah aper2 pon..
John Cena John Cena 4:49 AM
Dah pasang code diatas ni.. kita tengok ape hasilnya nanti..
InANazRi^^ InANazRi^^ 9:15 PM
tak faham..about taip code/head.....
etuza etuza 7:42 AM
Terima kasih ya..moga ilmu bertambah berkat. Anda baik hati. Allah pasti sayang anda..insyaAllah.
http://ezawarna-warnakehidupan-etuza.blogspot.com/
ris-famili.blogspot.com ris-famili.blogspot.com 8:00 PM
Tulisan warna biru tu nak kena ubah ke. Ataupun copy dan paste kesemuanya.
zaireey zaireey 8:53 AM
Terima kasih kerana banyak maklumat yang berguna.
darisudutpandang darisudutpandang 5:14 PM
menarik...kena cuba ni.
shraqs shraqs 12:14 AM
Untuk kelainan dari design memang nampak menarik.
mohammad amirul mohammad amirul 7:12 PM
admin nak tanya, apasal kalau blog saya nak ping mane2 article kat ping blog x dpt, dia mention
(site url or feeds error)....admin please tolong selesai masalah ni.
Hidayah Hidayah 3:37 PM
salam, admin atau sesiapa, nk minta tolong boleh, saya nak tya kenapa saya guna template yg dh siap box utk read more tapi bila post artikel dia tak jadi,post tu x masuk dlm box tu,artikel tu keluar dari box post tu pula n berada di bawah read more box tu.. mcm mana ye? ni alamat blog yg sedang saya siapkan, http://kedaihanem.blogspot.com boleh reply di sini atau email saya eshophidayah at yahoo.com terima kasih sudi bantu.
maisarah hamzah maisarah hamzah 8:53 AM
saya first time nk buat blog.tapi dekat sini saya baca2 x ada pun cara2 dia.boleh bg tahu mcm mane tuk first step