Add Text that follows Mouse Cursor Rotatably in Blogger

One of the best way to add extra fun to your blog is add a text following the pointer. This is a script that make text following the cursor rotatably, when the course moves text follows and when cursor stop text move rotatably around it. You can see a running example on this blog post. It gives a impressive and attracted look to your blog. It enables your visitors to play on your blog and hence it decrease blog bounce rate. You can add this effect on your blog without disturbing your blog's template. So if you want to apply this great trick on your blog, start rolling your fingers on the tutorial.
Note : You can check out the Live Demo of this widget on this blog post, just slide your mouse cursor.

How to Add this:

To place it on your blog just follow these simple steps:

• Go to Blogger Dashboard >> Layout.
• Add A Gadget >> Html/JavaScript.
• Paste the below given code in that and Click Save.

<style type="text/css">
/*Rotating text that follows the cursor  */
#outerCircleText {
font-style: italic;
font-weight: bold;
font-family: verdana, arial; /* Fonts */
color: #000; /* Text Color */

position: absolute;top: 0;left: 0;z-index: 3000;cursor: default;}
#outerCircleText div {position: relative;}
#outerCircleText div div {position: absolute;top: 0;left: 0;text-align: center;}
</style>
<script type="text/javascript">
//<![CDATA[

;(function(){

// Message
var msg = "My Blogger Buzz";

// Font Size
var size = 22;

var circleY = 0.75; var circleX = 2;

// Space between each letter
var letter_spacing = 5;

// Diameter of circle
var diameter = 10;

//Rotation speed
var rotation = 0.3;

// Reaction rate
var speed = 0.3;


if (!window.addEventListener && !window.attachEvent || !document.createElement) return;

msg = msg.split('');

var n = msg.length - 1, a = Math.round(size * diameter * 0.208333), currStep = 20,
ymouse = a * circleY + 20, xmouse = a * circleX + 20, y = [], x = [], Y = [], X = [],

o = document.createElement('div'), oi = document.createElement('div'),
b = document.compatMode && document.compatMode != "BackCompat"? document.documentElement :
document.body,

mouse = function(e){

e = e || window.event;

ymouse = !isNaN(e.pageY)? e.pageY : e.clientY; // y-position
xmouse = !isNaN(e.pageX)? e.pageX : e.clientX; // x-position
},

makecircle = function(){ // rotation/positioning

if(init.nopy){
o.style.top = (b || document.body).scrollTop + 'px';
o.style.left = (b || document.body).scrollLeft + 'px';
};
currStep -= rotation;
for (var d, i = n; i > -1; --i){ // makes the circle
d = document.getElementById('iemsg' + i).style;
d.top = Math.round(y[i] + a * Math.sin((currStep + i) / letter_spacing) * circleY - 15) + 'px';
d.left = Math.round(x[i] + a * Math.cos((currStep + i) / letter_spacing) * circleX) + 'px';
};
},

drag = function(){ // makes the resistance
y[0] = Y[0] += (ymouse - Y[0]) * speed;
x[0] = X[0] += (xmouse - 20 - X[0]) * speed;
for (var i = n; i > 0; --i){
y[i] = Y[i] += (y[i-1] - Y[i]) * speed;
x[i] = X[i] += (x[i-1] - X[i]) * speed;
};
makecircle();
},

init = function(){ // appends message divs, & sets initial values for positioning arrays
if(!isNaN(window.pageYOffset)){
ymouse += window.pageYOffset;
xmouse += window.pageXOffset;
} else init.nopy = true;

for (var d, i = n; i > -1; --i){
d = document.createElement('div'); d.id = 'iemsg' + i;
d.style.height = d.style.width = a + 'px';
d.appendChild(document.createTextNode(msg[i]));
oi.appendChild(d); y[i] = x[i] = Y[i] = X[i] = 0;
};
o.appendChild(oi); document.body.appendChild(o);
setInterval(drag, 25);
},

ascroll = function(){
ymouse += window.pageYOffset;
xmouse += window.pageXOffset;
window.removeEventListener('scroll', ascroll, false);

};

o.id = 'outerCircleText'; o.style.fontSize = size + 'px';


if (window.addEventListener){
window.addEventListener('load', init, false);
document.addEventListener('mouseover', mouse, false);
document.addEventListener('mousemove', mouse, false);
if (/Apple/.test(navigator.vendor))
window.addEventListener('scroll', ascroll, false);
}
else if (window.attachEvent){
window.attachEvent('onload', init);
document.attachEvent('onmousemove', mouse);
};

})();
//]]>
</script>

Now, Change the red text with your desired message. You can change the text size, font, color, speed, etc.. I have marked ( green ) so you can customize it to your taste, just locate the corresponding area to make the change.

About The Author!

Abdul Basit is an enthusiastic and passionate blogger from Multan, Pakistan. He loves to blog and to share his blogging knowledge with others. Currently he is managing his blog named My Tech Blogging.

He is the co-author of MyBloggerBuzz and love to share his bright ideas on Blogging, Traffic, SEO tips on this blog.