Hide or Limit Tags?

Sparkling
1

Hi, I want to hide, or rather, limit the amount of tags visible on posts. I don’t want any tags to be hidden from search engines, just from visitors. I already read some posts here and found that this is the code to hide tags and so far it works:

.tagcloud {
display: none !important;
}

But I wanted to know if there was just a way to limit the amount of tags that are visible to the visitor on each post - without hiding any of the tags from search engines. Thanks in advance for any help!

2

Hi @multimastery,

I hope you are well today and thank you for your question.

You can achieve this by using the following CSS code.

/* Hide all tags */
.post-inner-content .tagcloud a{
display: none !important;
}
/* Add the tag selectors here that you want to display */
.post-inner-content .tagcloud a:nth-child(1),
.post-inner-content .tagcloud a:nth-child(2),
.post-inner-content .tagcloud a:nth-child(3),
.post-inner-content .tagcloud a:nth-child(4){
display: inline-block !important;
}

Just add the tag selectors in the above code that you want to display.

Best Regards,
Movin

3

Hi Movin,

Thanks for responding. I am not sure what you mean by “Just add the tag selectors in the above code that you want to display”. Please explain, thanks.

4

Hi @multimastery,

The following code causes to hide all post tags

/* Hide all tags */
.post-inner-content .tagcloud a{
display: none !important;
}

Now you have control to display specific tag from those hidden post tags, for that you have to use the CSS code as following

.post-inner-content .tagcloud a:nth-child(1){
display: inline-block !important;
}

The above code will display the first post tag. Now if you want to display first and second tag then you can just use the following code

.post-inner-content .tagcloud a:nth-child(1),
.post-inner-content .tagcloud a:nth-child(2){
display: inline-block !important;
}

You will notice in the above code that we are just copying the selector line .post-inner-content .tagcloud a:nth-child(1) and changing the number 1 in to to the tasg number that we want to display which is in this case 2

If you want to display first and third tags only then you can just use the following code

.post-inner-content .tagcloud a:nth-child(1),
.post-inner-content .tagcloud a:nth-child(3){
display: inline-block !important;
}

I hope it makes this thing clear.

You will find more information about this CSS selectors on the following page.

http://www.w3schools.com/cssref/sel_nth-child.asp

Regards,
Movin

5

Hello

I tired this code on my website hd motion movies and this code is not working.

6

@manizunis This is old topic and old code so this may not work on your site. To help us keep support thread separates could you please create new thread for each of your other questions here https://colorlibsupport.com/c/sparkling/ instead of asking them in your single thread as it makes the thread messy and hard to read.

If you want to you can also add reference of this thread in your newly created thread.

We would be more than happy to help you on your new thread.

7

Sure…Thanks…@movin

8

You are most welcome :slight_smile:

9

Hello, admin, this is your Hide or Limit Tags code Using my website HD movie World and this is your code is not working? and help me, please?

10

Hello there,

The website you have shared does not have our theme active, please activate the Sparkling theme to have the code work correctly.

Best Regards,
Support