Adding Google Translate to your Ning site - With NO pop ups or hover over pop ups!

Here is what I did. First embed the following Google Translate code into one of two places. I first put it on my side bar as suggested by someone else but changed it becuase on the invite page there is no side bar. Not a big deal but still if you want every single page to translate you need to put it some where other than the side bar. I have listed both directions below, pick which one works for you.

Step 1.a = Change Language Box on sidebar of website

Step 1.b = Change Language Box at top of website

Directions:

Step 1.a - If you want it in the side bar this is what you do: Log into Ning. Click on My Network from your navigation bar. From the list of links on the left hand side click on Features Layout. Drag a Text Box onto your side bar. I recommend somewhere at the top so people see it right away. At the bottom click save. Now click Main from your navigation bar. Locate the text box on your side bar. Click edit on the text box. Copy and paste the following code into the box:

<div id="google_translate_element"></div>
<script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({pageLanguage: 'en', layout: google.translate.TranslateElement.FloatPosition.TOP_LEFT, multilanguagePage: true}, 'google_translate_element');
}
</script><script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit">
</script>

Click save!

Or if you would rather add it to the top of your page as I have done, skip step 1.a and do step 1.b:

Step 1.b: To add the change language box to the top of your page do the following. Log into Ning. Click on My Network from your navigation bar. From the list of links on the left hand side click on Features Layout. Toward the bottom of the page you have the option of adding Instant Ad Boxes. Click the box for above header and click save. Now click on the main link on your navigation bar. At the top of the page on the right hand side you will see an edit button. Click it. Copy and paste the following code:

Now to remove the pop up translating bar that pops up at the top of the page every time you choose a language translation and the hover over pop ups that appear when you hover your mouse over translated words, plus the Google Translate Code that they ask you to add to your CSS, you will need to do the following:

Step 2: On the very top of your ning page in the upper left hand corner there are two icons, the one on the right is your appearance tab.Click this icon. A large grey bar will drop down and open your design studio. On the left hand side there are tabs. Click on the last one which is advanced. In the white box: Add custom CSS. Copy and paste the following code:

.goog-te-banner-frame.skiptranslate {
    display: none !important;
} body { top: 0px !important; }
.goog-tooltip {
    display: none !important;
}
.goog-tooltip:hover {
    display: none !important;
}
.goog-text-highlight {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

<meta name="google-translate-customization" content="ef276d42fdac9ac1-97ee542f221dbae9-g1bbca3471367fe77-25"></meta>

Click Publish. Your Done! That' s it ;0) Now your Ning Website has the language options you want.

Favorite

0 members favorited this

▶ Reply to This