Шлейфы курсора мышки на Blogger

Иногда перед праздником или под настроение хочется поставить на блог что-нибудь блестящее, яркое.
Предлагаю несколько интересных идей, которые не сильно повредят блогу в плане дизайна, но немного добавят ему цвета и изюминки.

Радужные ссылки

При наведении мышкой на ссылку, она будет менять цвета.

Первый способ

Для тех, кто не любит совать нос в шаблон блога. Выручит HTML/JavaScript - гаджет. Вставляем в него код радуги:

<script src='//ledikovaleva.narod.ru/file/rainbow.js'/>

Второй способ

Заходим в шаблон Тема/Изменить HTML. В шаблоне ищем строку код </head> с помощью сочетания клавиш Ctrl+F и перед ним устанавливаем скрипт тот же, что и в первом способе.
Третий способ

Вставляем код, предложенный ниже, в шаблон блога, перед тегом </head>:

<script type='text/javascript'>
//<![CDATA[
function makeColor(){if(elmS==0){elmR=elmV;elmG=elmV;elmB=elmV}else{t1=elmV;t2=(255-elmS)*elmV/255;t3=elmH%60;t3=(t1-t2)*t3/60;if(elmH<60){elmR=t1;elmB=t2;elmG=t2+t3}else if(elmH<120){elmG=t1;elmB=t2;elmR=t1-t3}else if(elmH<180){elmG=t1;elmR=t2;elmB=t2+t3}else if(elmH<240){elmB=t1;elmR=t2;elmG=t1-t3}else if(elmH<300){elmB=t1;elmG=t2;elmR=t2+t3}else if(elmH<360){elmR=t1;elmG=t2;elmB=t1-t3}else{elmR=0;elmG=0;elmB=0}}elmR=Math.floor(elmR).toString(16);elmG=Math.floor(elmG).toString(16);elmB=Math.floor(elmB).toString(16);if(elmR.length==1)elmR="0"+elmR;if(elmG.length==1)elmG="0"+elmG;if(elmB.length==1)elmB="0"+elmB;elmH=elmH+rate;if(elmH>=360)elmH=0;return"#"+elmR+elmG+elmB}function ChangeColor(){objActive.style.color=makeColor()}function Mozilla_stopRainbowAnchor(a){if(act){if(objActive.nodeName=="A"){objActive.style.color=clrOrg;clearInterval(TimerID);act=0}}}function Mozilla_doRainbowAnchor(a){if(act==0){obj=a.target;while(obj.nodeName!="A"&&obj.nodeName!="BODY"){obj=obj.parentNode;if(obj.nodeName=="A"||obj.nodeName=="BODY")break}if(obj.nodeName=="A"&&obj.href!=""){objActive=obj;act=1;clrOrg=obj.style.color;TimerID=setInterval("ChangeColor()",100)}}}function stopRainbowAnchor(){if(act){if(objActive.tagName=="A"){objActive.style.color=clrOrg;clearInterval(TimerID);act=0}}}function doRainbowAnchor(){if(act==0){var a=event.srcElement;while(a.tagName!="A"&&a.tagName!="BODY"){a=a.parentElement;if(a.tagName=="A"||a.tagName=="BODY")break}if(a.tagName=="A"&&a.href!=""){objActive=a;act=1;clrOrg=objActive.style.color;TimerID=setInterval("ChangeColor()",100)}}}function stopRainbow(){if(act){objActive.style.color=clrOrg;clearInterval(TimerID);act=0}}function doRainbow(a){if(act==0){act=1;if(a)objActive=a;else objActive=event.srcElement;clrOrg=objActive.style.color;TimerID=setInterval("ChangeColor()",100)}}var rate=20;if(document.getElementById)window.onerror=new Function("return true");var objActive;var act=0;var elmH=0;var elmS=128;var elmV=255;var clrOrg;var TimerID;if(document.all){document.onmouseover=doRainbowAnchor;document.onmouseout=stopRainbowAnchor}else if(document.getElementById){document.captureEvents(Event.MOUSEOVER|Event.MOUSEOUT);document.onmouseover=Mozilla_doRainbowAnchor;document.onmouseout=Mozilla_stopRainbowAnchor}
//]]>
</script>

Как поменять курсор мышки на сайте

Вариант 1
Заходим в Панель инструментов/Тема/Изменить HTML. Ищем строчку ]]></b:skin>
И перед ним добавляем:

body, a, a:hover {cursor: url(ссылка на картинку курсора), progress;}

Сохраняем шаблон.

Картинка для курсора нужна небольшая.

Вариант 2
Заходим в Панель инструментов/Тема/Изменить HTML. Ищем строчку </head> и над ней вставляем код курсора.

<style type="text/css">body, a, a:hover {cursor: url(ваша ссылка тут), progress;}</style>

Картинка так же должна быть маленькой.

Ресурсы с украшениями

1. На сайте www.cursors-4u.com можно найти огромное количество курсоров и шлейфов к ним с кодами, есть и для Blogger:

2. Сайт http://www.blog-switch.com/ предлагает установить на свой блог или сайт падающие предметы — цветы, бабочки и многое другое, причём с выключателем. Надоело посетителю блога это мелькающие яркое "безобразие" и вуаля - отключает.

Нажимаем на серую кнопку, переходим в режим просмотра, там же находится код. Коды добавляются на блог через: Дизайн-Добавить гаджет-HTML/JavaScript.
3. Сайт, тоже японский http://www.cursor-switch.com только здесь можно подыскать шлейфы курсора.

Нажимаем жёлтую кнопку и видим код.

Хвостики курсора мыши

