Make Unclickable Hyperlink Without Seeing Finger Cursor Icon

This post is about how to make the unclickable hyperlink without seeing the finger cursor icon when you hover your computer mouse over it. 

In one of my earlier tutorial, I showed you how to make the hyperlink not clickable.by adding an empty space (highlighted in yellow) between the two slashes and the domain name.

Example: http:// domain-name.com

But it still shows this finger cursor symbol when you hover your mouse cursor over the hyperlink.

I have found another better and easier way on how to do the same function (not clickable hyperlink), but this time without showing the finger cursor icon when the mouse cursor hovers over it.

Make Unclickable Hyperlink With Seeing Finger Cursor Icon

There are two main steps which you need to do.

STEP ONE: Add CSS Code

1. Log into Blogger Dashboard.

2. Click Theme.

3. Click Customize button.

4. Next click on "Advanced".

5. Pull down the vertical slider and click on "Add CSS". A box will appear next to it.

6. Now paste this CSS code below in the empty box provided.

 .inactiveLink {
   pointer-events: none;
   cursor: default;
}

7. Click "Apply to Blog".


STEP TWO: Make Hyperlink Not Clickable

1.  First, you need to make sure the URL is set as a link, by clicking on the "Link" above the text editor.

2. Click "Update" button.

3. Go back to post and click "Edit".

4. Look for the URL in the HTML code.

5. Below is just an example of a URL in the HTML code.

<a href="http://xxx.com">XXX<a/>

6.  You need to change it to something like this:

<a style="pointer-events: none; cursor: default;" href="http://xxx.com.html">XXX</a>

7. The part  which you need to add is highlighted in yellow.

8. Click  the orange color Publish button.

Note: In your future blog posts, if you want to make any hyperlink not clickable, you just do the STEP TWO.