Home
Blogger

How to add custom cursor pointer on Blogger Site?

How to use custom cursor in blogger | change your cursor
cursor

We visit different website and blog regularly. Those who are addicted in browsing they try visit new site every day. And I am sure you have visited some blog that change your cursor pointer after entering into landing page. But if you visit other site then it shows default Windows or Mac cursor. Actually this is a CSS trick where we can add custom cursor in our blogger template.

I have already told blogger is most flexible platform where you can do anything whatever you like. Previously I have written some tutorial about to change Blogger Font, Size, color, style etc and all tutorial is for making blogger template attractive. So why don't you change the cursor pointer to make it more appealing?

In this tutorial I will share with you that how we can add custom cursor in our blogger template. And this widget will work like magic. Whenever anyone enter in your site then automatically cursor pointer will change. The following tutorial might be helpful for you.

Step 1 Sign in to your Blogger account and go to Blogger Dashboard

Step 2 On Blogger Dashboard Click ->Template -> Edit HTML

Step 3 Now find the </b:skin> by pressing Ctrl+F

Step 4 Paste the below code above </b:skin> and hit the Save template button.

body, a, a:hover {cursor: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlsVBIiNP1lfW780Jw6h08ihGbWP0_MfGlD-v_zGKhorY8opQtim-LXWTLDBNk02IHCqJlH-VlaR_pO_mLtPZ0UC_Sk6YYE-mTbKwjzWiov8p08smXK3gcwlSljIVBpVKCi8ZQGKBOkLF_/s1600/BloggerSpice+ANGRY+BIRDS.png),progress;}

More Cursor Pointer

If you wish you can replace the Cursor image URL from above by picking up URL from below. Design 1 has already added in sample code. So try to pick up from Design 2 to Design 8.

 Design 1

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlsVBIiNP1lfW780Jw6h08ihGbWP0_MfGlD-v_zGKhorY8opQtim-LXWTLDBNk02IHCqJlH-VlaR_pO_mLtPZ0UC_Sk6YYE-mTbKwjzWiov8p08smXK3gcwlSljIVBpVKCi8ZQGKBOkLF_/s1600/BloggerSpice+ANGRY+BIRDS.png
angry bird
Design 2
  • https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVODoGIWqtp2rjFiHdEFttdfB1Awdm_vpinBbdyUvJLvTOaqTMMvjECdC_CW3OIIQa06870dGdfIBfcKyEMmhQ3zDRimyZWT57uxP-fbp5R3g0PL9rcgqhXyP3s0OPAdtNX4yRqNuu58eu/s1600/BloggerSpice+BLOGGER.png
blogger cursor
Design 3
  • https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3xJ47gOxUfECi6rBYfgzo6xxzAKSAB-IEMmkNImUCdtlYu9gRkLKFLtK1X9Ot6oK9kq3nuD9c8jvR0zsIdsiZu8rUq4aBcZlz3cUJFUs-FCDrXtWKpdijscNaVrKknlYBvojqr3GqKAp6/s1600/BloggerSpice+COOL+ORANGE+POINTER.gif
orange cursor
Design 4
  • https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_IbeovLLGCYWtrgM24KOTaH82CyO_Gj0DFz_IBigEgAc2Vy4Ih-yvsifP1Rm_rYVKRLxHVjuhF8TDeXc30f9C6nnoOc2ngR6m2z-2YmciBwrxxGRdYgxbWx-9G36TiNvXBR_7cXEZuuE6/s1600/BloggerSpice+COOL+YELLOW+POINTER.gif
lemon cursor
Design 5
  • https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIJVyZ2QL_jhwnKXaiRecWjQDmsuLywvqnEqSmJ8fPV9m6w4AhVL5Ymnd3buitq5QMngj2fP-hq4Sg9vTkyPNv7EtqfK0UC5GaO7DE46uFSUNwT0ZIeULgzEeQYuP68gXB86QimVXswYKw/s1600/BloggerSpice+CUTE+PINK+KAOANI.png
pink cursor
Design 6
  • https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5aD1Z0bQkmkcFOVSLdB_8nYC-iBrpzDvTO3ax1TsG2vQ0AZ2W7m8uBZ5AsZCPZtVI6JsbhadrWrzL4KpLinVOu9tLKd3FHwIBFrLSfh5T610HhhYV87Kkg20x3cRLIMfDijFORyNDYLjL/s1600/BloggerSpice+FRUITY+KIWI+HEART.png
green cursor

Design 7
  • https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2msb-4CiKyINm3c2WzSgfMe0h9WEJpqjL7zUQ4fWr5KvJxDih6lEkJSe0Lq8PBOa47JGYD3nT3jEvTJU6Xik4RexQA67qA72-b7uxb1Wf4BZvauRXVl_KRY6k32hoSyJNZDDJf9lsYCFJ/s1600/BloggerSpice+HEARTLESS.png
heart
Design 8
  • https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgX9NRJmvxM4Ba0mL1UMAyrphe776nc6RViBM_9Az4_QYLe1xxlMmkPjZaXYGD8y2O8tN5CBZZfhYNLqxIu2bsECPdcbBzLTw44KSGImCci-IjfA0j6-6xJ8MHYnvmFvDHPv6L39NavAlWN/s1600/BloggerSpice+SUPERMAN+LOGO+POINTER.png
superman
Hope you have successfully added custom cursor pointer. And now check your Blog site and see your new cursor pointer. You can also collect cursor image from net and replace the Image URL to use that. Anyway if you have any query regarding this then feel free to leave a comment below. Thanks.

2 comments

  1. hey there and thank you for your info – I've certainly picked up something new frlm right here.
    I did however expertise several technical points using this site, since I experienced to reload the
    site many times previous to I could get it to load properly.

    I hadd been wondering if your web host is OK?
    Not that I am complaining, but sluggish loading instances times will often affect your placement in google and coukd damage your high quality score if
    ads and marketing with Adwords. Well I am adding thi RSS to my e-mail
    and can lpok out for much more of your respective
    exciting content. Ensure that you update thijs again very soon.
    • Thanks for your feedback. :up
Go Up