Trick: How to Add Related Photos, Forum Posts and Blogs Widget

[⚡JFarrow⌁]

Actually, this tip could be used for adding related posts to Photos (example), Forum Topics (example) or Blog Posts (example).  To be honest, using this method you could probably show related posts and pages for just about any feed on the network you like.

Go to LinkWithin

           put in your email and blog link (yournetwork.com/profiles/blog/list), forum link (/forum)or photo link (/photo)

Generate your code and place it at the bottom of all other codes inside the Custom Code box.

Then add the following undernieth it inside the custom code box

For Related Photos Widget:

<script type="text/javascript">
if (typeof(x$) != 'undefined') {
x$("DIV.imgarea").after('<div class="linkwithin_div" align="center"></div>');
}
else{
}
</script>

For Related Forum Topics:

<script type="text/javascript">
if (typeof(x$) != 'undefined') {
x$("DIV.discussion").after('<div class="linkwithin_div" align="center"></div>');
}
else{
}
</script>

For Related Blog Posts:

<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>

Bonus Tip:  Add Style to Your Widget

by styling the widget using CSS (in advanced CSS) you can add background image behind the links like so

DIV.linkwithin_inner {background:url('https://yourimage.png')}

For Creators Who Need Help with their Network, get one-on-one help at the top of my profile

if you'd like to add some custom CSS to change the style of your widget, try adding the following to your custom code box (2.0)

<link href="https://api.ning.com/files/eiC0hTlxr2K40Vj2TI8cYMkLRHkmYbt*5nI*dtn3yclDD5F7dCvYL50lhnPSu59DuzAk1pZhl9TddmBDBa8ZcinNuo*Rt43t/linkwithincustom.css" rel="stylesheet" type="text/css">

Turn This

Into This

If you'd like to play around with the code, I have created a pen on Codepen for adjusting the code to your liking here.  Attached is the css code to view... Enjoy!

[⚡JFarrow⌁]

haha.. why would you overlook my posts ;)  

i haven't yet adapted it to 3.0, but it looks like it might be time to do so..

[⚡JFarrow⌁]

got it working in 3.0... will put together a post tomorrow for you guys...goodnight

[⚡JFarrow⌁]

running into a few problems with Linkwithin on 3.0 sites, but if you'd like to add some custom CSS to change the style of your widget, try adding the following to your custom code box (2.0)

<link href="https://storage.ning.com/topology/rest/1.0/file/get/11510171?profile=original" rel="stylesheet" type="text/css">

Turn This

Into This

If you'd like to play around with the code, I have created a pen on Codepen for adjusting the code to your liking here.  Attached is the css code to view... Enjoy!

[⚡JFarrow⌁]

terrific.. that's good to hear Rowald!

[⚡JFarrow⌁]

terrific.. that's good to hear Rowald!

[⚡JFarrow⌁]

i know right

[⚡JFarrow⌁]

i know right

[⚡JFarrow⌁]

50 More Tricks for your Ning Network