How to make FACEBOOK like top bar ( Ning bar)?

This tip includes : a small profile photo exactly like facebbok ( small profile photo on ning bar code is originally written by TJ) , profile link with my profile written, my friends link, find friends link on the left side of Ning Bar.

Instructions:

Simply copy and paste the following code into Custom Code. 

Note: If you are looking for a person to customize your site, I'm available for hire. You may want to check my profile or you can directly contact me via my email id bernardmax2@gmail.com

Try Private help full support

The Code

<script type="text/javascript">
if (ning.CurrentProfile != null) x$('#xn_bar_menu').find('a#xn_username').after('<div style="font-size:11px; font-family:Tahoma;"><img style="border:solid 1px white;margin:0px;padding:0px;" src="' + ning.CurrentProfile.photoUrl + '" width="26" height="26" /><a href="/profiles" style="color:#f5f5f5; font-weight:bold;">My Profile</a><a href="/profiles/friend/list?my=1" style="color:#f5f5f5; font-weight:bold;">My Friends</a><a href="/profiles/members/advancedSearch" style="color:#f5f5f5; font-weight:bold;">Find Friends</a> </div>');
</script>

<style>
#xn_bar_menu_tabs a#xn_username {
display: none;
}
</style>

You can also check live preview if you are the member of my network here.
Preview

Tags: bar, facebook, ning

Views: 1341

Reply to This

Replies to This Discussion

excellent Bernard, it works perfect

Thanks Ricardo.

This is very nice, works perfect!

Glad it worked for you. Thank you.

Excellent. Work like a charm.

Thank you.

Hi Bernard,

Thanks for linking back to my original discussion on this!

I don't mind people sharing my free tips as long as they link back, like you did, so thanks again!

"TJ"

Hey TJ, 

Your Jqueryhelp.ning.com network is excellent. And thanks for small profile photo on ning bar code.

Best Wishes

Bernard

Thank you Bernard, works perfect!

You are welcome Tanzi. Hope you are doing well.

Great job Bernard, it looks fantastic.

Joao, thanks for using my tip.

RSS

Latest Activity

Ambroise favorited Eric Suesz's page Ning 3.0 Roadmap
11 minutes ago
Ambroise commented on kid k's group 'Ning French Networks'
"Dans le menu, il y a marqué Ning 3.0 lol"
13 minutes ago
Jean-Christophe Fa(u)dot commented on kid k's group 'Ning French Networks'
"En ce qui me concerne, c'est à peine si je sais que Ning 3 existe ou va exister !…"
2 hours ago
SM replied to SM's discussion 'How to Target the First Page of your Site with CSS'
"Hi Suzie, here is the code you need to put into your bottom custom code box in the design center…"
2 hours ago
Kos replied to SM's discussion 'How to Target the First Page of your Site with CSS'
"ahhh now that makes sense.  Thanks for clarifying :)"
3 hours ago
Strumelia replied to FedMedic's discussion '3.0 Why is all my text centered?'
"Thanks so much, and please DO let me know what their support team is like, when you first make use…"
4 hours ago
SM replied to SM's discussion 'How to Target the First Page of your Site with CSS'
"Hi Suzie, I'll try to post something more logical with screen shots. But, you'll see -…"
4 hours ago
SM replied to SM's discussion 'How to Target the First Page of your Site with CSS'
"Hi Kos, the reason for the code is to have elements only display on the home page. By default, Ning…"
5 hours ago

© 2013   Created by Ning.

Badges  |  Report an Issue  |  Terms of Service