Thursday, April 9, 2015

How to display an Easter egg cursor in Blogspot

Ever wondered how to add a nice Easter themed cursor (or any other type of cursor) to your Blogspot blog? Actually, is quite easy, especially, if you have some basic notions of HTML. I've been playing on my blog lately, testing cursors and graphics, and now I can write a short tutorial about how to add an Easter egg cursor to Blogspot.

Traditionally, in Romania, on Wednesday and Tuesday during the Holy Week of the Orthodox Easter, people use to dye and decorate Easter eggs. World evolves, traditions change and adapt, so, like everyone else, I "echoed" the "offline" tradition into the online medium. Sort to speak, I deciced to decorate my blog.

Easter egg cursor for Blogspot
Easter egg cursor
So, here I am, after long deliberations, I choose a nice pink Easter egg model as shown in the picture at left. If you want your cursor to look the same, here is what you should do.

First of all I have to recommend Cursors4U.com, a website containing lots of free cursors, ready to be used on your site or blog. Go to the Easter Cursors section on Cursors-4U.com, and choose the desired cursor. Like I said, I go with the pink Easter egg cursor, which can be found at this link. See the image below.

pink Easter cursor for Blogspot
Choosing the desired Easter cursor

Then, we can see the cursor page and also we can see the chosen cursor "at work" - your cursor takes its shape, so that you can test it before you actually use it on your own blog.

Once landed on the page, click on the "Blogger/Blogspot" tab, like shown in the image bellow.

Blogger Blogspot tab in cursors4u
Click on the "Blogger/Blogspot" tab

And then, go to "New Blogger/Blogspot Interface" and copy the codes.

codes Easter cursor Blogspot
Copy the codes of the Easter cursor

Then, log into your Blogspot account, go to your blogs and choose the blog you want to show the new cursor. Bellow is a screenshot from my own account.




Then, go to the left side of the screen, look for "Template" and click on it.

  Then go to "Edit HTML" and click on it.

Note: Before you do this, you'd better backup your template, just in case.


Edit HTML Blogspot
Click on Edit HTML
Now slide down until the bottom, and look for the last line of codes, just where is written  </html>. Positionate the cursor just before the  <  symbol.

Insert code before </html> code
Put cursor before </html> 

And then paste the code that will allow the cursor to be shown. After that, click "Save".

Paste the code and save
Now you're done. Type in browser your blog address to see the results.  You should see on your Blogspot blog a nice Easter egg cursor like mine. Well, congratulations! You've just "dyed" your cursor!

Update on 18 April 2015

After getting some feedback from my friends, I have found out that some people can't see the cursor. I must admit that I am a bit surprised by this because it didn't happen in my case. Anyway, I've tried to figure out the possible issue and a way to fix it.

Although, in theory, if you follow the above mentioned steps, you should see your nice cursor "hovering" your blog, it seems that in some cases, this doesn't always happen. In that case, it would be a good idea to update your browser or browsers. And, in case that you are a blog owner and you can't see your new cursor, then you should verify the codes, maybe you've made a mistake.

Anyway, although I don't intend to keep this cursor forever, I wont to assure you that in my case, it does work. I've checked it using all the browsers that are installed on my OS.

Here is the configuration:
Zorin OS v.6 Core (Ubuntu 12.04 LTS)
Midori v.0.4.3
Firefox v.37.0.1
Google Chrome Version 42.0.2311.90 (64-bit)
Chromium Version 37.0.2062.120 Ubuntu 12.04 (281580) (64-bit)

How to undo all this 

- How to manage an "I want my cursor back!" kind of situation -

Once the Easter period gone, you'll wont to change your cursor back to default. Well, in order to do that, log into your Blogspot account, go to your blog template, click on "Edi HTML" button, and look for your cursor code (you should see something containing "cursors4u" blah blah in it. 

I've selected it (grey highlight) in the screenshot below. Click to enlarge.

selecting the cursor code to erase

 After selecting it, like in the image above, delete it, and then save the HTML. Now the cursor should be back to normal.

- Last update: 21 April 2015 -

4 comments:

  1. Kindle Paperwhite's Smart Lookup feature integrates a full dictionary with X-Ray and Wikipedia so you can access definitions, characters, settings, and more without leaving your page or losing your place. Design your own perfect reading experience by increasing the text size to suit you. Choose from eight text sizes to prevent tired eyes and keep you reading longer.

    ReplyDelete
  2. Good tips. thank you very much.

    ReplyDelete

Hello!
You are welcome to share your thoughts.
Please, keep in mind that a polite tone is best for real communication.