Scrollable Content

Sobat pernah melihat konten yang melayang-layang dan ketika melakukan scroll, konten tersebut akan terus berada pada layar monitor dan tampilan blog/web sobat!!! Pasti tidak paham apa yg bloglang ganteng kalem maksudkan yah ;)) :D Tenang saja kok sob, trik ini merupakan trick Add a Gadget ► HTML/Javascript dalam penerapannya :-" Jadi kalau mau lihat demonya langsung saja masukin nih bumbu²nya ke HTML/Javascript :D Kalau dalam screenshot praktek Beben kayak gini sob...

Yang hijau itu tuh nanti akan scrollable :P Masukan kode dan script pada HTML/Javascript.

Code and Script

<div id="floatdiv" style="position:absolute;
width:100px;
height:280px;
left:10px;
top:0px;
padding:0;
background:transparent;
border:1px solid #555;">

<a href="http://your-blog-name.blogspot.com/search/label/your-name-lable">Label Name</a><br />
<a href="http://your-blog-name.blogspot.com/search/label/your-name-lable">Label Name1</a><br />
<a href="http://your-blog-name.blogspot.com/search/label/your-name-lable">Label Name2</a><br />
<a href="http://your-blog-name.blogspot.com/search/label/your-name-lable">Label Name3</a><br />
<a href="http://your-blog-name.blogspot.com/search/label/your-name-lable">Label Name4</a><br />
<a href="http://your-blog-name.blogspot.com/search/label/your-name-lable">Label Name5</a><br />
<a href="http://your-blog-name.blogspot.com/search/label/your-name-lable">Label Name6</a><br />
<a href="http://your-blog-name.blogspot.com/search/label/your-name-lable">Label Name7</a><br />
<a href="http://your-blog-name.blogspot.com/search/label/your-name-lable">Label Name8</a><br />
<a href="http://your-blog-name.blogspot.com/search/label/your-name-lable">Label Name9</a><br />
<a href="http://your-blog-name.blogspot.com/search/label/your-name-lable">Label Name10</a><br />
<a href="http://your-blog-name.blogspot.com/search/label/your-name-lable">Label Name11</a><br />
<a href="http://your-blog-name.blogspot.com/search/label/your-name-lable">Label Name12</a><br />
<a href="http://your-blog-name.blogspot.com/search/label/your-name-lable">Label Name13</a>
</div>


