JRTR site | Berbagi Tanpa Batas, Blogger Tips, Widget, Template

Berbagi informasi online, komputer, tutorial blogger, template untuk blogger, tips trik blogger.

Selasa, 16 Oktober 2012

Cara Mudah Membuat Toltip Tampil Url

! Bakalan-Tlogorejo-City --->> Apa Kabar Sobat...? Kali Ini Saya Akan Berbagi Dengan Sahabat Blogger Dan Pembaca Setia....Tentang Cara Mudah Membuat Toltip Tampil Url '''''''..........-----------

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 ! Bakalan-Tlogorejo-City*/
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.
Selamat Mencoba...!!!
Semoga Artikel ini bermanfaat...???
JokoRowoTlogoRejo Beri Komentar
Bagikan kepada teman!
Garis
300 x 250

0 komentar:

Catat Ulasan

Catatan:
Untuk menyisipkan kode, gunakan tag <i rel="pre">KODE ANDA DI SINI...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR ANDA DI SINI...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">CATATAN ANDA DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS ANDA DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS ANDA DI SINI...</i>

Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang Anda tanyakan/katakan saat ini akan sangat bermanfaat bagi pembaca lain.

NB: Jangan menuliskan link aktif karena akan terhapus secara automatis.

Jika ingin menuliskan komentar yang keluar dari topik pada artikel ini silahkan kehalaman OOT (out of topic) dengan menekan tombol OOT di bawah

 
Design by JRTR Copyright © 2014 ~ 2015 Powered by Blogger
TOP