How to use custom cursor in blogger | change your cursor

make your own blog design change cursor

Hello friends we use custom font, size and background color or many think in our blog for make it stylish and attractive many our friends ask to me how to use custom cursor in blogger or how to change mouse pointer in blogger for make our blog attractive and stylish so today we talk about changing mouse cursor in blogger.

What is the custom mouse cursor?

Ans. When we visit default Blog and we see white arrow that is default mouse cursor and we change this default mouse cursor with our picture or any special picture or arrow that is custom mouse arrow.

How to Change Default Cursor with special cursor?

Ø  Login to your blogger Account

Ø  Select your Blog.

Ø  Click Template (See Demo Image) 

Ø  After this Click to Edit HTML option. (See below demo image).

Ø  Now Find “]]></b:skin>”Code By pressing Ctrl+F.

Ø  Now exactly before it, add the below any Cursor Design Code which you like.(See Demo Image)

Ø  Now Click Save Template Button.

Below Many Cursor Design is Given Which you like Copy Code and past It Before]]></b:skin>.

Cursor Type 1

Cursor Demo Is  Below Given

Bring your Mouse Cursor Here For Demo

For Cursor Type 1 Copy Below CSS Code and past Before ]]></b:skin>

body, a, a:hover {cursor: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTA15ZxZlEk8vsrRKyVIuEsR-UAYUFOVaVDgCEmuA7_vqk1zIepWaajX30I6Zv6hjVtbEl7E_WOQcR2StWH_fH7E1QNWwV_Xx-JnQtqbMQs9KXgdS9u-cJdPm5gws4kDSMZsalDr6RAfw/s50/cursor%2520%25281%2529.png),progress;}

Cursor Type 2

Cursor Demo Is  Below Given

Bring your Mouse Cursor Here For Demo

For Cursor Type 2 Copy Below CSS Code and past Before ]]></b:skin>

body, a, a:hover {cursor: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9NhK3z18kwN_Tv3Mj03WTYiycCcxaTcR3JtNrSgs9zfa7CzYUQxYa5YBbli13hjHG5Z69viKH87tuTndSYuML9wfV8zxy-BnBo_nqd9QQ5JleIbLV7w4aRH2HyPH5MW5d-Tc7cJ8DID0/s32/cursor%2520%25282%2529.png),progress;}

Cursor Type 3

                                                                     

Cursor Demo Is  Below Given

Bring your Mouse Cursor Here For Demo

For Cursar Type 3 Copy Below CSS Code and past Before ]]></b:skin>

body, a, a:hover {cursor: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-hmo_a2SvvLYQDuni1W1Bwy0C6CmaOEKu7oC2GNiDp-cO9G3wwSQgY58e6fFGt4DR4DvemWwTm7pFwqT7s5CJFEfKz34mgxG5-VZis-SBKdIaA7eU1BASg1ImYhxuDKJfUrFVFdjh_gw/s50/cursor.png),progress;}

Cursor Type 4

Cursor Demo Is  Below Given

Bring your Mouse Cursor Here For Demo

For Cursar Type 4 Copy Below CSS Code and past Before ]]></b:skin>

body, a, a:hover {cursor: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHsERI8kaZ8ooJLsUb5yB5Sm7K3ynjytbbX0W8Yv5DCatzQMiBMtb5PicGqYVFOahW2_IQBlXxSxIMzmqumfRuF-UtnHxFJPEp884RHSGYPlnI5qmO3vzSkZI-H4GDujv-Bh-gbRTTBHg/s45/custom%2520cursor.png),progress;}

Cursor Type 5

Cursor Demo Is  Below Given

Bring your Mouse Cursor Here For Demo

For Cursar Type 5 Copy Below CSS Code and past Before ]]></b:skin>

body, a, a:hover {cursor: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9hxK8_kVtSeDON8_cHovXZGIFJ1522c9FWYBQv0f3kYgTZbg0ZtAEfsUjyuOsq_Il91SQskEKCohXXaEIxmmwwF84mrhj15ExFd2ZR64nnTNOMRQzLmaxuMPpPCGh2PmJMDvcA9Qd7_o/s49/cursor%2520%25283%2529.png),progress;}

Cursor Type 6

Cursor Demo Is  Below Given

Bring your Mouse Cursor Here For Demo

For Cursar Type 6 Copy Below CSS Code and past Before ]]></b:skin>

body, a, a:hover {cursor: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicwjHeIvC4f7iFCYzMPUzZcvSSWcjEy6XHD6ADikQ-hIUbRK8GdAwOVlue7b8vt1o-4ft-r4sAARVdGQmt6HoZriCI4i7hPcrn7PdmMQZEP7kipmoHBPZm098dasZhAW7TmCnOAvz_0Ww/s44/custom%2520cursor%25201.png),progress;}

Cursor Type 7

Cursor Demo Is  Below Given

Come Here for Custom Cursor Demo

For Cursar Type 7 Copy Below CSS Code and past Before ]]></b:skin>

body, a, a:hover {cursor: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6FyNHXOkXhKduDSJ-wv-1ehuAnzwqXs8BSZDvqnt_X8rxNcJ3tAQBBCjxpBAK2xaamiM1_OLj95kFcQA57qZb0tHddHKI2ntogTUsvjNMTXYXH7JMjoFYn4hVQ3LJEYaNQTT66kYazuM/s30/Custom%2520cursor%25202.png),progress;}

Make Your Favorite Picture Your cursor

body, a, a:hover {cursor: url(Cursor-Url),progress;}

Replace Cursor-Url with Your Favorite Picture, Icon Url and Past above code before  ]]></b:skin>

Save Your Template You have don it Now your blog is ready with custom cursor.