Tuesday, 9 April 2013

How to Change your Cursor Image




*NOTE*
Whenever editing your fundamental html code, always backup beforehand so if anything goes wrong (not that it will), you can revert to the previous version. 
Visit my quick  How-To Backup post here.
*NOTE*

There are a few ways I am going to run through in regards to changing your cursor's appearance on your Blogger Blog.

The first, visit a site called Cursors4U. This site has thousands of cursors available for your use, from cartoon characters to flashing/glowing cursors of infinite colours! They are all free of charge. Below the cursor you click on, there is even a how to install on your Blogger Blog (methods for Old and New Interface). 

The second, and the method I used to design my own cursor (Brown with transparent center)  is make it right here at Design Tips! Visit my post HERE to design your cursor. You can artistically create your cursor, change colours and apply transparency, view it in action and download it when you are happy with how it looks! You can also upload your own pics and change them into cursors by clicking "file". It is a great gadget from CursorWiz. I created and installed a cursor for Carmen Jenner (Author) from a swallow image she had, check it out here.

Once your cursor is created, you click the "save" button and download it to your pc. Now, what you need is the cursor's URL. So you have to upload it to a Photo Sharing site. Keep in mind the site must support .cur (cursor) files. One I discovered is Fileden. You create a free account and have a minimal upload amount free of charge. Once your cursor is up on  Fileden ,  right click on it and "copy image url".

Then just insert the Image URL into the following code where the text is red.


<style type="text/css">body, a:hover {cursor: url(YOUR CURSOR URL HERE), progress;}</style>


Now, head on over to your Blogger Template and make a Backup Copy of your blog's HTML code, visit my quick How To post on this subject here. Now click on HTML while still in Template. Click proceed. Now press Ctrl "F" which brings up your search field. search for the following:

Now just scroll down to the very final peice of code, </html>. Paste your code from above, directly before this </html>.

The third is a special code I tracked down and tweaked a little for a website which no longer uses it... but trust me it is awesome! Apparently it is hard to come by, so here it is for you all, Glitter/Snow/Dust falls from your cursor as it moves around your page!

I have marked in RED where you can change the colour of the Glitter/Snow/Dust by using Hex Codes. You can either get the relevant Hex code from the Template, Advanced section of your blog, within the colours you have used in your design (so that it matches). OR, you go HERE for a list of colour codes.

Here is the long winded and scary looking code (it's not). Below the code is what to do with it...



<script type='text/javascript'> 
// <![CDATA[ 
var colour="#ff0066"; 
var sparkles=40; 
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>


Now, head on over to your Blogger Template and make a Backup Copy of your blog's HTML code, visit my quick How To post on this subject here. Now click on HTML while still in Template. Click proceed. Now press Ctrl "F" which brings up your search field. search for the following:

</b:template-skin>

Paste your code from above with the colour edited to suit, directly after the </b:template-skin> .

You will be unable to see the cursor in "preview", and as you have a Back-up copy of your blog, you can click "save". Now view your blog and you have the most AMAZING cursor ever!

That's it folks, have fun in cursor land, and as always, any questions, let me know.

No comments :

Post a Comment

Facebook Twitter Google + RSS Feed Email Me