Social Network Advert Rotator

http://cborrego.com/?author=44 Hello gang,

http://madisoneducationfoundation.org/wp-content/cache/et/73/et-core-unified-1539984043501.min.css If you sell bespoke advertising space on your Ning site then one of the key issues you’ll have as a publisher is giving advertisers equal time ‘above the fold’. This simple tip shows you how you can randomly rotate banner adverts in an HTML box.

http://contactlensgallery.com/articles.html First up, the html mark up, to be inserted in an HTML box on a custom page. In this example there are three banner ads of 300x100px. Here’s what we should start with:

<div class="SP_Sidebar_Ad_Rotate"> <ul> <li><a target="_blank" href="http://www.targetURL.com"><img src="http://api.ning.com:80/files/aq07GQXjwH3qyhE5ODqtDIT1XLFHHgs-wYL92GrdymTjWD1yzDrV8R3CVLCb0bmD3k*cFYsifPfTF1XxuOE8sm**53VHxk23/ad1.jpg" /></a></li> <li><a target="_blank" href="http://www.targetURL.com"><img src="http://api.ning.com:80/files/aq07GQXjwH0CjnYUF0iheuF2nEgZK8NJDZeH2qrL4D3pcC7dUT6xJKFN8SUmronc9Xzchr3MeDwbFEdl9VksOEMYPngCij71/ad2.jpg" /></a></li> <li><a target="_blank" href="http://www.targetURL.com"><img src="http://api.ning.com:80/files/aq07GQXjwH3ayo4KbAWgB6A9yv56iQqxv0SYwM5v0iPEypXYrj5uZ4YRIN0wDnd5NfuLZguxclOx-wdNewOaTiOj5qSKypd7/ad3.jpg" /></a></li> </ul> </div>

You will need to replace the targetURL.com and the image source in each instance, and if you want more than three banners then all you need to do is add another List item – the code between <li> and </li>, so one banner add list code looks like this:

<li><a target="_blank" href="http://www.targetURL.com"><img src="http://api.ning.com:80/files/aq07GQXjwH3ayo4KbAWgB6A9yv56iQqxv0SYwM5v0iPEypXYrj5uZ4YRIN0wDnd5NfuLZguxclOx-wdNewOaTiOj5qSKypd7/ad3.jpg" /></a></li>

Once you’ve got the links and banner images in place you will need the jQuery to rotate the list items. Here it is, to be placed in your Custom Code End of Page Code section:

<!-- SP ADVERTS RANDOM -->
<script>
xg.addOnRequire(function () {
x$(document).ready(function() {
x$(".SP_Sidebar_Ad_Rotate").html(x$(".SP_Sidebar_Ad_Rotate li").sort(function(){
    return Math.random()-0.5;
}));
x$('.SP_Sidebar_Ad_Rotate').css('display','block');
});
});
</script>

You will also want to add some css to the Design Studio Custom CSS section:

/*Side bar Ads*/
.SP_Sidebar_Ad_Rotate {
text-align: center;
display: none;
}

.SP_Sidebar_Ad_Rotate > li {
list-style: none!important;
margin-bottom: 5px;
}

You’ll notice that we’re hiding the ad units with css until the jQuery has done its magic once the page has loaded. This saves the ads ‘jigging’ about on the page while all the script loads.

Press save and try it out. Cool eh?

Enjoy!

SP

Richard Pettet
Follow me

Richard Pettet

I'm a professional website designer who specialises in Social Network and community website build and design work. Expert with Ning and BuddyPress.
Richard Pettet
Follow me

You might also like