Add Text that follows Mouse Cursor Rotatably in Blogger

♠ Posted by Unknown in Blogger tips,blogger widgets at 01:19

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(){
// Messagevar msg = "BloggerhelpNtricks";
// Font Sizevar size = 22;
var circleY = 0.75; var circleX = 2;
// Space between each lettervar letter_spacing = 5;
// Diameter of circlevar diameter = 10;
//Rotation speedvar rotation = 0.3;
// Reaction ratevar 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-positionxmouse = !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 circled = 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 resistancey[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 arraysif(!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.