Current status of the Ning Platform is always available on the Ning Status Blog.

NC for Hire

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="https://storage.ning.com/topology/rest/1.0/file/get/11383124?profile=original" alt="Visit Us On Facebook"></a><a style="padding-right:5px;" href="http://twitter.com/your_twitter" target="_blank"><img src="https://storage.ning.com/topology/rest/1.0/file/get/11383098?profile=original" alt="Follow Us On Twitter"></a></div>


I have also attached the code in text files.

You need to be a member of Ning Creators Social Network to add comments!

Join Ning Creators Social Network

Votes: 0
Email me when people reply –

Replies

  • i think that you have an awesome network! what are the requirements to join your network?
    • NC for Hire
      Thanks! Only requirements are: that you are the Creator or an Admin of a Social Network (any platform), and no Adult themed sites. That's it.
      ;-)
      Have a nice evening and thanks again,
      Jen
      • thanks. you too. : )
      • This reply was deleted.
        • NC for Hire
          OMG Jords, LOL, glad you like it!
          ;-)
  • Great site. It really helps when you know what you;re doing, eh? Unfortunately, I don't...lol.

    Maybe you could point me in the right direction on something. How did you get the images to the right of your logo below the ning bar? Could I ad an image or, better yet, an ad rotator script up there?

    Any info would be much appreciated!
  • Bunga Bandung
  • Thanks I just putt te icons on myn network

  • Jen mentions there is an easier way to do this. If anybody is curious - here's how I did it on makinghealtheasier.org.

    Note: This code assumes you have jQuery running - I think all Ning networks do by default but I can't say for certain. Also, you won't see the links when you are on the "My Network" tab, since custom code is not run on these pages.

    <script>(function($){
        $("#xn_bar_menu_tabs").prepend( // utility nav links (header)
            '<li><a href="http://yourexternalsite.com">YOUR LINK NAME</a></li>' +
            '<li><a href="/page/about-us">About Us</a></li>' +
            '<li><a href="/page/member-guidelines">Member Guidelines</a></li>' +
            '<li><a href="/page/contact-us">Contact Us</a></li>' +
        '');

        $("#xg_foot p.right").prepend( // footer nav links
            '<a href="http://yourexternalsite.com">YOUR LINK NAME</a> &nbsp;|&nbsp; ' +
            '<a href="/page/about-us">About Us</a> &nbsp;|&nbsp; ' +
            '<a href="/page/member-guidelines">Member Guidelines</a> &nbsp;|&nbsp; ' +
            '<a href="/page/contact-us">Contact Us</a> &nbsp;|&nbsp; ' +
        '');
    })(jQuery);</script>

    Note that the links for the footer don't use list items (<li>) but instead are separated by a space, then &nbsp; (non-breaking space), then a pipe symbol, then another &nbsp; and finally a regular character space - so that the style matches the same as the current footer in place.

    The benefit here is that It automatically resizes with the user's resolution/screen size - and there's no need for additional styling - although it may not give your links the proper hover effect. That can be fixed easily.

This reply was deleted.
 

Some interesting articles related to community management, digital marketing etc. could be found in our digest. Don't hesitate to leave a feedback so we would know that we should continue :-)

Latest Activity

kostasgr liked Alex - Rosas † Negras's discussion I managed to add group video calling, if anyone is interested I will post the codes
Jul 8
Steve C replied to ⚡JFarrow⌁'s discussion
What is going on with Ning? What Do We have to Look Forward To?
"Ning is based in California but operations are in Kyiv, Ukraine. Due to the war, operations may…"
Jul 6
Alex - Rosas † Negras replied to Alex - Rosas † Negras's discussion
I managed to add group video calling, if anyone is interested I will post the codes
"⚡JFarrow⌁  
I'm working on the stories and I don't have time to work on the video call you just…"
Jun 28
Alex - Rosas † Negras replied to Alex - Rosas † Negras's discussion
I managed to add group video calling, if anyone is interested I will post the codes
"if you want I'll give you the codes privately and we'll see if the two of us can make it perfect"
Jun 27
Eva and ⚡JFarrow⌁ are now friends
NC for Hire
Jun 25
⚡JFarrow⌁ replied to Eva's discussion
For three days now, my networks, Ning 2.0 and Ning 3.0, are incorrectly visible
"Ug... thats not right..  ill send you my phone number in messages and we'll talk it over."
Jun 24
Eva replied to Eva's discussion
Help Help Help
" I just started a test network on Ning. I'm having the same problems there too! No photos, in…"
Jun 21
Eva posted a discussion
Jun 21
Eva posted a discussion
For three days now, my two networks, Ning 2.0 and Ning 3.0, have been displayed incorrectly, they…
Jun 21
⚡JFarrow⌁ replied to Alex - Rosas † Negras's discussion
I managed to add group video calling, if anyone is interested I will post the codes
"looks interesting"
Jun 20
⚡JFarrow⌁ updated their profile photo
Jun 16
Kenny Craig updated their profile
Jun 8
More…

Meanwhile, you can check our social media channels