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

FORUM

NC for Hire

Several community managers have contacted me and asked for a simple news ticker to add to their community. So....This is a tip for anyone who would like to add a simple and easy to manage news ticker to their Ning Community.  It is easy to manage because all you have to do to change out the messages are alter 4 lines of code in the HTML What we are building looks like this but is 100% customizable:

Add the following HTML inside a HTML module on your site's backend (change the wording on each <li> line with your own):

<div class="news-ticker" data-speed="5000">
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 1</li>
<li>Sed eget diam sit amet dolor lacinia maximus eget quis quam. 2</li>
<li>Contact jbirds.co for help with your Ning Community</li>
<li>Sed eget diam sit amet dolor lacinia maximus eget quis quam. 4</li>
</ul>

<span class="close-ticker"><svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1" width="50" height="50" id="svg2"> <defs id="defs4"/> <metadata id="metadata7"> <rdf:RDF> <cc:Work rdf:about=""> <dc:format>image/svg+xml</dc:format> <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/> <dc:title></dc:title> </cc:Work> </rdf:RDF> </metadata> <g transform="translate(0,-1002.3622)" id="layer1"> <rect width="5" height="35" ry="0.025385702" x="741.69556" y="691.34021" transform="matrix(0.70710678,0.70710678,-0.70710678,0.70710678,0,0)" id="rect2987" style="fill:#ffffff;fill-opacity:1;stroke:none"/> <rect width="5" height="35" ry="0.025385702" x="706.34021" y="726.69556" transform="matrix(-0.70710678,0.70710678,0.70710678,0.70710678,0,0)" id="rect2987-1" style="fill:#ffffff;fill-opacity:1;stroke:none"/> </g></svg></span>

</div>

 

 

Add the following CSS to your Design Studio (change background color #111 to anything you like):

.news-ticker,
.news-ticker li {
width: 100%;
position: absolute;
padding: 0;
margin: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

.news-ticker ul {
list-style: none;
padding: 0;
margin: 0;
}

.news-ticker {
height: 50px;
top: 0;
left: 0;
background-color: #111;
color: #fff;
font-family: 'Open Sans', sans-serif;
}

.news-ticker li {
text-align: center;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
}

.close-ticker {
width: 50px;
height: 50px;
position: absolute;
right: 0;
top: 0;
cursor: pointer;
}

 

 

Add the following jquery code to your Custom Code (bottom):

<script>jQuery(document).ready(function(x$){

var tickerSpeed = x$('.news-ticker').attr('data-speed');

x$('.news-ticker ul li').hide();
x$('.news-ticker ul li:first').show();

var currentSlide = 0;
var slideCount = (x$('.news-ticker li').length) - 1;

var startTicker = setInterval(function(){

x$('.news-ticker ul li').eq(currentSlide).fadeOut(500)

if (currentSlide < slideCount) {
currentSlide += 1;
} else {
currentSlide = 0;
}

x$('.news-ticker ul li').eq(currentSlide).fadeIn(500)

}, tickerSpeed);

x$('.close-ticker').on('click', function(){
clearInterval(startTicker);
x$('.news-ticker').fadeOut(500, function(){
x$(this).remove();
});
});

});

</script>

 

Enjoy!  Let me know if you need help with any aspect of your Ning Community...

 

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

Join Ning Creators Social Network

Email me when people reply –

Replies

This reply was deleted.

Announcements

 

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

Annabel Gregory replied to Annabel Gregory's discussion
Broadcast newsletter not received
"Thanks. Ning support said that it was a bug. There seemed to be rather a scattergun effect - the fi…"
13 hours ago
Amber Nelson replied to Annabel Gregory's discussion
Broadcast newsletter not received
"Yes, unless the preview mail and the actual mail come from two different mail servers. It could als…"
14 hours ago
FOWC is now a member of 3.0 transition assistance
17 hours ago
Annabel Gregory replied to Annabel Gregory's discussion
Broadcast newsletter not received
"Thanks, Amber, hope it's just that! But shouldn't that have affected the previewed mail as well?
 "
23 hours ago
Amber Nelson replied to Hugh's discussion
Pictures/Gallery Pages Very Poor performance in Search - Anyone know why?
"Usually, google Searches look for the direct link to the image in order for it to show up on image…"
23 hours ago
Amber Nelson replied to Annabel Gregory's discussion
Broadcast newsletter not received
"Perhaps there's a delay in Ning's mail infrastructure to ensure mail going through has no spam rela…"
23 hours ago
Amber Nelson replied to Anastasia_Ning_Support's discussion
Welcome Landing Page Builder
"To add to this theory, I found out if you don't edit your default home page template, your default…"
yesterday
Amber Nelson replied to Anastasia_Ning_Support's discussion
Welcome Landing Page Builder
"On a hunch, to solve the issue, what did you use as the page URL for your site when you enabled the…"
yesterday
Annabel Gregory posted a discussion
I have just broadcast our fortnightly newsletter to all our members, and at the first attempt 40 mi…
yesterday
Dr. Krishna Kumari Challa replied to Dr. Krishna Kumari Challa's discussion
Why isn't my Ning network site not secure?
"Thank you! I have scanned my PC several times but didn't find any malaware. I have kaspersky anti-v…"
yesterday
Hugh posted a discussion
Generally, my Ning site seems to do pretty well in Google serach ranking. But for some reason photo…
yesterday
Ingrid Silva Cárcamo replied to Anastasia_Ning_Support's discussion
Welcome Landing Page Builder
"Gracias por esta iniciativa que ya deseaba, pero falta mucho por arreglar y espero que pronto ya es…"
yesterday
More…

Meanwhile, you can check our social media channels