Tip: You Might Be Interested In ...

[SweetPotato]

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.

[EDAYAN]

thank you soooooo much....

[RF]

it's not working here either and I could swear I tried your suggestions in the comments...http://www.starseeds.net/profiles/blog/list

[Dignified]

Thanks for sharing... awesome tip..

Just a quick piece of advice for all others having difficulty installing this code, make sure it's at the top of your custom code box otherwise it might not display on your blogs. Took me a while to figure that out. :)

See it live on my site..

[Caribso]

Nice..

[Shesh Dhar Tiwari]

I want three rows so that 12 blogs can be displayed........ what to do? Presently working excellent and showing 7........

[SweetPotato]

Not possible using this tip, sorry

[Stygo Alphamatt]

Hi SP,

What a nice tip. I have come across this tip before and used it in blogs, forum & photos. It works fine only it was not so styled like your tip. For example i was not able to change the language: You might like this, to german: Das könnten sie auch interessieren. I was not able to change the hover color when someone points to an item. I hate this light blue hover and i tried everything to change the hover color to light red, but it did not work out. So i had to live with this light blue hover and the language beeing in english although the rest of my network is in german language.

So i was exceited to see this tip, i tried everything but it is not working on my network. I took of  all the codes i have from linkwithin and used only yours and still no sucess. Now i removed it and put back the codes i have and it is working on blogs, forum & photos.

I left the code you gave for the css and now i have the blog changed, the hover not but just the language, at least in blogs i have them now in German, thanks to you script. Forum & photos remain the same and i cannot changed this  f*** blue hover :-(

So am dropping the codes i have here,( i got this code from somewhere but cannot remeber where or from who so i can give the credits, all i know ) maybe to help you figure out how to make it available in forum & photos styled & the possiblity to change "You might like this... to anything else or to any language.

<!-- RELATED POSTS -->

<!-- Blogs -->
<script>
var linkwithin_site_id = 1476307;
</script>
<script src="http://www.linkwithin.com/widget.js"></script>
<a href="http://www.linkwithin.com/"><img src="http://www.linkwithin.com/pixel.png" alt="Related Posts Plugin for WordPress, Blogger..." style="border: 0" /></a>
<script type="text/javascript">
if (typeof(x$) != 'undefined') {
x$("DIV.xg_module.xg_blog.xg_blog_detail.xg_blog_mypage.xg_module_with_dialog").after('<div class="linkwithin_div" align="center"></div>');
}
else{
}
</script>

<!-- Forum -->
<script>
var linkwithin_site_id = 1476367;
</script>
<script src="http://www.linkwithin.com/widget.js"></script>
<a href="http://www.linkwithin.com/"><img src="http://www.linkwithin.com/pixel.png" alt="Related Posts Plugin for WordPress, Blogger..." style="border: 0" /></a>
<script type="text/javascript">
if (typeof(x$) != 'undefined') {
x$("DIV.discussion").after('<div class="linkwithin_div" align="center"></div>');
}
else{
}
</script>

<!-- Photos -->
<script>
var linkwithin_site_id = 1476373;
</script>
<script src="http://www.linkwithin.com/widget.js"></script>
<a href="http://www.linkwithin.com/"><img src="http://www.linkwithin.com/pixel.png" alt="Related Posts Plugin for WordPress, Blogger..." style="border: 0" /></a>
<script type="text/javascript">
if (typeof(x$) != 'undefined') {
x$("DIV.imgarea").after('<div class="linkwithin_div" align="center"></div>');
}
else{
}
</script>

i hope this could be of any help and i will try again 2morrow cos i really want to change that hover color from light blue to light red, cos there is nothing blue on my page.

Kudos

[SweetPotato]

That is this tip http://creators.ning.com/forum/topics/trick-how-to-add-related-phot... that uses a third party widget, so it is slightly different. I'm sure the original tipster will help with your issues.
Sp

[Stygo Alphamatt]

cool , i would really appreciate it cos i would like to change the hover to fit my network. I don't mind leaving it in english.

Will have time b4 weekend to give it another try and then turn to you if i need your help.

Thx, 4 da link so the code am using is from JFarrow

Stygo