Add Scrolling Message in NingBar - - Another Great Tip! ;-)

You can add a scrolling message to the top of your Ning Network (NingBar). This is a great way to make short announcements, slogans, or quotes. The message will be displayed in the NingBar at the top of your site. If you have the NingBar hidden, it will be displayed at the top of your site.

This scrolling message will also stop/go on mouseover.

INSTRUCTIONS:
1. Edit the text below, using your custom text message.
2. Add the entire block of code to the Custom Code Box (Analytics) via My Network/Tools/Custom Code.
Note: If you sign out, it may take a while for the caching to catch up, and for the scrolling message to show. This is true for any tweak you make to your Ning Network.

WARNING: As in all tips offered on JenSocial, tips are hacks. Add at your own risk. Please be sure you do not leave out any characters.

CRITICAL TIP: For some reason a Ning Text Box like this Discussion, changes the "absolute position" code. Please use the attached text file to edit. See image below for how your code should look after style=" and before right:400px



DO NOT USE THIS CODE. EDIT CODE IN ATTACHED FILE.
<!-- Add Scrolling Message to NingBar -->
<div style="xg-p:absolute; right:400px; top:4px;"><marquee onmouseover="this.stop();" onmouseout="this.start();" scrolldelay="125" scrollamount="3" direction="left" height="20" vspace="0" bgcolor="#FFFFFF" style="font-family: Verdana; font-size:10px; color: #CC0000;">To add a scrolling message to your NingBar, change this text, and add the code to your Custom Code Box. If you want, you can add simple links like this: <a style="color:#000000;" href="http://jensocial.com">Visit JenSocial</a> This is a great way to make announcements to your site visitors.</marquee></div>
<!-- End Scrolling Message to NingBar -->

How to Change the Font Size and Color:
Change the font size and color by editing this code, within your code block, above.
font-size:10px; color: #CC0000;

Tip: If you increase the font size, you may need to increase the attribute for: height="20".

Example:


Tags: message at top, scrolling, scrolling message, scrolling message in ningbar, top scrolling

Views: 822

Attachments:

Replies to This Discussion

Permalink Reply by JenSocial on May 20, 2012 at 2:48pm

LOL on the drunk monkey...

I tried via Firebug on your live site, and it worked for me. Two suggestions: Make sure you're using the code from the attached file, since the discussion strips the word position. And, make sure you don't install and then sign out. It takes a few minutes for changes to show up on signed out.

Best,

Jen

Permalink Reply by Ryan on May 20, 2012 at 6:51pm

I did all that and still nuttin. I will fiddle with it tonight and report back.

Jen I am curious what you think of my site and if any of your tweaks/hacks I should maybe be using or would be beneficial in your opinion.

I have a lot of podcast work to do for one.

Permalink Reply by Baqur Mehdi on June 3, 2012 at 7:07am

this one is only working in google chrome, and it didnt appear on mozilla, i9,

Permalink Reply by JenSocial on June 3, 2012 at 1:35pm

Make sure you have "position:absolute", and not "xg-p:absolute". Use the attached text file above, instead of copying from tip screen.

Hope that helps,

Jen

Permalink Reply by Mystical on October 4, 2012 at 10:40am 
Whenever this is put inserted it shows at the bottom. Abidin and I am are working on this all morning. we are hoping to bring it from the bottom of the site by the footnotes to the top of the page..=) Any help would be wonderful. thank you Mystical


<!-- Add Scrolling Message to NingBar --> <div style="xg-p:absolute; right:400px; top:4px;"><marquee onmouseover="this.stop();" onmouseout="this.start();" scrolldelay="125" scrollamount="3" direction="left" height="20" vspace="0" bgcolor="#FFFFFF" style="font-family: Verdana; font-size:10px; color: #CC0000;"><a style="color:#000000;></a> WELCOME IN ROSAS NEGRAS</marquee></div> <!-- End Scrolling Message to NingBar -->
Permalink Reply by Mystical on October 4, 2012 at 10:43am

when I put it here on a comment it switched back to xg-p: absolute.  I had it position:absolute.. I don't understand.. I am also sending it to abidin in a message for him to put on.. maybe it is switching and it is not functioning because of this reason.. please help?

Permalink Reply by JenSocial on October 4, 2012 at 10:58am

As long as the xg-p is "position:absolute" no quotes, in your Custom Code Box, it should work. The Ning platform automatically changes the word "position" in any discussion or blog, for security reasons. However, it will not change the word in Custom Code Box.

Let me know,

Jen

Permalink Reply by Mystical on October 4, 2012 at 12:03pm

we just aren't getting it. He inputs it but it shows up at the bottom. we are doing something wrong. I just don't know.. We will put it away for now.. maybe play with it some more later. lol I have it on my site and it works perfect. I love it!!! *hugs* Mystical

RSS

© 2013   Created by JenSocial.   Powered by

Badges  |  Report an Issue  |  Terms of Service

Home
VIP Ning Tips