Все коды вставляются через Дизайн-Добавить гаджет-HTML/JavaScript - вставляем, сохраняем.

Звёздная пыль

<script type='text/javascript'> // <![CDATA[ var colour="#13baf1"; var sparkles=50; /**************************** * Tinkerbell Magic Sparkle * * (c) 2005 mf2fm web-design * * http://www.mf2fm.com/rv * * DON'T EDIT BELOW THIS BOX * ****************************/ var x=ox=400; var y=oy=300; var swide=800; var shigh=600; var sleft=sdown=0; var tiny=new Array(); var star=new Array(); var starv=new Array(); var starx=new Array(); var stary=new Array(); var tinyx=new Array(); var tinyy=new Array(); var tinyv=new Array(); window.onload=function() { if (document.getElementById) { var i, rats, rlef, rdow; for (var i=0; i<sparkles; i++) { var rats=createDiv(3, 3); rats.style.visibility="hidden"; document.body.appendChild(tiny[i]=rats); starv[i]=0; tinyv[i]=0; var rats=createDiv(5, 5); rats.style.backgroundColor="transparent"; rats.style.visibility="hidden"; var rlef=createDiv(1, 5); var rdow=createDiv(5, 1); rats.appendChild(rlef); rats.appendChild(rdow); rlef.style.top="2px"; rlef.style.left="0px"; rdow.style.top="0px"; rdow.style.left="2px"; document.body.appendChild(star[i]=rats); } set_width(); sparkle(); }} function sparkle() { var c; if (x!=ox || y!=oy) { ox=x; oy=y; for (c=0; c<sparkles; c++) if (!starv[c]) { star[c].style.left=(starx[c]=x)+"px"; star[c].style.top=(stary[c]=y)+"px"; star[c].style.clip="rect(0px, 5px, 5px, 0px)"; star[c].style.visibility="visible"; starv[c]=50; break; } } for (c=0; c<sparkles; c++) { if (starv[c]) update_star(c); if (tinyv[c]) update_tiny(c); } setTimeout("sparkle()", 40); } function update_star(i) { if (--starv[i]==25) star[i].style.clip="rect(1px, 4px, 4px, 1px)"; if (starv[i]) { stary[i]+=1+Math.random()*3; if (stary[i]<shigh+sdown) { star[i].style.top=stary[i]+"px"; starx[i]+=(i%5-2)/5; star[i].style.left=starx[i]+"px"; } else { star[i].style.visibility="hidden"; starv[i]=0; return; } } else { tinyv[i]=50; tiny[i].style.top=(tinyy[i]=stary[i])+"px"; tiny[i].style.left=(tinyx[i]=starx[i])+"px"; tiny[i].style.width="2px"; tiny[i].style.height="2px"; star[i].style.visibility="hidden"; tiny[i].style.visibility="visible" } } function update_tiny(i) { if (--tinyv[i]==25) { tiny[i].style.width="1px"; tiny[i].style.height="1px"; } if (tinyv[i]) { tinyy[i]+=1+Math.random()*3; if (tinyy[i]<shigh+sdown) { tiny[i].style.top=tinyy[i]+"px"; tinyx[i]+=(i%5-2)/5; tiny[i].style.left=tinyx[i]+"px"; } else { tiny[i].style.visibility="hidden"; tinyv[i]=0; return; } } else tiny[i].style.visibility="hidden"; } document.onmousemove=mouse; function mouse(e) { set_scroll(); y=(e)?e.pageY:event.y+sdown; x=(e)?e.pageX:event.x+sleft; } function set_scroll() { if (typeof(self.pageYOffset)=="number") { sdown=self.pageYOffset; sleft=self.pageXOffset; } else if (document.body.scrollTop || document.body.scrollLeft) { sdown=document.body.scrollTop; sleft=document.body.scrollLeft; } else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) { sleft=document.documentElement.scrollLeft; sdown=document.documentElement.scrollTop; } else { sdown=0; sleft=0; } } window.onresize=set_width; function set_width() { if (typeof(self.innerWidth)=="number") { swide=self.innerWidth; shigh=self.innerHeight; } else if (document.documentElement && document.documentElement.clientWidth) { swide=document.documentElement.clientWidth; shigh=document.documentElement.clientHeight; } else if (document.body.clientWidth) { swide=document.body.clientWidth; shigh=document.body.clientHeight; } } function createDiv(height, width) { var div=document.createElement("div"); div.style.position="absolute"; div.style.height=height+"px"; div.style.width=width+"px"; div.style.overflow="hidden"; div.style.backgroundColor=colour; return (div); } // ]]> </script>

Красным выделила в коде цвет снега.

Белый снежок

<script type="text/javascript" src="http://uguide.ru/js/script/snowcursor.min.js"></script>

Белый снег со снежинкой-курсором

<script type="text/javascript" src="http://uguide.ru/js/script/snowcursor.min.js"> </script> <style type="text/css"> body, a:hover {cursor: url(http://uguide.ru/js/script/snowcurser.cur), url(http://uguide.ru/js/script/snowcurser.png), auto !important;} </style>

Текст за курсором

<style type="text/css">
/* Circle Text Styles */
#outerCircleText {
font-style: normal;
font-weight: normal;
font-family: 'comic sans';
color: #9B1750;
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><br />
<script type="text/javascript">
;(function(){
var msg = "Доброго дня";
var size = 22;
var circleY = 0.75; var circleX = 2;
var letter_spacing = 5;
var diameter = 10;
var rotation = 0.4;
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>

В коде можно поменять цвет букв – выделила красным цветом.

Оранжевым – шрифт
Синим – текст меняем на свой.