Change Cursor on Web pages

Another tutorial here...

For those wondering if you can customize cursors in your website or blogs, you can absolutely do that!

I have configured my page to use these customize cursors:
 My regular navigating cursor to match my bunny icons. :a51:


Ex 1: From site's tutorial: (Put inside <HEAD>....</HEAD> tag)
<style type="text/css">
body{cursor:url(http://media.tumblr.com/tumblr_ma87zmgW9u1qid2nw.gif), url(http://media.tumblr.com/tumblr_ma87zmgW9u1qid2nw.gif), auto;}
</style>
Ex 2: My blog codes: (so it covers hover on links - I put it inside <BODY>...</BODY> tag)
<style type='text/css'>
body, a, a:hover {cursor: url(http://media.tumblr.com/tumblr_ma87zmgW9u1qid2nw.gif), progress;}
</style> 
 Cursor for navigating on images.

My blog codes: (I put it inside <BODY>...</BODY>  tag). 
I've read from forums and sites that this can be added in body tag only. Not really sure but I added mine in BODY tag.
<style type='text/css'>
img {cursor: url(http://cur.cursors-4u.net/anime/ani-11/ani1073.cur), progress;}
</style>  
 Cursor for navigating on page links.

My blog codes: (I put it inside <HEAD>....</HEAD> tag)
#nav li a:hover 
{ cursor: url(http://cur.cursors-4u.net/anime/ani-11/ani1070.cur), progress; } 
Your options:
A. You can put it inside head tag.
B. You can put it inside body tag.
C. You can put it in CSS stylesheet.

Credits:
Bunny cursor: http://kawaiilayouts001.tumblr.com/
Usagi cursors: http://www.cursors-4u.com/

Change Blogger Favicon

I noticed that my favicon (which I've been using for such a long time) is displayed wrongly. It is not transparent anymore.. :a22: or was it like that since then?

Not sure why but it looks like this:


I manually fixed it via html since the blogger widget isn't working for me.


<link href='data:image/x-icon;base64,AAABAAEAEBAQAAAAAAAoAQAAFgAAACgAAAAQAAAAIAAAAAEABAAAAAAAgAAAAAAAAAAAAAAAEAAAAAAAAADP3PwAAAAAAPL29wBjYFwA/9ehALDG/wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEREzMzMxEVEREyIiIiMQBREyIiMiIjEBEyMyIiIzIxETJDIiIkMjERMiIiIiIiMREyIiIiIiIxARMiIiIiIxEREyIiIiIjEQERMyIiIzEREQETIxMjERAVABMjEyMRERFREyMTIxFRERETIxMjEAURARMjEyMRARERATERMRERHwHQAA4AgAAMAFAACAAwAAgApageMAAIADAACAAgAAwAcAAMAGAADgDwAAsR0AABEfAACxGwAA8REAALEbAADrvwAA' rel='icon' type='image/x-icon'/>
I updated it to:
<link href='http://i205.photobucket.com/albums/bb186/mhilkas/favoicons/08.gif' rel='icon' type='image/x-icon'/>
Bunch of kawaii icons there :eyes:

And it looks better now :a4:



Tips
You can manually change it via html.

Step 1: Go to your blogger home page.
Step 2: Select Template.
Step 3: Click Edit HTML.
Step 4: Search for something like rel='icon' or rel=’shortcut icon’ then supply your favicon image url. Use any of the two codes below:

  • <link href='url here' rel='icon' type='image/x-icon'/>
  • <link href=’url here’ rel=’shortcut icon’/>

Or see more instructions here:
http://newblogertricks.blogspot.com/2013/04/Change-Blogger-Blog-Favicon.html