Rchymera|Blog™

Pada kesempatan kali ini saya akan membahas bagaimana cara memasang tooltips pada blog bagi para pemula seperti saya ini, dan saya rasa bagi para master sudah tidak asing lagi apa yang dinamakan tooltips.
Bagi para pemula yang belum tau tentang apa itu tooltips silahkan sobat arahkan cursor pada gambar banner saya, dan ntar disana akan terlihat atau muncul sebuah kotak yang isinya berupa text.

Pada postingan sebelumnya saya juga pernah membahas masalah tooltips tetapi menurut saya tooltips tersebut kurang baik dipasang bagi para sobat yang memiliki koneksi lambat.
Sebab tooltips ini tidak akan muncul sebelum loading dari blog yang kita pasangi selesai atau terbuka dengan sempurna, selain itu kelemahan tooltips ini juga agak sedikit berat.
Namun apabila para sobat memasangnya dan menempatkan tooltips tersebut dengan baik tidak akan ada masalah.

Ok dech kita langsung saja pada pokok masalah, dan tidak usah terlalu banyak ngomong takutnya ntar para sobat akan tambah bingung xixixi...:D
Pada tooltips kali ini ada sedikit keunggulannya daripada tooltips versi sebelumnya, beberapa keunggulannya adalah:

1. Tooltips ini loadingnya lebih ringan daripada tooltips versi sebelumnya yang pernah saya posting.
2. Tidak perlu upload pada account hosting yang kita pakai, sebab bisa langsung kita pasang pada blog kita.
3. Tooltips akan langsung tampil walaupun loading blog kita belum selesai atau terbuka dengan sempurna.

Sekarang kita langsung saja bagaimana cara pemasangannya, silahkan para sobat login pada account blogger yang sobat gunakan...!!!
Langkah selanjutnya silahkan sobat klik pada bagian tata letak kemudian dilanjut pada bagian edit html.
Kemudian jangan lupa sobat centang bagian pada expand widget disebelah kanan atas, serta back up code template milik sobat untuk menghindari kesalahan pada saat pengeditan agar sobat dapat mengembalikanya seperti semula.

Pada langkah selanjutnya silahkan sobat cari code dibawah ini pada template milik sobat, dan bila sobat ingin cepat mencarinya silahkan sobat tekan CTRL+F.
]]></b:skin>

Selanjutnya silahkan sobat copy script dibawah ini tepat dibawah code diatas...!!!

Script CSS:

<style type='text/css'>
#dhtmltooltip{
position: absolute;
left: -300px;
width: 150px;
border: 3px solid grey;
padding: 4px;
background-color: #000000 ;
font-family:&quot;Comic sans&quot;,Comic sans;
font-size:12px;
font-weight:bold; color:#ffffff;
visibility: hidden;
z-index: 100;
/*Remove below line to remove shadow. Below line should always appear last within this CSS*/
filter: progid:DXImageTransform.Microsoft.Shadow(color=grey,direction=135);
}
#dhtmlpointer{
position:absolute;
left: -300px;
z-index: 101;
visibility: hidden;
}
</style>

Script JS, copy script bagian JS dibawah ini dan letakkan tepat dibawah bagian CSS:

