JenSocial: Social Web Directory and Ning Tips

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

Add Special Content to Footer

I've already had a couple of fellow NCs ask "How do I create a footer, like the new footer on Creators Network?" If this tutorial has already been created, I couldn't find it.

Your content and formatting is up to you, of course. But, I can show you how to add your footer content to your Ning Network. This is very similar to the How-To on Creators Network - "Inserting JavaScript ads or content in the header of your networks". So, if you want to learn how-to add/insert content or ads in your header, see Derrick's How-To, above.

How To Add Content to Your Footer:
Summary - Prepare your content and add to an external HTML. Call into your Network Footer 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 footer content, within your external HTML. 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.html" with your HTML file path, in the example code below.
Adjust the iframe width and height to fit your HTML content area.
Add the example code below, to your Analytics box - Manage/Analytics. <script type="text/javascript"> x$("#xg_foot").after("<div id='custom_ads'></div>"); var ad_html = '<iframe frameborder="0" scrolling="no" allowtransparency="true" marginheight="0" marginwidth="0" src="your.html" width="955px" height="100px"></iframe>'; x$("#custom_ads").html(ad_html);
</script>

0 members favorited this

Replies to This Discussion

Permalink Reply by JenSocial on August 29, 2010 at 11:52pm

Great, donations are much appreciated. ;-)
Yes, I actually have to charge $125 to do this for someone. I'm glad to hear you got through it, yourself.
Best,
Jen

Permalink Reply by SurferShot on August 30, 2010 at 2:07pm

Hi Jen,

I appreciate your hard work. I left you a little something in your main email account.
You have a great service here.

Permalink Reply by JenSocial on August 30, 2010 at 2:12pm

Thanks Scott! I can't tell you how much donations are appreciated. It really helps me continue my work here.
Thanks again,
Jen

Permalink Reply by K.King on October 27, 2010 at 12:10pm

i have tried doing it just like the tutorial says for some reason the foot wont appear but the script appears in its place please check www.swagg.ru

here is my html and the code in that i put in the analytics area

where did i go wrong?

Attachments:

swagg foot 1.html, 8 KB
analytics code.rtf, 1 KB

Permalink Reply by JenSocial on October 27, 2010 at 12:23pm

Hi King,

It's in the HTML - - it's not being rendered as HTML without the default tags like HTML, HEAD, and BODY. I provided the code that works for me, on your discussion on the Creator site.

Hope that helps,

Jen

Permalink Reply by Mujer de vanguardia on February 2, 2011 at 10:08am

Hi, Jen!
I liked this feature, and added to my network. But if the banner is centered and in place, it also appears some text, as shown in the picture (it's a member profile)

www.mujerdevanguardia.ning.com

Permalink Reply by JenSocial on February 2, 2011 at 11:01am

It is your slider code that is causing this, not the tip code. Sorry, wish I could fix it quick, but it could take a while and couldn't do it for free.

Best,

Jen

Permalink Reply by Mujer de vanguardia on February 2, 2011 at 11:04am

Ok, dear Jen. Thank you for your quick answer! =)

Cheers,

Pat

Permalink Reply by Jonathan Wheeler on September 23, 2011 at 12:09am

I know you told me before jen im sorry but how do i remove the ning footer bar so I just have my footer?

Permalink Reply by JenSocial on September 23, 2011 at 12:15am

Hi Alex,

Write it down, LOL. ;-)

#xg_foot {display:none!important;}

Best,

Jen

Permalink Reply by Jonathan Wheeler on September 23, 2011 at 12:28am

Thanks Jen, for some reason earlier today when upgrading logo watermarks etc I messed up my css for my footer I have it nearly fixed so far but now am unable to get the background footer to show up correctly. http://storage.ning.com/topology/rest/1.0/file/get/301598437?profil...

thats the background

Permalink Reply by JenSocial on September 23, 2011 at 12:34am

Can you find where I helped you the last time? And, tip: always back up your Advanced CSS and Custom Code Box to text files.

Is this what you need?

#xg_ad_below_footer {background:url ("http://storage.ning.com/topology/rest/1.0/file/get/301598437?profile=original") no-repeat;}

Calling it a night,

Jen