<script type="text/javascript">
<!--
var floatingMenuId='floatdiv';
var floatingMenu=
{
targetX:-115,
targetY:350,
hasInner:typeof(window.innerWidth)=='number',
hasElement:typeof(document.documentElement)=='object'
&&typeof(document.documentElement.clientWidth)=='number',
menu:
document.getElementById
?document.getElementById(floatingMenuId)
:document.all
?document.all[floatingMenuId]
:document.layers[floatingMenuId]
};
floatingMenu.move=function()
{
floatingMenu.menu.style.left=floatingMenu.nextX+'px';
floatingMenu.menu.style.top=floatingMenu.nextY+'px';
}
floatingMenu.move2=function()
{
floatingMenu.menu.style.left=floatingMenu.nextX+'px';
floatingMenu.menu.style.top=floatingMenu.nextY-190+'px';
}
floatingMenu.computeShifts=function()
{
var de=document.documentElement;
floatingMenu.shiftX=
floatingMenu.hasInner
?pageXOffset
:floatingMenu.hasElement
?de.scrollLeft
:document.body.scrollLeft;
if(floatingMenu.targetX<0)
{
floatingMenu.shiftX+=
floatingMenu.hasElement
?de.clientWidth
:document.body.clientWidth;
}
floatingMenu.shiftY=
floatingMenu.hasInner
?pageYOffset
:floatingMenu.hasElement
?de.scrollTop
:document.body.scrollTop;
if(floatingMenu.targetY<0)
{
if(floatingMenu.hasElement&&floatingMenu.hasInner)
{
floatingMenu.shiftY+=
de.clientHeight>window.innerHeight
?window.innerHeight
:de.clientHeight
}
else
{
floatingMenu.shiftY+=
floatingMenu.hasElement
?de.clientHeight
:document.body.clientHeight;
}
}
}
floatingMenu.calculateCornerX=function()
{
if(floatingMenu.targetX!='center')
return floatingMenu.shiftX+floatingMenu.targetX;
var width=parseInt(floatingMenu.menu.offsetWidth);
var cornerX=
floatingMenu.hasElement
?(floatingMenu.hasInner
?pageXOffset
:document.documentElement.scrollLeft)+
(document.documentElement.clientWidth-width)/2
:document.body.scrollLeft+
(document.body.clientWidth-width)/2;
return cornerX;
};
floatingMenu.calculateCornerY=function()
{
if(floatingMenu.targetY!='center')
return floatingMenu.shiftY+floatingMenu.targetY;
var height=parseInt(floatingMenu.menu.offsetHeight);
var clientHeight=
floatingMenu.hasElement&&floatingMenu.hasInner
&&document.documentElement.clientHeight
>window.innerHeight
?window.innerHeight
:document.documentElement.clientHeight
var cornerY=
floatingMenu.hasElement
?(floatingMenu.hasInner
?pageYOffset
:document.documentElement.scrollTop)+
(clientHeight-height)/2
:document.body.scrollTop+
(document.body.clientHeight-height)/2;
return cornerY;
};
floatingMenu.doFloat=function()
{
if(!floatingMenu.menu)
{
menu=document.getElementById
?document.getElementById(floatingMenuId)
:document.all
?document.all[floatingMenuId]
:document.layers[floatingMenuId];
initSecondary();
}
var stepX,stepY;
floatingMenu.computeShifts();
var cornerX=floatingMenu.calculateCornerX();
var stepX=(cornerX-floatingMenu.nextX)*.07;
if(Math.abs(stepX)<.5)
{
stepX=cornerX-floatingMenu.nextX;
}
var cornerY=floatingMenu.calculateCornerY();
var stepY=(cornerY-floatingMenu.nextY)*.07;
if(Math.abs(stepY)<.5)
{
stepY=cornerY-floatingMenu.nextY;
}
if(Math.abs(stepX)>0||
Math.abs(stepY)>0)
{
floatingMenu.nextX+=stepX;
floatingMenu.nextY+=stepY;
floatingMenu.move2();
}
setTimeout('floatingMenu.doFloat()',20);
};
floatingMenu.addEvent=function(element,listener,handler)
{
if(typeof element[listener]!='function'||
typeof element[listener+'_num']=='undefined')
{
element[listener+'_num']=0;
if(typeof element[listener]=='function')
{
element[listener+0]=element[listener];
element[listener+'_num']++;
}
element[listener]=function(e)
{
var r=true;
e=(e)?e:window.event;
for(var i=element[listener+'_num']-1;i>=0;i--)
{
if(element[listener+i](e)==false)
r=false;
}
return r;
}
}
for(var i=0;i<element[listener+'_num'];i++)
if(element[listener+i]==handler)
return;
element[listener+element[listener+'_num']]=handler;
element[listener+'_num']++;
};
floatingMenu.init=function()
{
floatingMenu.initSecondary();
floatingMenu.doFloat();
};
floatingMenu.initSecondary=function()
{
floatingMenu.computeShifts();
floatingMenu.nextX=floatingMenu.calculateCornerX();
floatingMenu.nextY=floatingMenu.calculateCornerY();
floatingMenu.move();
}
if(document.layers)
floatingMenu.addEvent(window,'onload',floatingMenu.init);
else
{
floatingMenu.init();
floatingMenu.addEvent(window,'onload',
floatingMenu.initSecondary);
}
//-->
</script>

Untuk menyelaraskan jarak pinggir terhadap sisi monitor ke konten harap diperhatikan tulisan script yg diberi warna merah dan biru. Selaraskan sampai benar2 terasa pas ya ;)) :"> ;)
Bye bye :-h