0
Adding Text that follows Mouse Cursor Rotatably in Blogger: Today i am writing this post because to add extra fun to your blog. Which is add a text following the pointer. All you need to to is take the script from this post.
blogger add text

This is a script that make text following the cursor rotatably, when the course moves in your blogger then text follows and when cursor stop text move rotatably around it.

It gives a good 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 following tutorial.

You can also see a running example by clicking Live Demo link.

Live Demo

Trick To Add Text To The Cursor In Blogger


To place this effect on your blog just follow these simple steps:

Step 1:


First Go to Blogger dash board, then click on Layout.

Dashboard >> Layout.

Step 2:


Then click on Add A Gadget >> Html/JavaScript.

Step 3:


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 = "Useful Info";
// 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 coloured text with your desired message. From above i placed my blog name. You can change the text size, font, color, speed, etc.. I have marked it is in  pink colour.
Keep visiting our website for more posts in future. We will update more and more posts daily. 

Post a Comment

 
Top