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

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

Votes: 0
Email me when people reply –

Replies

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

Rosas † Negras posted a discussion
<link rel="stylesheet" type="text/css" href="ADD YOUR CODES IN CSS FORMAT" /> 
11 hours ago
Anna Solano updated their profile
yesterday
Oriel and Hippy are now friends
yesterday
Eva updated their profile
Thursday
Eva and Hippy are now friends
Thursday
Tracy Cook updated their profile
Wednesday
Mystical updated their profile photo
Jan 15
Mystical updated their profile photo
Jan 15
Mystical updated their profile
Jan 15
Mystical and kostasgr are now friends
Jan 15
highriskgateways updated their profile
Jan 13
Livita Silva updated their profile
Jan 9
More…

Meanwhile, you can check our social media channels