Hiding your image buttons for some sidebar goodness

April 11th, 2007 by Hans

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.

Tags: 31 Comments

31 responses so far ↓

1 Mauritius Blog Tracker Apr 11, 2007 at 7:36 pm

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. Share This © Hans for BlogoSquare, 2007. | Permalink | No comment | Add to del.icio.us | Search blogs linking this post with Technorati | Filed under under Popular articles, Blogging, how-to, wordpress, blogger. Read more here
2 co.mments - Recently added conversations Apr 11, 2007 at 7:54 pm

Hiding your image buttons for some sidebar goodness Add a comment | Jump to posted comments | Share This If you’re new here, you may want to subscribe to my RSS feed or get my latest posts directly in your mailbox. Thanks for visiting! Blog directories are a good way to earn traffic but nonetheless
3 hiding image buttons on Flickr - Photo Sharing! Apr 11, 2007 at 11:42 pm

[…] hiding image buttons To take full advantage of Flickr, you should use a JavaScript-enabled browser andinstall the latest version of the Macromedia Flash Player. _decorate(_ge(’photo_gne_button_zoom’), 455690195); _decorate(_ge(’photo_notes’), _ge(’photoImgDiv455690195′), 455690195, ‘http://farm1.static.flickr.com/220/455690195_4c0b1443f7_t.jpg’, ‘1.6′); hide blog directories image buttons by following this quick tutorial […]
4 www.blogmemes.net Apr 11, 2007 at 11:59 pm

Hiding your image buttons for some sidebar goodness…

Liked what you just read here ? Vote for it on Blogmemes ! Hide your blog directories’ image buttons while your blog is still crawled, listed and ranked on them, and recover the precious space they have been occupying…
5 Tailrank - Shared posts for blogosquare Apr 12, 2007 at 12:15 am

[…] posts for blogosquare Hiding your image buttons for some sidebar goodness Found 41 seconds ago on blogosquare.com Hide your blog directories’ image buttons […]
6 Hiding your image buttons for some sidebar goodness — BlogoSquare Apr 12, 2007 at 12:34 am

[…] Hiding your image buttons for some sidebar goodness […]
7 PlugIM.com Apr 12, 2007 at 12:40 am

Hiding your image buttons for some sidebar goodness…

Hide your blog directories’ image buttons while your blog is still crawled, listed and ranked on them, and recover the precious space they have been occupying…
8 Nym Apr 12, 2007 at 12:42 am

hehehehe
tricheur Hans, i’ve got the idea first
9 Hans Apr 12, 2007 at 11:56 am

@ 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?
10 anoop Apr 12, 2007 at 1:42 pm

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 !
11 anoop Apr 12, 2007 at 1:44 pm

bla bla bla .. the comment was posted only partially .. :S

enfin .. :

.... .... content/ images/ buttons go here .... .... .....
enfin ..
12 anoop Apr 12, 2007 at 1:44 pm

bla bla bla .. the comment was posted only partially .. :S

enfin .. :

.... .... content/ images/ buttons go here .... ....

…

enfin .. ///
13 anoop Apr 12, 2007 at 1:46 pm

pfffffffff ..

its not displaying the codes ..

pfff ..

as vous de deviner comment ca marche !!!!!!!!!

enfin .. :s
14 leo Apr 12, 2007 at 2:06 pm

@ anoop if tis html you might want to use > and <
15 leo Apr 12, 2007 at 2:17 pm

oops, i meand *& lt;* (Without the asterisk and space, or *& gt;*

like in >meta<
16 leo Apr 12, 2007 at 2:23 pm

enfin >meta< lol
17 leo Apr 12, 2007 at 2:24 pm

damn, forget it, i cant seem to get it right lol

<meta>
18 Hans Apr 12, 2007 at 2:40 pm

@ 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….
19 Quick shooting stats of your Wordpress blog — BlogoSquare Apr 22, 2007 at 1:47 pm

[…] Hiding your image buttons for some sidebar goodness […]
20 a click to more feed subscribers — BlogoSquare Apr 24, 2007 at 5:19 pm

[…] Hiding your image buttons for some sidebar goodness […]
21 The proper way to write code in your blog posts — BlogoSquare Apr 24, 2007 at 6:54 pm

[…] Hiding your image buttons for some sidebar goodness […]
22 Emalimage: get yours! — BlogoSquare Apr 26, 2007 at 11:20 am

[…] Hiding your image buttons for some sidebar goodness […]
23 Deborah Apr 30, 2007 at 3:57 am

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!
24 Hans Apr 30, 2007 at 8:54 pm

@ 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.
25 jennyr May 2, 2007 at 8:44 pm

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?
26 Hans May 3, 2007 at 11:27 am

@ 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.
27 bla.st, a card directory to blast your online presence — BlogoSquare May 17, 2007 at 9:00 pm

[…] Hiding your image buttons for some sidebar goodness […]
28 how-to : getting ads work for you! — BlogoSquare May 28, 2007 at 8:41 am

[…] Hiding your image buttons for some sidebar goodness […]
29 Selected Articles - Scot Smith Jul 4, 2007 at 3:25 pm

[…] tells us what to do once our sidebar is full of buttons and images. If you market your blog by joining top sites, this is a great tip usings CSS to get rid of some of […]
30 BlogoSquare | Things you should know when using post excerpt Nov 18, 2007 at 5:39 pm

[…] Hiding your image buttons for some sidebar goodness […]
31 Give visitors what they want | BlogoSquare Nov 20, 2007 at 9:47 pm

[…] Hiding your image buttons for some sidebar goodness […]

BlogoSquare

Essential problogging resources and downloads