Ning Network Tips - Archived Tips

462 members

Description

This Group contains archived Ning Tips. To add a new tip, please go here: Add Ning Tips & Tricks

To view new Ning Tips go here: Ning Tips & Tricks Forum.

Comments Entries Members

Add Special Content to Header Area

by JenSocial

Jan 19, 2010

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>

Load Previous Replies
  • up

    Administrator☼JenSocial

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

    Jan 19, 2010

    Load Previous Replies
    • up

      Mandy G.

      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

      5

      Jul 16, 2013

      Load Previous Replies
      • up

        Predestined by God

        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?

        Jan 14, 2015