Hiding your image buttons for some sidebar goodness

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.

loads of image buttons
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.

33 Responses so far