How to Hide Object From Visitors But Maintain Functionality

Free online services usually comes with an attachment. Usually you are required to place their banners, buttons, etc on your website; stats counter can be quite a good example here. Here’s a trick, rather evil, where you can continue to use them, but made their banner or buttons invisible to your visitors while service providers will still think you are linking back to them.

Throw object off screen with CSS

There is a control in CSS call the text-indent. When text-indent is used on particular object with negetive values it will throw it off screen make it invisible unless CSS is disabled. You’ll need a little bit CSS knowledge here to make it works. Here’s how you do it:

Look for the object you intended to hide (image, button, text, etc), identify their class name.
Insert the following CSS
```
text-indent:-999px;
z-index:-1;
```
Done, object maintains on website but is thrown off screen making it invisible to your visitors.

Unethical and Evil

Many may find doing this is unethical and evil, especially if you are using a service you should give credit back to the provider. Well, I’ll not go against it and I’m not encouraging you to use it. As the matter of fact, the reason why I’m revealing such method is because I’ve seen webmasters using them. Just in case you wonder why some objects/content shows up in source code but not on the website, now you know why. Anyway, I’m using this to hide a stats counter. Let me know you can find out which it is :-)

Comments

KennyP June 11th, 2007

I think it is Spotplex :D
Reply
Zhongg June 12th, 2007

here are 3 more i can think of:

1) most popular way
display: none;

2) alternative
position: absolute;
left: -4000px

3) works sometimes
height: 0;
font-size: 0;
Reply
hongkiat June 13th, 2007

Kenny: You’re right :-)

Zhongg: “display:none” will totally hide the element, not appearing in source codes or giving link backs. I usually use “display:none” during debugging and fixing my CSS. No point we declare css but make it display:none right :-)
Reply
BlogsAndBucks June 13th, 2007

Nice tips. I am not a CSS guru but i think this might go against some of those “free service” TOS to modify their code. :)
Reply
ElectroMundo June 17th, 2007

We want to hide Motigo Webstats Counter shown at the bottom of our website, but none of the above solutions are working for this particular counter.

Does anybody knows how to do it?
Reply
Dwight Stegall January 15th, 2008

For banners at the bottom of the page do this
Reply
Redhat82 March 28th, 2008

I’ve got the same problem that ElectroMundo. I want to hide motigo webstats counter in my blog. is it possible? thanks
Reply
balta May 14th, 2008

yes, it is possible, but only will work with explorer, the only thing that you have to do is create a flash animation of 22×22 px to cover the motigo logo, give the property of floating flash over the html and put rigth over the logo. I did it, and works quite well, I guess that other way is putting the montigo code in one page as a entrance door, and then open automaticly the proper page without the code, but I found easier the first one.
Reply
neonley August 20th, 2008

haha! does your stat counter have a z-idex of “10000″?
i saw this code on your this page: :D

style=”overflow: auto; position: absolute; z-index: 10000; top: 0px; left: 0px; display: none;

is it where your stat counter located?
Reply