Floating Images and Links, on All Pages

[Jen]

Have you ever wanted to add an image in a location (maybe upper right, or lower left) on your Ning Network, that can't be added via Text Boxes - - or within the designated column space?

If you look on the Ning Directory, in the top right corner - - you will see a Twitter image, floating in the clouds.
http://theningdirectory.ning.com/

Below, is the code for that twitter image and link (except the image path is just for example). The only thing special about this clickable image (image with link), is the position style.

Code:
<a target='_blank' href='http://twitter.com/ningtweets' text='Follow Us on Twitter'><img src='http://yourblogpost_path/twitter_headthruhole.png' alt='Follow Us' style='position: fixed; top: 30px; right: 15px;'></a>

Look at the code above. Find the parameter for position. This is where you want to focus.
The position: fixed means:
An element with fixed position is positioned relative to the browser window. It will not move even if the window is scrolled.

The parameter for top: 30px; -- instructs your CSS to place this image 30 pixels from the top of your active window.

The parameter for right: 15px; -- instructs your CSS to place this image 15 pixels from the right of your active window.

How to Add this type image and link to your Ning Network?
Add the code to your Analytics Box.

Notice: Position will be different, for each screen resolution. If you make the browser window smaller (not minimized), just drag the bottom right corner to make it smaller - - you will see how the floating image will be repositioned to the left. With the standard resolution being around 1024 by 768 - - this shouldn't be an issue. And, the higher the resolution, it won't matter at all. Just be aware of this.

[Debbie]

Thanks Jen! I always wondered how you did that :+)

[Jen]

Hi Ayla,
The linkable image is the and that surrounds the image.

% should work just fine.

It would still be "fixed" even if you use %.
Best,
Jen

[Steve Waller]

Hey this is a cool hack, is there a way to add 2 links (facebook & Twitter) on top of one another? I've tried, but I'm really not a geeky person.