Labels Cloud Blogger

Labels cloud for blogger only use JavaScript

by Beben Koben

HTML

<h1>Tutorial Blog for Stylish Blogger</h1>

<div id="cloud">	<a href="http://beben-koben.blogspot.com/search/label/Agama">Agama</a>
	<a href="http://beben-koben.blogspot.com/search/label/Aplikasi" class="red">Aplikasi</a>
	<a href="http://beben-koben.blogspot.com/search/label/Blogger">Blogger</a>
	<a href="http://beben-koben.blogspot.com/search/label/Celebritis">Celebritis</a>
	<a href="http://beben-koben.blogspot.com/search/label/Coded" class="blue">Coded</a>
	<a href="http://beben-koben.blogspot.com/search/label/CSS">CSS</a>
	<a href="http://beben-koben.blogspot.com/search/label/CSS3" class="red">CSS3</a>
	<a href="http://beben-koben.blogspot.com/search/label/Curhat" class="yellow">Curhat</a>
	<a href="http://beben-koben.blogspot.com/search/label/Facebook">Facebook</a>
	<a href="http://beben-koben.blogspot.com/search/label/Free%20Opensource" class="red">Free Opensource</a>
	<a href="http://beben-koben.blogspot.com/search/label/Google" class="green">Google</a>
	<a href="http://beben-koben.blogspot.com/search/label/Hack" class="blue">Hack</a>
	<a href="http://beben-koben.blogspot.com/search/label/HTML">HTML</a>
	<a href="http://beben-koben.blogspot.com/search/label/HTML5" class="red">HTML5</a>
	<a href="http://beben-koben.blogspot.com/search/label/Informasi" class="blue">Informasi</a>
	<a href="http://beben-koben.blogspot.com/search/label/Javascript">Javascript</a>
	<a href="http://beben-koben.blogspot.com/search/label/jQuery" class="blue">jQuery</a>
	<a href="http://beben-koben.blogspot.com/search/label/Kontes">Kontes</a>
	<a href="http://beben-koben.blogspot.com/search/label/Ragam" class="green">Ragam</a>
	<a href="http://beben-koben.blogspot.com/search/label/SEO" class="yellow">SEO</a>
	<a href="http://beben-koben.blogspot.com/search/label/Snippet" class="blue">Snippet</a>
	<a href="http://beben-koben.blogspot.com/search/label/Software" class="yellow">Software</a>
	<a href="http://beben-koben.blogspot.com/search/label/Teknologi">Teknologi</a>
	<a...

CSS

* {
    margin:0;
    padding:0;
}
body {
    background:#debe94;
    color:#000;
    font:15px Calibri, Arial, sans-serif;
    text-shadow:1px 1px 1px #FFFFFF;
    padding:10px;
}
a, a:visited {
    text-decoration:none;
    outline:none;
    color:#a00;
}
a:hover {
    color:#fff;
}
footer {
    background:#D3A76F;
    position:fixed;
    width:100%;
    border-top:1px solid #333;
    height:70px;
    bottom:0;
    left:0;
    color:#fff;
    text-shadow:1px 2px 0 #000;
}
footer h2 {
    font:25px/26px Acens;
    font-weight:bold;
    left:70%;
    margin:0px 0 0 150px;
    padding:20px 0;
    position:relative;
    width:400px;
}
footer a.orig, a.orig:visited {
    -moz-box-shadow:0px 0px 20px #000;
    -webkit-box-shadow:0px 0px 20px #000;
    box-shadow:0px 0px 20px #000;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
    text-decoration:blink;
    font-weight:bold;
    color:#f00;
    font-size:14px;
    left:37%;
    line-height:46px;
    margin:12px 0 0 -405px;
    position:absolute;
    top:0;
    width:75px;
}
.cred {
    padding-top:10px;
}
h1 {
    text-align:center;
    text-shadow:3px 3px 5px #000;
    padding:25px;
    font-family: Verdana, Geneva, sans-serif;
    font-size:20pt;
    color:#D3A76F;
}
#cloud {
    width: 500px;
    height: 500px;
    position: relative;
    margin: 20px auto 0;
}
#cloud a {
    color: #000;
    padding: 3px 6px;
    position: absolute;
}
#cloud a:hover {
    background: #555;
    border: 1px solid #333;
}
#cloud .blue {
    color: #06f;
}
#cloud .red {
    color: red;
}
#cloud .yellow {
    color: yellow;
}
#cloud .green {
    color: green;
}

JavaScript

var radius = 150;
var dtr = Math.PI / 150;
var d = 185;

var mcList = [];
var lasta = 1;
var lastb = 1;
var size = 250;
var mouseX = 0;
var mouseY = 0;
var aA = null;
var oDiv = null;
var tspeed = 10;
var distr = true;
var active = false;
var howElliptical = 1;

window.onload = function () {
    var i = 0;
    var oTag = null;
    oDiv = document.getElementById('cloud');
    aA = oDiv.getElementsByTagName('a');
    for (i = 0; i < aA.length; i++) {
        oTag = {};
        oTag.offsetWidth = aA[i].offsetWidth;
        oTag.offsetHeight = aA[i].offsetHeight;
        mcList.push(oTag);
    }
    sineCosine(0, 0, 0);
    positionAll();
    oDiv.onmouseover = function () {
        active = true;
    };
    oDiv.onmouseout = function () {
        active = false;
    };
    oDiv.onmousemove = function (ev) {
        var oEvent = window.event || ev;
        mouseX = oEvent.clientX - (oDiv.offsetLeft + oDiv.offsetWidth / 2);
        mouseY = oEvent.clientY - (oDiv.offsetTop + oDiv.offsetHeight / 2);
        mouseX /= 5;
        mouseY /= 5;
    };
    setInterval(update, 30);
};

function update() {
    var a;
    var b;
    if (active) {
        a = (-Math.min(Math.max(-mouseY, -size), size) / radius) * tspeed;
        b = (Math.min(Math.max(-mouseX, -size), size) / radius) * tspeed;
    } else {
        a = lasta * 0.98;
        b = lastb * 0.98;
    }
    lasta = a;
    lastb = b;
    if (Math.abs(a) <= 0.01 && Math.abs(b) <= 0.01) {
        return;
    }
    var c = 0;
    sineCosine(a, b, c);
    for (var j = 0; j < mcList.length; j++) {
        var rx1 = mcList[j].cx;
        var ry1 = mcList[j].cy * ca + mcList[j].cz * (-sa);
        var rz1 = mcList[j].cy * sa + mcList[j].cz * ca;
        var rx2 = rx1 * cb + rz1 * sb;
        var ry2 = ry1;
        var rz2 = rx1 * (-sb) + rz1 * cb;
        var rx3 = rx2 * cc + ry2 * (-sc);
        var ry3 = rx2 * sc + ry2 * cc;
        var rz3 = rz2;
        mcList[j].cx = rx3;
        mcList[j].cy = ry3;
        mcList[j].cz...