Add Links to Ning Bar

This is a very simple tip on how to add links in one row, to the top of your site (Top of Ning Bar or Top of Site). You will need to know how to write some HTML, as in how to create hyperlinks. And ideally, if you know how to add links to images, you can add links/icons across the top of your pages.

1. Create regular hyperlinks with the HREF tag: <a href="yourlink.html">Link Name or Image Goes Here</a>
2. Replace the code below with your hyperlinks and images.
3. Tweak the DIV position by adjusting the right:425px, in code below.
4. Add to your Custom Code Box, so your links will be displayed across your entire site.
   
5. My HREF tags in first example include an image and text.
6. The second example contains 2 icons/links for Facebook and Twitter. Feel free to use the icons.
   
7. Critical Notes - - All you're doing is floating a DIV a set number of pixels from the top and the right side of your site, using the position parameter.
   • Your links will be displayed in a different location on different screen resolutions. Be sure to test on 1024 by 768.
   • This can also be done using script and CSS, and you don't have to be concerned with the different screen resolutions - - like you do when using "position". The method I'm showing you is just the simple and quick method.
   • Also, don't add many links if you have any other content at the top of your site. If you do, you are very likely to cover up other content, when a user is on a different screen resolution. And you won't know it. This is why I urge you to always check your code in several browsers and resolutions.
     

On a Ning Network, the code in the Custom Code Box loads last. So, if you want these links to load first - - add to a text box in right column (upper Grid) to display on all pages.

******* REMOVE the space after the p in the word position, or use attached code. For Security reasons, these Ning boxes convert the position to an unusable code. *******

EXAMPLE #1:
<div style="p osition:absolute;right:425px;top:0px;"><a style="padding-right:5px;" target="_parent" href="http://jensocial.com/group/ningnetworktips"/><img src="http://jensocial.com/custom_images/tips.png"></a> <a href="http://jensocial.com/group/ningnetworktips" style="padding-right:10px;color:#CC0000">Ning Tips</a> <a style="background-image:none;padding-right:5px;" target="_parent" href="http://jensocial.com/page/social-network-directory"/><img src="http://jensocial.com/custom_images/report.png"></a><a href="http://jensocial.com/page/social-network-directory" style="padding-right:10px;color:#CC0000">Social Network Directory</a> <a style="padding-right:5px;" target="_parent" href="http://jensocial.com/leaderboards"/><img src="http://jensocial.com/custom_images/gold.png"></a> <a href="http://jensocial.com/leaderboards" style="padding-right:10px;color:#CC0000">Leaderboard</a></div>

EXAMPLE #2: (Twitter and Facebook icons)
<div style="p osition:absolute;right:425px;top:0px;"><a style="padding-right:5px;" href="http://www.facebook.com/your_facebook" target="_blank"><img src="http://api.ning.com/files/JMBQ5G-jWW9v0N2fruVxGrSJCNlpzgClTNot4nxgojGeCP*XNbcbYcWd*RX9dMLRJy1n7zNICoHLMbHmwOjHzFnlaDS1IkSW/facebook24.png" alt="Visit Us On Facebook"></a><a style="padding-right:5px;" href="http://twitter.com/your_twitter" target="_blank"><img src="http://api.ning.com/files/fkdCm9qa2JvXUzXqYRjyXj1fx5fNGPcmb1MAoiQ8rwdcDxQWuqyfuqEwieJ6A9YvuvJzg5nMRqrQPjpz8mHhZRcxoBEIOMM4/twitter_24.png" alt="Follow Us On Twitter"></a></div>


I have also attached the code in text files.