Blog directories are a good way to earn traffic but nonetheless you’re obliged to put their image buttons or banner which track your blog and get you ranked. After signing with several ones and putting their buttons, your sidebar soon looks cramped full of them : a real pain in the eyes! I’ll here show you a quick trick to hide all those buttons while your blog is always crawled and ranked.
The principle behind is pretty simple. I’ll just use simple css to hide those buttons and have you all that precious space. Yes you also recover the precious space those buttons have been taking all this time. This works on most browsers including Firefox, Internet Explorer and Opera so those using them won’t see any of your loads of image buttons you’ve put in that sidebar of yours to obtain some traffic juice from the blog directories.
I’ll enclose all the image buttons with their corresponding links inside a div class selector and style that div to make it invisible. Open your sidebar.php if you’re on Wordpress or the appropriate file where you’re putting those image buttons and surround them around a div element, <div class="hide" style="display:none"> like the example below :
<div class="hide" style="display:none">
<a href="http://www.blogflare.com/personal/" title="BlogoSquare's top ranked on BlogFare"><img src="http://www.blogflare.com/track/flare_300.gif" border="0" alt="Personal Blogs - Blog Flare" title="Personal Blogs - Blog Flare" /></a>
<a href="http://blogcloud.bleebot.com/?parID=111922" title="grow my BlogoSquare's cloud"><img src="http://blogcloud.bleebot.com/gfx/miniblc.gif" alt="blogCloud" width="80" height="15" border="0" /></a>
<a href="http://feedshark.brainbliss.com" title="Feed Shark is tracking my feed">Feed Shark</a>
remaining image buttons....
</div>
Next open your style.css or stylesheet according to your blogging platform, copy and paste the following css into it and save accordingly.
.hide img{
-moz-opacity:0;
filter:alpha(opacity=0);
opacity:0;
}
That’s it, now anything inside the hide div will be invisible : you won’t even see white spacing there since the surrounding elements fit accordingly. I wouldn’t recommend you for this to hide all image buttons since some are required, use your own judgement for that 
If you need any clarification, just drop a comment and I’ll be glad to help you. If you enjoyed this quick post, feel free to share it to others who might be needing this.
hehehehe
tricheur Hans, i’ve got the idea first
@ nym:
you could say inspired lol….. infact unlike your method of collapsing the button’s area, mine completely make them invisible, which was the effect I wanted. They were occupying too much space lol… and I was greatly in need of fresh space in my sidebar….btw do you find anything more that could be removed from my sidebar lol?
enfin .. couldn’t understand the opacity thing ..
enfin .. forget it ..
my solution :
create a new layer [div] .. and place all the buttons in it .. :s
then simply turn the visibility to hidden !
e.g
.hidden_content {
visibility: hidden;
}
then ..
....
.... button links / images go here ...
....
simppppppppppleeeeeeeeeeeeeeeeee !
bla bla bla .. the comment was posted only partially .. :S
enfin .. :
....
.... content/ images/ buttons go here ....
....
.....
enfin ..
bla bla bla .. the comment was posted only partially .. :S
enfin .. :
....
.... content/ images/ buttons go here ....
....
…
enfin .. ///
pfffffffff ..
its not displaying the codes ..
pfff ..
as vous de deviner comment ca marche
!!!!!!!!!
enfin .. :s
@ anoop if tis html you might want to use > and <
oops, i meand *& lt;* (Without the asterisk and space, or *& gt;*
like in >meta<
enfin >meta< lol
damn, forget it, i cant seem to get it right lol
<meta>
@ anoop and leo:
first let me dissect the code for you:
if you used only a div with display: none, it would work on Firefox but not on IE. so each code, the opacity,filter,etc are to make them invisible in any browser you see not only mozilla firefox
so you see each line has its own importance including the display:none in the surrounding div. that display none make sure you don’t see a highlight effect on those anchor link, if you remove them…the images and links will be invisible but you would have a highlight effect in that free space….
This is very interetsing. I’ve bookmarked you for later…my webmaster has been sick for the past couple weeks, so I’ll have to get him to look into this for me when he gets back on his feet.
I stumbled across your site from another that showed you were taking part in the technoratie favs.
I’ve already added you
My username is fastfastlane, and link to my fav is
http://technorati.com/faves?sub=addfavbtn&add=http://www.fastlanetransport.ca/blog
Cheers!
@ Deborah
added to me favs too
thanks for doing it. Your comment reminded me that I should post something about the technorati favs stuff lol, I’ve just done it.
Thanks for appreciating me content and do tell me whether this works at your side(when your webmaster gets back), if you need any clarification do tell me and I would be glad to help you.
Keep in touch for more great news
and thanks indeed for your comment.
i’m at loss at the 2nd step. when i used the 1st code, all the buttons are gone…it’s working. do i still need to copy the code in the 2nd box?
@ jennyr
Hi Jennyr, the purpose of all this how-to is to make those buttons disappear. You don’t have to worry though, the directories’ crawlers will still be able to reach your blog and rank it. It’s just that the buttons are there but they will not appear. Use the above trick for those buttons you don’t like to get displayed but leave anything that you would like visitors clicking on, for e.g the button to make you a favs on technorati.
Do tell me whether you need any further clarification or help.