Tutorial : 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 dalam kotak 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><br /> <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>

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.

Membaca Amalan Mulia. Terima Kasih 'LIKE' dan 'SHARE' Entri Di Sini :)

Tweet

Jom Berkongsi Artikel :

KLIK IKLAN, KUMPUL DUIT NAK BELI NOVEL