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.

  1. Create your HTML.
  2. Upload to a server or to Ning via Blog (be sure to click on document upload icon)
  3. 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>
  4. 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.
  5. Know your HTML path.
  6. 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.
  7. Adjust the iframe width and height to fit your HTML content area.
  8. 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>

Views: 1196

Replies to This Discussion

Hi Angels Launch,
The only external HTML URL you would not be able to load into an iframe, would be a link from your Ning Network. Ning Networks can't be loaded in iframes. Does that make sense?
Hope that helps,
Jen

Hi Jen, Quick question: Anytime I add an iframe and embed a html file (that's located on another server) I always add  target="_blank" so they don't open within the iframe. The contents of the html include nav links that open in new windows and it's kind of annoying, lol.

Would you be able to help? How can I change it so the links open in the same window but not within the iframe.

Also, when I open this in my mobile, I can only see the logo and not the nav links..Do I need to add something to the code? 

I know you're super busy and any help would be greatly appreciated.

See it here.

P.S. I know this article was written quite some time ago, but I used this tip anyway, to spruce up my 2.0 site until I get things going with the 3.0 site =)

Thanks, Mandy

Hi Mandy,

One thing to note: You can't use drop down menu items within iframes. As long as you have one level of menu links, you're good.

If the HTML you're iFraming belongs to you (other words, if you can edit it) - - to fix the issue of _blank:

For each link in original code, change _blank to _top. That should fix it.

I don't know about the mobile issue.

Best Regards,

Jen

Looks great!

omg that's so cool, it fixed it!! Thank you so much, I had no idea about the "top" code, never heard of this one before! You're awesome, thanks.

Mandy

My pleasure, and great! Glad that worked out. Thank you for the feedback.

Best Regards,

Jen

I loved this code so much that it got me thinking..can this be used on a page as well?

For example change the following:

x$("#xn_bar") 

to something like..

x$("xg_widget_page")

I'm completely guessing here as JavaScript is not  my expertise, lol.

I would love to expand the width of just a single page to embed a index.html file in an iframe and was thinking maybe this code would help?

hehe sorry for my crazy ideas..was just wondering if it's a possibility with this code. (this is for ning 2.0, btw) 

or would I have to do something like this.

Thanks again. Have a nice Friday.

Hi Jen! Is it possible to add a photo so that I can get a visual picture of what exactly it is I am working with. Is this code for doing this?

RSS

Members

© 2024   Created by JenSocial.   Powered by

Badges  |  Report an Issue  |  Terms of Service

Home
VIP Ning Tips