JenSocial: Social Web Directory and Ning Tips

Social Web Directory :: Social Network Directory :: Ning Tips and Ning Support

Add Special Content to Header Area

How To Add Content to Your Header:
Summary - Prepare your content and add to an external HTML. Call into your Network Header via Analytics Box, using an iframe and JavaScript.

Create your HTML.
Upload to a server or to Ning via Blog (be sure to click on document upload icon)
How to center content in your HTML - add a DIV with align=center, around your header content, within your external HTML. An example of header content could be your Google Adsense code. Example start tag: <div align=center>
Background color - the best way to set iframe background color: add the body tag to your external HTML, like in following example. You can add these tags to your Analytics box code. But, I've found that it's better to add to your HTML file. Example start tag: <body bgcolor=white> Note: Don't forget to end both the body and DIV tags in your external HTML file.
Know your HTML path.
Replace the src="your_custom.html" with your HTML file path, in the example code below. Be sure to enter the entire file path for your HTML file.
Adjust the iframe width and height to fit your HTML content area.
Add the example code below, to your Custom Code box - Go to My Network/Tools/Custom Code.

EXAMPLE #1:
ADD CONTENT BELOW MENU NAVIGATION BAR:
<script type="text/javascript">
x$("#xg_navigation").after("<div id='custom_ads'></div>");
var ad_html = '<iframe frameborder="0" scrolling="no" allowtransparency="true" marginheight="0" marginwidth="0" src="your_custom.html" width="955px" height="100px"></iframe>';
x$("#custom_ads").html(ad_html);
</script>

EXAMPLE #2:
ADD CONTENT BELOW NINGBAR:
Note: For some reason, the centering had to added to the script, in this case.
<script type="text/javascript">
x$("#xn_bar").after("<div align=center id='custom_ads'></div>");
var ad_html = '<iframe frameborder="0" scrolling="no" allowtransparency="true" marginheight="0" marginwidth="0" src="your_custom.html" width="955px" height="100px"></iframe>';
x$("#custom_ads").html(ad_html);
</script>

1 member favorited this

Replies to This Discussion

Permalink Reply by Game Avenger on January 19, 2010 at 11:18am

Cool, thanks this will help me alot!

Permalink Reply by Administrator☼JenSocial on January 19, 2010 at 3:13pm

Any chance of a pic to help me visualize this before I start fiddling with codes
Thanks

Permalink Reply by JenSocial on January 19, 2010 at 11:21pm

Hi Deborah,
You see the Google Banner and Search buttons below the Menu Navigation on this site? That's using the code for "after" xg_navigation. I added my Google code and special search buttons to my external HTML.
You need good content or a good reason, in your external HTML. ;-)

Hope that helps,
Jen

Permalink Reply by Administrator☼JenSocial on January 22, 2010 at 8:55pm

Girl friend you sure know how to confuse me. I try the below the NavBar codes with To Add Custom Google Search and placed into Analytics. I only got the outline of the box but no content.
Please be patient as I'm so confused with this that I gave up. Hoping to fix where I went wrong
Cheers
Deborah

Permalink Reply by JenSocial on January 22, 2010 at 9:06pm

Deborah,
The Custom Google Search will not work in an external iframe, sorry. You can add all kinds of content, as long as you call it from an external HTML. But, I know for sure, the Google Search won't work properly, unless you create it the old way (the way it works here in the header), and that takes special coding in new page, other files on server, etc... This is why I love the new beta Custom Google Search (like the power search on home page). It will only work in text boxes or new pages.
Hope that helps,
Jen

Permalink Reply by Administrator☼JenSocial on January 22, 2010 at 9:08pm

Thanks Girl friend

Permalink Reply by uyinmhuu on December 15, 2010 at 5:35am

Hi Jen

I want to know where can I place this code on my ning network.
I m sorry for my poor experance and I m a beginer too.

Thanks Jen

Permalink Reply by JenSocial on December 15, 2010 at 11:16am

uyinmhuu,

I apologize for the out-of-date instructions. They applied to a Ning site before a recent big platform update. I have updated the tip.

This is where you add this code:

My Network/Tools/Custom Code

Happy Holidays,

Jen

Permalink Reply by uyinmhuu on December 15, 2010 at 5:43am

Ohh I can place Iframe with this code

Then I do not know hoe to create ad-html

Please help

Thank you jen

Permalink Reply by JenSocial on December 15, 2010 at 11:11am

uyinmhuu,

I'm sorry, but I can't help with this kind of detailed custom help. I think I was reading your question on Creators. I read through it twice. It would take me an hour or more just to get through your code and try to understand what you need. I would if I could, and had more hours in a day. But, too much code, and too unique to your situation. I do offer customization services, but really booked right now.

I hope maybe the tip will help you. I suggest this: go back to Kris's video and watch it again. Also, if you do not know how to create an HTML file, try reading up here:

http://www.w3schools.com/

Best to you,

Jen

Permalink Reply by JenSocial on December 15, 2010 at 4:33pm

Check this out! This may be your answer:

http://creators.ning.com/forum/topics/simple-instructions-to-add-a

Permalink Reply by uyinmhuu on December 16, 2010 at 5:18am

Dear Jen

I do appreciate all of your answer and discussing .

All is really helpful to us .

Thanks a lot I will try again as possible as I can.

Be a beautiful days Jen