Cara buat kayak gambar di atas Copy aj Script di bawah ini :
1. masuk ke blog kalian.
2. Pilih tata letak/rancangan.
3. pilih Tambah gadget terus pilih HTML/JavaScript
4. Tinggal copas code di bawah.
5. Simpan :)
<style>
/*-------MBT Floating Counters------------*/
#floatdiv {
position:absolute;
width:39px;
height:119px;
top:0;
left:0;
z-index:99
}
#mbtsidebar {
border:1px solid #ddd;
padding-left:5px;
position:relative;
height:140px;
width:39px;
margin:0 0 0 5px;
}
</style>
<div id="floatdiv">
<div id="mbtsidebar">
<table cellpadding="0px" cellspacing="0">
<tr>
<td style="border-bottom: 1px solid #E8E8E8; padding:5px 0 2px 0;">
<a href='http://www.facebook.com/iqvanadhiem'><img alt='Follow us Fb' src='http://i47.tinypic.com/hvquyc.png' title='Follow us Fb'/>
</a></td>
</tr>
<tr>
<td style="border-bottom: 1px solid #E8E8E8; padding:5px 0px;">
<a href='http://twitter.com/adhiemiqvan'><img alt='Follow us twitter' src='http://i49.tinypic.com/aryi8.png' title='Follow us twitter'/>
</a></td>
</tr>
<tr>
<td style="border-bottom: 0px solid #E8E8E8; padding:5px 0 0px 0;">
<a href='https://plus.google.com/105561086730242119673'><img alt='FInd us google plus' src='http://i46.tinypic.com/15guvr9.png' title='FInd us google plus'/>
</a></td>
</tr>
<tr>
<td style="border-bottom: 0px solid #0177c9; padding:0px 0 0px 0;">
<p style=" font-size:10px; text-align:center; color:#ddd;"><a style="color:#ddd;" href="http://www.google.com/friendconnect/signin/home?st=e%3DAOG8GaBc%252BD6TP1LO3dIwzLrVBKEwBcZGDC80o09rZR1yR1AVRQBXJzQou5vC7cjOQ4XU8N2fIpJuiwNONu3L8fzF01QimueKygiIHZD9dM1%252BtHt8HJxTpfBgLQrgMuYT5mIwoT85z1gqHxpgnv32o13BiLw88GHOm5ZFkp29vi1HSkb%252Fp53bF5O6ctFrRQAWZu7As0EVA4Sl52Y9CSMR%252B4yO0jdDAafX2cvcSv%252FU2hxwXc9077x%252B2%252Fc%253D%26c%3Dpeoplesense&psinvite=&subscribeOnSignin=1/" target="_blank">Likes</a></p>
</td>
</tr>
</table>
</div>
</div>
<script type="text/javascript">
// JavaScript Document
<!--
/* Script by: http://ilmukomputeran.blogspot.com/
* Version: 201202
* Latest version:
* http://ilmukomputeran.blogspot.com/floating.html
*/
var floatingMenuId = 'floatdiv';
var floatingMenu =
{
targetX: 0,
targetY: 300,
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.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)
{
// Handle Opera 8 problems
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);
// Handle Opera 8 problems
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()
{
// Check if reference to menu was lost due
// to ajax manipuations
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.move();
}
setTimeout('floatingMenu.doFloat()', 20);
};
// addEvent designed by Aaron Moore
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;
}
}
//if handler is not already stored, assign it
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();
};
// Some browsers init scrollbars only after
// full document load.
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>
Warna Biru ganti dengan URL kalian..
Warna Merah ganti dengan URL gambar kalian..
Semoga kalian senang :)