<script type='text/javascript'>
//<![CDATA[
/***********************************************
* Cool DHTML tooltip script II- Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

var offsetfromcursorX=12 //Customize x offset of tooltip
var offsetfromcursorY=10 //Customize y offset of tooltip
var offsetdivfrompointerX=10 //Customize x offset of tooltip DIV relative to pointer image
var offsetdivfrompointerY=14 //Customize y offset of tooltip DIV relative to pointer image
document.write('<div id="dhtmltooltip"></div>') //write out tooltip DIV
document.write('<img id="dhtmlpointer" src="arrow2.gif">') //write out pointer image

var ie=document.all
var ns6=document.getElementById && !document.all
var enabletip=false
if (ie||ns6)
var tipobj=document.all? document.all["dhtmltooltip"] : document.getElementById? document.getElementById("dhtmltooltip") : ""
var pointerobj=document.all? document.all["dhtmlpointer"] : document.getElementById? document.getElementById("dhtmlpointer") : ""
function ietruebody(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}
function ddrivetip(thetext, thewidth, thecolor){
if (ns6||ie){
if (typeof thewidth!="undefined") tipobj.style.width=thewidth+"px"
if (typeof thecolor!="undefined" && thecolor!="") tipobj.style.backgroundColor=thecolor
tipobj.innerHTML=thetext
enabletip=true
return false
}
}
function positiontip(e){
if (enabletip){
var nondefaultpos=false
var curX=(ns6)?e.pageX : event.clientX+ietruebody().scrollLeft;
var curY=(ns6)?e.pageY : event.clientY+ietruebody().scrollTop;
//Find out how close the mouse is to the corner of the window
var winwidth=ie&&!window.opera? ietruebody().clientWidth : window.innerWidth-20
var winheight=ie&&!window.opera? ietruebody().clientHeight : window.innerHeight-20

var rightedge=ie&&!window.opera? winwidth-event.clientX-offsetfromcursorX : winwidth-e.clientX-offsetfromcursorX
var bottomedge=ie&&!window.opera? winheight-event.clientY-offsetfromcursorY : winheight-e.clientY-offsetfromcursorY

var leftedge=(offsetfromcursorX<0)? offsetfromcursorX*(-1) : -1000

//if the horizontal distance isn't enough to accomodate the width of the context menu
if (rightedge<tipobj.offsetWidth){
//move the horizontal position of the menu to the left by it's width
tipobj.style.left=curX-tipobj.offsetWidth+"px"
nondefaultpos=true
}
else if (curX<leftedge)
tipobj.style.left="5px"
else{
//position the horizontal position of the menu where the mouse is positioned
tipobj.style.left=curX+offsetfromcursorX-offsetdivfrompointerX+"px"
pointerobj.style.left=curX+offsetfromcursorX+"px"
}
//same concept with the vertical position
if (bottomedge<tipobj.offsetHeight){
tipobj.style.top=curY-tipobj.offsetHeight-offsetfromcursorY+"px"
nondefaultpos=true
}
else{
tipobj.style.top=curY+offsetfromcursorY+offsetdivfrompointerY+"px"
pointerobj.style.top=curY+offsetfromcursorY+"px"
}
tipobj.style.visibility="visible"
if (!nondefaultpos)
pointerobj.style.visibility="visible"
else
pointerobj.style.visibility="hidden"
}
}

function hideddrivetip(){
if (ns6||ie){
enabletip=false
tipobj.style.visibility="hidden"
pointerobj.style.visibility="hidden"
tipobj.style.left="-1000px"
tipobj.style.backgroundColor=''
tipobj.style.width=''
}
}
document.onmousemove=positiontip
//]]>
</script>

Langkah yang terakhir tinggal masukkan code dimana kita ingin menampilkan tooltips, disini saya akan memberikan contoh kalau kita ingin pasang tooltips pada sidebar widget dan berikut codenya...

<a onmouseover="ddrivetip('Rchymera|Blog.', 240)" onmouseout="hideddrivetip()" href="http://www.rchymera.blogspot.com" target="_blank">Tooltips</a>

Bila sudah sobat pasangkan hasilnya akan seperti ini...Tooltips

Untuk menyesuaikan dengan template yang sobat gunakan silahkan edit pada bagian CSSnya dan apabila para sobat ingin pasangkan ditempat lain tinggal kreasikan dengan keinginan sobat (namanya juga editing jadi gak ada yang instan xixixi...:D)
Sekian penjelasan dari saya dan semoga berguna bagi sobat yang gemar utak-atik template serta coding hehehe...:D

Salam hangat dari Kediri dan semoga sukses selalu menyertai kita semua,amien.

Share to:

Related Post: