01 / 05 / 2012

How to add floating navigation to your blog

CLICK HERE FOR LIVE PREVIEW
Dah tengok? okay tak? dah lama nak buat actually. Puas tweak code untuk dapat kan tooltips tu. Code dia pening sikit. Harap korang faham.

<style>
#dhtmltooltip{
position: absolute;
width: 60px;
text-align:center;
border: 2px solid #F9CDAD;
padding: 2px;
visibility: hidden;
z-index: 100;
font-family: 'lucida sans unicode';
text-transform: uppercase;
color:#F9CDAD;
font-size:10px;
background:#fff;
-moz-box-shadow: 0px 0px 8px #ccc;
-webkit-box-shadow: 0px 0px 8px #ccc;
box-shadow: 0px 0px 8px #ccc;
filter: progid:DXImageTransform.Microsoft.Shadow(color=gray,direction=135);
}
#pos{
position:fixed;
top:200px;
left:10px;
}
a.nav{
color:#83AF9B;
margin-bottom:24px;
display:inline-block;
width:50px;
height:50px;
background:#fff;
border:2px solid #F9CDAD;
border-radius:1111px;
-moz-box-shadow: 0px 0px 6px #ccc;
-webkit-box-shadow: 0px 0px 6px #ccc;
box-shadow: 0px 0px 6px #ccc;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
a.nav:hover{
border:2px solid #C8C8A9;
}

a.nav2{
color:#83AF9B;
margin-bottom:24px;
display:inline-block;
width:50px;
height:50px;
background:#fff;
border:2px solid #FC9D9A;
border-radius:1111px;
-moz-box-shadow: 0px 0px 6px #ccc;
-webkit-box-shadow: 0px 0px 6px #ccc;
box-shadow: 0px 0px 6px #ccc;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
a.nav2:hover{
border:2px solid #FE4365;
}

</style>
<div id="dhtmltooltip"></div>
<script type="text/javascript">
/***********************************************
* Cool DHTML tooltip script- © 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 offsetxpoint=-60 //Customize x offset of tooltip
var offsetypoint=20 //Customize y offset of tooltip
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") : ""
function ietruebody(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}
function ddrivetip(thetext, thecolor, thewidth){
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 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 rightedge=ie&&!window.opera? ietruebody().clientWidth-event.clientX-offsetxpoint : window.innerWidth-e.clientX-offsetxpoint-20
var bottomedge=ie&&!window.opera? ietruebody().clientHeight-event.clientY-offsetypoint : window.innerHeight-e.clientY-offsetypoint-20
var leftedge=(offsetxpoint<0)? offsetxpoint*(-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=ie? ietruebody().scrollLeft+event.clientX-tipobj.offsetWidth+"px" : window.pageXOffset+e.clientX-tipobj.offsetWidth+"px"
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+offsetxpoint+"px"
//same concept with the vertical position
if (bottomedge<tipobj.offsetHeight)
tipobj.style.top=ie? ietruebody().scrollTop+event.clientY-tipobj.offsetHeight-offsetypoint+"px" : window.pageYOffset+e.clientY-tipobj.offsetHeight-offsetypoint+"px"
else
tipobj.style.top=curY+offsetypoint+"px"
tipobj.style.visibility="visible"
}
}
function hideddrivetip(){
if (ns6||ie){
enabletip=false
tipobj.style.visibility="hidden"
tipobj.style.left="-1000px"
tipobj.style.backgroundColor=''
tipobj.style.width=''
}
}
document.onmousemove=positiontip
</script>

<link rel="stylesheet" type="text/css" href="stickytooltip.css" />
<div id="pos">
<a class="nav" href="LINK"  onMouseover="ddrivetip('Facebook')"; onMouseout="hideddrivetip()"></a><br/>
<a class="nav2" href="LINK" onMouseover="ddrivetip('Twitter')"; onMouseout="hideddrivetip()"></a><br/>
<a class="nav" href="LINK" onMouseover="ddrivetip('Tumblr')"; onMouseout="hideddrivetip()"></a><br/>
<a class="nav2" href="LINK"onMouseover="ddrivetip('Formspring')"; onMouseout="hideddrivetip()"></a><br/>
</div>

Kalau guna blogskin, letak jelah dekat mana-mana and kalau guna template designer paste dalam HTM/Gadget kay :3 bye.
»
«
  • OMG AWESOME *O* AWESOME *O* AWESOME *O*

  • mekasih .__________.

  • akk, boleyh x kalao aqil jdkan NAVI yg utk page2 tuh? mcm mne erk?

  • @mOha are-qil page? letaklah link page tu ._.

  • omg cantik sgt , nurul gune tau . nty nurul kreditkn awk 😉

  • kak wana. guna ni. nanti kredit. AWEOSOME sangat *u*

  • Thanks .. very Ohsemm ..

  • AAAAAAAA! Cantik, cantik! Nanti sy credit 😀

  • thx sangat2 !! cantek :))

  • sy pown gne jugak…tq..

  • Thanks! And macam nak ubah dia dekat sikit dengan body?

  • thanks forthe tuto 🙂 use it ^^

  • How do I change it into older and newer post ? :/ Thank you !

  • @Jeanette : Its quite complicated ._. but maybe you can put older and newer post link into the link codes

  • ain gne tuto nim 😀

  • Good tuto ^^ Kina guna ye..

  • Nice tuto 🙂 Kina guna tau

  • saya suka tuto ni ^_^
    terima kasih

  • Kalau nak letak belah kanan atau kiri dekat mane ek ?

  • kalau nak buat ni jadi navi boleh kann?? tapi nak buat camne? 🙁

  • @nuruf farihah anuar : susah sikit ._.

  • macam mana nak ubah pergi sebelah kiri/kanan ?

  • Tytytyty

  • Anonymous

    search word "left" dalam style tag. tukar jadi "right" . and siap !

»
«

A personal & design blog based in Malaysia. Blog is still under construction but enjoy your visit!

Search this blog

category

Blogging Personal Tutorials Freebies Category Category

subscribe this blog

My Bloglist

Sponsor


Random post from this blog



© 2011-2017 WANASEOBY.COM