I came across a nice widget which again makes the users annoying ![🙂]()
This widget enables the users, yourself and readers to make the welcome message follow your cursor motion.
![Text that follows the spinning cursor for Blogger Text that follows the spinning cursor for Blogger]()
This widget is the creation of Tim Tilton from tempermedia and the practised on dynamicdrive.
Check : Change post background in Blogger
Here is the implementation and code for Blogger usage:
Note: Please backup your template before proceeding with this procedure.
1. Go to Dashboard > Template > Edit HTML
2. Search for(Ctrl+F) “</head>“
3. Just ABOVE that paste the following code:
<style type=’text/css’>
/* Text that follows the spinning cursor */
#outerCircleText {
font-style: italic;
font-weight: bold;
font-family: verdana, arial; /* Font */
color: #000; /* Text Color */
/* Do not edit this area */
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[
/* Circling text trail- Tim Tilton
Website: http://www.tempermedia.com/
Visit: http://www.dynamicdrive.com/ for Original Source and tons of scripts
Modified Here for more flexibility and modern browser support
Modifications as first seen in http://www.dynamicdrive.com/forums/
username:jscheuer1 – This notice must remain for legal use
*/
;(function(){
// Message
var msg = “Welcome to iTechColumn“;
// Font size
var size = 22;
// Determines whether circular or oval, 1 for circular and 2 for oval
var circleY = 0.75; var circleX = 2;
// Space between each letter
var letter_spacing = 5;
// Diameter of the circle
var diameter = 10;
// Rotation speed
var rotation = 0.4;
// Reaction Speed
var speed = 0.3;
////////////////////// Do not edit anything else //////////////////////
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>
4. Save the template and enjoy annoying your readers. ![🙂]()
Customization:
1. The text in BLUE can be replaced with your welcome message.
2. The text in RED are optional and can be customized accordingly as in the comment section of the code.
3. Please do not remove the attribution from the code. This is for legal use.
Hope you enjoyed learning a new gadget today of Text following cursor in Blogger. Ciao with a new stuff again. Stay tuned.