Home » Blogger » Membuat Link Floatie

Membuat Link Floatie

in Blogger - on 4:27 PM - 4 comments

Susah mau ngasih judul apaan yang pasti saat mouse menuju pada link kita maka akan muncul float message gitu lhoo.!!!!

Masih gak ngerti Ya kurang lebih yang seperti dibawah ini nih..!!! coba aja mouse kamu arakkan pada link dibawah ini.!!!

www.ebenk789.blogspot.com | label di blog ebenk

Wah tertarik ya..!!! Ya udah berikut cara-caranya:

Langkah 1: Masukkan kode berikut ke dalam <head> bagian dari halaman Anda:

/----texttips by ebenk789
#dhtmlfloatie{
position: absolute;
left: 0;
left: -900px;
filter:alpha(opacity=0);
-moz-opacity:0;
border: 2px solid black;
padding: 5px;
z-index: 100;
}

Langkah 2: Masukkan kode dibawah ini pada widget HTML/Javascript

<script type="text/javascript">

var floattext=new Array()
floattext[0]='- <a href=" http://www.ebenk789.blogspot.com">HomePage</a><br>- <a href=" http://ebenk789.blogspot.com/search/label/Blogger">Blog Tutorial</a><br>- <a href=" http://ebenk789.blogspot.com/search/label/Komputer">Tips Komputer</a><br>- <a href=" http://ebenk789.blogspot.com/search/label/Hack">Hacking</a><br><div align="right"><a href="javascript:hidefloatie()">hide box</a></div>'
floattext[1]='Some other floatie text'

var floatiewidth="250px" //default width of floatie in px
var floatieheight="60px" //default height of floatie in px. Set to "" to let floatie content dictate height.
var floatiebgcolor="lightyellow" //default bgcolor of floatie
var fadespeed=70 //speed of fade (5 or above). Smaller=faster.

var baseopacity=0
function slowhigh(which2){
imgobj=which2
browserdetect=which2.filters? "ie" : typeof which2.style.MozOpacity=="string"? "mozilla" : ""
instantset(baseopacity)
highlighting=setInterval("gradualfade(imgobj)",fadespeed)
}

function instantset(degree){
cleartimer()
if (browserdetect=="mozilla")
imgobj.style.MozOpacity=degree/100
else if (browserdetect=="ie")
imgobj.filters.alpha.opacity=degree
}

function cleartimer(){
if (window.highlighting) clearInterval(highlighting)
}

function gradualfade(cur2){
if (browserdetect=="mozilla" && cur2.style.MozOpacity<1)
cur2.style.MozOpacity=Math.min(parseFloat(cur2.style.MozOpacity)+0.1, 0.99)
else if (browserdetect=="ie" && cur2.filters.alpha.opacity<100)
cur2.filters.alpha.opacity+=10
else if (window.highlighting)
clearInterval(highlighting)
}

function ietruebody(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

function paramexists(what){
return(typeof what!="undefined" && what!="")
}

function showfloatie(thetext, e, optbgColor, optWidth, optHeight){
var dsocx=(window.pageXOffset)? pageXOffset: ietruebody().scrollLeft;
var dsocy=(window.pageYOffset)? pageYOffset : ietruebody().scrollTop;
var floatobj=document.getElementById("dhtmlfloatie")
floatobj.style.left="-900px"
floatobj.style.display="block"
floatobj.style.backgroundColor=paramexists(optbgColor)? optbgColor : floatiebgcolor
floatobj.style.width=paramexists(optWidth)? optWidth+"px" : floatiewidth
floatobj.style.height=paramexists(optHeight)? optHeight+"px" : floatieheight!=""? floatieheight : ""
floatobj.innerHTML=thetext
var floatWidth=floatobj.offsetWidth>0? floatobj.offsetWidth : floatobj.style.width
var floatHeight=floatobj.offsetHeight>0? floatobj.offsetHeight : floatobj.style.width
var winWidth=document.all&&!window.opera? ietruebody().clientWidth : window.innerWidth-20
var winHeight=document.all&&!window.opera? ietruebody().clientHeight : window.innerHeight
e=window.event? window.event : e
floatobj.style.left=dsocx+winWidth-floatWidth-5+"px"
if (e.clientX>winWidth-floatWidth && e.clientY+20>winHeight-floatHeight)
floatobj.style.top=dsocy+5+"px"
else
floatobj.style.top=dsocy+winHeight-floatHeight-5+"px"
slowhigh(floatobj)
}

function hidefloatie(){
var floatobj=document.getElementById("dhtmlfloatie")
floatobj.style.display="none"
}

</script>

Langkah 3: Masukkan kode di bawah ini ke dalam <body> bagian dari halaman Anda: Kenapa..? gak ngerti ya..? maksudnya ini contoh link yanga akan kita beri efek floatie. letakan ini pada saat anda psoting..!!!

<a href="#" onMouseover="showfloatie(' MASUKAN PESAN ANDA DISINI', event)" onMouseout="hidefloatie()">EBENK789</a> | <a href="#" onMouseover="showfloatie(floattext[0], event, '#D9FFD9', 250, 100)">TEXT LINK HERE</a>

<div id="dhtmlfloatie" ></div>

Perhatikan code berikut..!!! <div id="dhtmlfloatie" ></div>

Kode diatas merupakan tempat munculnya pesan..!!! jadi kamu dapat mengatur letak munculnya pesan..!!!

4 comments

Anonymous mod

January 2, 2009 at 6:29 PM

Boleh dicoba nih, tp ntar aja deh...lagi puyeng nih hehe..thx infonya b0z! :-D

Anonymous mod

January 2, 2009 at 9:21 PM

pening aku....
udah ku coba tapi tak berhasil juga...

January 7, 2009 at 12:19 PM

haha... payah bangat sih...

Rusli Zainal mod

July 12, 2009 at 11:31 AM

waduh gak mudeng saya. Buat apaan yah .... :?

Tapi keknya menarik nih... save dulu ah.... ;;)

Post a Comment