JenSocial: Social Web Directory and Ning Tips

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

Add Footer like Creators.ning.com (Great example of a JenSocial VIP Tip!)

Add a Footer like Creators.ning.com - - overall look and feel.

A few notes first:

If you are a VIP Member of JenSocial and are using the original VIP custom footer - - want a change using the new footer, please go to VIP Tip for full instructions.
GlamLiving Media Sites: If you are part of GlamLiving Media sites and use tracking code and logo, according to a VIP Member, this footer will hide the logo. I am currently investigating this, and will update in VIP Group.
Time will not allow me to support customization of this tip, except in JenSocial VIP Club. However, you should find it very easy to install.
I used the blueprint of the Footer on Creators - - thanks Ning for inspiring so many NCs. However, the code has been completely rewritten and re-purposed, for ease of installation.

Below is an example of the Footer like Creators.ning.com, and the results of the code from this tip.

Click Image below for Full View.

Writer Chick inspired me to get this done! =) I have documented the HTML as clearly as possible. When you first look at the code, it may look overwhelming. But trust me, it's easy to edit. I have written this so all code goes in the Bottom Instant Ad Box. You will not have to add any code to Advanced CSS or Custom Code Box.

Since I am including the CSS in the Instant Ad Box, it should load faster, not take up space in your Advanced CSS, and hopefully override Custom Profile Page settings.

Instructions:

Edit the code in this text file: FooterLikeCreators_Content_BottomInstantAdBox_HTML_for_TIP.txt and follow the instructions below.
Within the <style> tag you will find all of the CSS. Locate each line that has the numerous asterisks like this example:
/****************************** Copyright Links - Color *****************************/
Change your font attributes, the overall background color, and you are done with the CSS edits. If you like the colors in the screen shot example, you don't need to change anything.
Then, you will see 4 blocks of links. Each header is titled: Column Header #1-Column Header #4 (named "Site Links" as a suggestion for the last column header). Change the Header Titles to suit your needs. Don't change anything else.
Under each Column Header you will see 4 generic links, titled: Link #1-Link #4. Change the link titles and the href URLs to your links.
For Column #4 ("Site Links"), I have added the generic links for: Badges, Report an Issue, and Terms of Service. You do not have to change those 3 href URLs. They will work on your site as-is. I used "About Us" for Link #1 Title, as a suggested link. You will need to change the href URL to your "About Us" page.
Now, change the copyright name to your Site or Company Name. This is located at bottom of code. Please be careful within this script code. I have added script that will change the copyright year to current year. Search for and change: "Ning Network Name Goes Here." TO "Your Site or Company Name". Do not change anything else within copyright code, unless you are an experienced coder.
Save all of your edited code to a text file for future edits. It's always best to edit this type of code in a text file, and then paste into your Instant Ad Box.
Paste all of the edited code into your Bottom Instant Ad Box. Be sure to click on the HTML button.
And you are done!
THE NEXT SET OF INSTRUCTIONS ARE ONLY NEEDED IF YOU HAVEN'T INSTALLED THE BOTTOM INSTANT AD BOX.
Instructions to add Bottom Instant Ad Box:
- Go to: My Network/Settings/Features Layout
- At the bottom of center column find "Instant Ad Boxes:" section, and click Below Footer.
- Click on SAVE.

I could have left out the ability to change the attributes like color, font-family, font-size for: Column Header, Links, background color, etc... It would make it easier to install, but much less control over your look.

For more tips and support of this quality, join us on JenSocial, in our VIP Club for Ning Tips!

I hope you enjoy this tip!

Jen

1 member favorited this

Replies to This Discussion

Permalink Reply by JenSocial on February 7, 2013 at 5:05pm

I really have no idea what's affecting this. If you want, install on your test site. Send me a private message with Admin signin credentials. I'll see if I can find the problem - - if I can do it within 20 minutes. =)

Best,

Jen

Permalink Reply by JenSocial on February 7, 2013 at 6:57pm

Good news! I think we have it. Go to your test site and take a look. I think what happened, you're still on the old Ning Editor. It is adding a float:left to xg_foot. This is all I changed:

I went to your Advanced CSS and added this - - at very top so you can easily find it:

#xg_foot {
float:none!important;
}

Keep me posted,

Jen

Permalink Reply by The York Paranormals on February 7, 2013 at 8:44pm

You're the best Jen. Thank You Bunches. I am absolutely thrilled with the results. You Rock!

Permalink Reply by JenSocial on February 8, 2013 at 1:33pm

Great! Happy it worked out. Thank you for the feedback.

Permalink Reply by The York Paranormals on February 14, 2013 at 2:37am

I am dropping by to say thanks again. The new footer is in place and I did a special thank you to you in it which links back to JenSocial. I will slowly be modifying it as I decide how I want the links to be, but it is active and looks great thanks to your help.

Permalink Reply by IntroAsian.com on January 24, 2014 at 6:53pm

Hi Jen

I added this to my site introasian.com and all is good....just couple questions

1) Im not a html/css expert......but can I tighten up the vertical spacing between the bottom of my page background and top of the footer links? Also tighten up the spacing between Footer Headers and the links?

2) Since this is added into the ad box, do you know if google ignore these links when crawling the pages?

Thank you

Permalink Reply by JenSocial on January 24, 2014 at 9:36pm

Hi IntroAsian,

I went to your site and started looking at the CSS. I was able to tighten up the footer box with bottom of your content, but can't look at the CSS for the space between the header titles and links. Your site keeps locking up my page for some reason. Be careful not to cover up your Edit button for the Ad Box:

#xg_ad_below_footer {
margin-top: -20px;

}

Google should find the links like any content on the page.

Best,

Jen

Permalink Reply by IntroAsian.com on January 24, 2014 at 10:08pm

Thank you Jen...that worked nicely!! :)

So the spacing between Titles and links is controlled in the CSS and not the added code?

strange your page was getting locked up....havent heard any issues like that from my members.

Wanted to thank you again for your site....usually find all my answers here.

I know with this 3.0 thingy grrr.....ill be here a lot more in the near future

Have a great weekend!

Permalink Reply by JenSocial on January 25, 2014 at 10:23am

I could get into today. Try this for spacing between the header title and links. On this one, you need to find the old code if possible, and replace the one line.

#footer h3 {

padding: 5px 0 0 35px !important;

}

Nice weekend to you, too!

Permalink Reply by IntroAsian.com on January 25, 2014 at 2:20pm

Yes ... feel this looks better now for my site...Thank you again Jen!

Permalink Reply by Harringay Online on July 26, 2016 at 11:28am