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

Demo On Home Page, look for the popular blogs module on the right: http://bizzssite.ning.com/

This little tip will give you the chance to add a popular blogs module to any page, a bit like the ones we have for latest activity etc. If you visit my site you will see on the homepage the popular blogs module, I have added both type in a tab container so you can see both of them. So one just shows the titles and the other shows more detail. The show more link at the bottom will take you to the blog page in the most popular sort mode.

PLEASE NOTE: The code below is only for one main blog page instance, I am working on a way to be able to add multiple blogs page instances without having to copy and paste the code several times and edit it.

Anyways for now here is how you add one to a page.

  1. You go to your site and pages then go to a page where you want to add the module
  2. Click on the add content button then give the module a title
  3. Click on the little html button and paste in the div ( choose which you want from the titles or detailed ) which is going to hold the blog info
  4. Click add to place it onto the page then put it where you want it.

That's it, you can add the module to anypage and as many as you want. The code does the rest and in the code you will alter how many items you want to display and the url for the blog page. You only need do this once.

First of all here are the two divs for you to choose from

<div class="popblogs"></div>

<div class="popblogsDetail"></div>

Next we need to add some custom code and in the part in bold is where you add your url for your blog page. You just need to add the last part of it.

For example if your blog page was called myblog the url for it might be something like"bizzssite.ning.com/myblog  "it would only be the part /myblog we would need to add. If unsure open your blog page and look at the browser url for it and you will see the part to add at the end. Both the blog titles and blog details code is all added together in this one block.

If your blog page is already just called blog then you are good to go without changing anything.

Custom code to go in your site and pages end of page section REMEMBER TO CHANGE THE URL IN BOLD FOR YOUR BLOG UNLESS YOU HAVE CALLED IT BLOG( do not copy this line with the code )

<script>
// Blogs Popular Modules
x$(document).ready(function(){
x$(".popblogs, .popblogsDetail").closest(".entry-content.cf").addClass("popblogsContent");
x$('<div/>',{ class : 'popblog-footer'}).appendTo('.popblogsContent');
x$(".popblogs").load(' /blog?sort=mostPopular .blogListPage .entry-headline.media-frame');// Headllines
x$(".popblogsDetail").load(' /blog?sort=mostPopular .entry.blogListPage-entry');// Headlines Plus Detail
 x$('<a href=" /blog?sort=mostPopular">View More..</a>').appendTo('.popblog-footer');// View more is only one link as it's the same page
});
</script>

Next we need a little bit of CSS to set out amount of blogs we want to show

In the code below you will see this :nth-child(n+3) and this is what controls the amount of post we want to show. How it works is after the first three divs remove all the rest and just show those. Now here is the important part, because our container holding the content is a div it counts in the list so n+3 will just show two blogs. So it's main div plus two blogs equals three. So if you want let's say five blogs to show up you would edit it to look like this

:nth-child(n+6)          main div + 5 blogs = 6

CSS to go in your design studio custom css section ( do not copy this line ).

/** LIMIT THE DISPLAY OF POP BLOGS **/
/* hides all after the first two as main div is included so if it was n+2 then only one will show etc */
/* TITLES ONLY LIST */
div.popblogs header.entry-headline:nth-child(n+3){ display:none }
/* DETAIL LIST*/
div.popblogsDetail .blogListPage-entry:nth-child(n+3){ display:none }


.popblog-footer, .popblog-footer a:hover{ text-align:right; text-decoration:none }
.popblogsDetail .entry.blogListPage-entry .entry-footnote{ display:none }
.popblogsDetail .entry.blogListPage-entry { border-bottom: solid 1px lightgrey }

EXTRA TIP

That's it all done, you can come back and edit the list lengths at any time. If you are more experienced with adding css you could change the list length depending on the page you are adding them to by copying the line then adding the page name before it something like this

So let's say on my homepage I want a longer list than the standard one we first added in the css code for the page titles one , we would simply copy that line and make a change to it with our page name and it it to our css and that line would like something like this which would show us 7 blog titles.

/* TITLES ONLY LIST */
.page-home div.popblogs header.entry-headline:nth-child(n+8){ display:none }

Well that's it. Sounds more complicated to explain how to add it than it is so give it a go and see how you get on.

Enjoy

John :-)

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 there are a lot of people who will love this tip.  Displaying the most popular 'anything' is sharp.  Thanks John!

    • Thanks Kos
      I will add one for forums and articles as well as it works virtually the same.
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

Aase Lillian replied to Aase Lillian's discussion
Community - activity page
"Ok, thank you. Please send me details as I have no idea on how to do it. "
2 hours ago
Aase Lillian and ⚡JFarrow⌁ are now friends
NC for Hire
2 hours ago
⚡JFarrow⌁ updated their profile photo
11 hours ago
⚡JFarrow⌁ replied to Aase Lillian's discussion
Community - activity page
"Yes you can add emojis to your community pretty much anywhere you like.
If you need some help…"
11 hours ago
Aase Lillian updated their profile
11 hours ago
Aase Lillian posted a discussion
Hi all. Is it possible to add emojis to the community? I also wish the activity page to include…
11 hours ago
Donna MacShoe updated their profile photo
Mar 6
Adul Rodri is now friends with ANGE.L LUAR and Margarida Maria Madruga
Feb 14
Shweta Sharma updated their profile
Jan 26
catherine martin updated their profile
Jan 16
Donna MacShoe updated their profile photo
Jan 15
⚡JFarrow⌁ replied to ⚡JFarrow⌁'s discussion
For Creators and Admins: Easy Way to Create a Community Status Report
"This is still one of the best posts for RSS feeds"
Jan 8
More…

Meanwhile, you can check our social media channels