Hi all

Here is a simple tip to insert a "You Might Be Interested In ... " (call it whatever you like really) section at the bottom of all blog posts, sort of like we have Related Videos on the video module.

Here's how it looks:


What does it do? It pulls in the middle column modules from the blog page, e.g. Latest Blog Posts, Most Popular Blog Posts etc. In the example above it is pulling in the Latest Featured Blogs from the Featured blog posts page.

How to install it:

  • Add this script to your Custom Code box (also attached as a text file):
<!-- SP You Might Be Interested In -->
<script type="text/javascript">

x$(document).ready(function() {
x$('.xg_widget_profiles_blog_show .xg_module_with_dialog').append('<h2 class="interested">You Might Be Interested In ... </h2><div id="SPmoreblogs"></div>');
x$('.xg_widget_profiles_blog_show .xg_module_with_dialog #SPmoreblogs').load('/profiles/blog/list?promoted=1 .xg_widget_profiles_blog_list .xg_column.xg_span-4.xg_last .xg_module:contains("Latest Featured Blog Posts")');
});
</script>


The script looks for modules with certain headings on certain pages, so you can change the highlighted items to suit your needs.

  1. If you want the 'You Might Be Interested In ... ' to say something else then change the orange You Might Be Interested In ...
  2. If you want to load a module from the All Blogs page (rather than the Featured Blogs Page as I am using) then change /profiles/blog/list?promoted=1 to /profiles/blog/list
  3. If you want to load a box other than Latest Featured Blog Posts change it to whatever you want, e.g. Most Popular Blog Posts

 

  • Add this CSS to your Advanced CSS section in Design Studio, tweaking the bits that you need to

/*You might be interested font*/
.interested{

font-family:georgia!important;
font-style:italic!important;
font-size:24px;
color:#a10227!important;
margin-left:10px;
}

/*List items*/
#SPmoreblogs li {

background: #F9F9F9;
border: 1px solid #E4E4E4;
display: block;
float: left;
margin-right: 3px;
min-height: 58px;
padding: 5px;
width: 168px;
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
}

/*Removes border from module*/
#SPmoreblogs .xg_module{
margin-top:10px;
border:none;
}

/*Removes module header*/
#SPmoreblogs .xg_module_head{
display:none;
}

I hope this is of use. YOu can check out a live demo here.
Enjoy
SP

ps. this is for blogs only for now. Not had time to do the forum. Might get round to it at some point if no one else hacks it in the meantime.

Tags: Professional Ning Design, Related Items, You might be Interested in

Views: 1186

Attachments:

Reply to This

Replies to This Discussion

Very skillful and interesting tip - -  top notch!

Thanks Jen

Hi  SweetPotato,

I am so eager to use this tip on my site that I tried for at least 10 times in different ways, even style sheet and making css but I am getting only Heading "You might be interested in..." I want to use it on my Blogs and on Pages. 

I am afraid this might be due to existing scripts which are all very necessary. If you wish, please join my site and I will make you admin. Please please.... help me. I am struggling for this feature.

My site link is http://thatsme.in

hey, i don't join other sites i'm afraid but please put the code on your site so i can see what you're doing wrong. it works good on mine but maybe there is an error in the txt file or something

sp

actually, looking at your site http://thatsme.in/profiles/blog/list?promoted=1 you don't have Latest Featured Blogs but you do have Latest Featured Blog Posts or Most Popular Featured Blog Posts so try one of those in the code above instead of Latest Featured Blogs

SP

Thanks a lot dear. You got the right issue. it is working now. THANKS A TON.....

WHAT CHANGES SHOULD I MAKE TO APPLY ON PAGES?

Hi SP,

This tweak solved the same problem for me! Got the "title" right and now the suggested blogs show. Thanks for this tip. +1

James

Thanks, this is a great tip,  I had to move your new code from the bottom of the custom code box to the top to get it to work (visible)  on my site.  It looks great now.

SweetPotato, you are a sweetheart! Thanks for this code!

Really a great tip indeed. Activities increased on my site http://thatsme.in blogs. Hats off to you SP.

If you say only  BLOG POST the custom code box you get multiple views of the blogs

Gotta love a potato man. :-)

RSS

Latest Activity

Fire-Tech replied to Alex's discussion 'More styling in the Design Studio'
"Good job! I would suggest a check box to move the ningbar to the bottom of the page when…"
33 minutes ago
Allison Leahy replied to Allison Leahy's discussion 'What is your Ning 3.0 URL?' in the group The Sandbox
"Hi Peggy! Sorry for the slow response here. The designers used Eagle for the headlines and Gotham…"
1 hour ago
Liliana Parra replied to John Bizley's discussion 'Show Your Ning 3.0 Sites'
"Mine is here... Disaster Risk Management (Spanish) http://gestiondelriesgo.ning.com/"
1 hour ago
Allison Leahy replied to Jen's discussion 'Menu on Mobile Device Difficult'
"Absolutely! Thanks for bringing it to my attention, and for your patience as always."
1 hour ago
Allison Leahy replied to Dw Alternatio's discussion 'Any way to change to a 3.0 network?'
"Hey Dw, So glad to hear you're interested in checking out the redesign! Make sure that after…"
1 hour ago

NC for Hire
Jen replied to Jen's discussion 'Menu on Mobile Device Difficult'
"Thanks Allison. I have spent hours trying to fix this. That's great news!"
2 hours ago
Allison Leahy replied to Jen's discussion 'Menu on Mobile Device Difficult'
"Just got the word that the release had no impact the mobile menu and a feature improvement has…"
2 hours ago
Allison Leahy replied to Jen's discussion 'Menu on Mobile Device Difficult'
"Interesting quirk. Thanks for the note."
2 hours ago

© 2013   Created by Ning.

Badges  |  Report an Issue  |  Terms of Service