JenSocial: Social Web Directory and Ning Tips

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

Add Google Translate to Ning Bar

This is an old tip, revamped. In the past I offered a tip that added Google Translate to top of site using absolute position. And that works fine, except when zooming in/out. This should work better in regards to placement, whereas it will insert the Google Translate code before the Ning Bar Menu Tabs.

Instructions:

Add all code to your Custom Code Box via: My Network/Tools/Custom Code
Save.
If Google Translate gets in the way based on other elements in your Ning Bar, you can adjust the float:left. Locate this code below: div style="float:left;padding-right:20px; You can change the float:left to float:right;padding-left:20px;

<style>
#google_translate_element {height:26px!important;margin-top:3px;}
.goog-te-gadget-simple {padding:0px!important;height:24px!important;}
.goog-te-gadget img {float: left;}
.goog-te-menu-value  {margin-top:-5px!important;}
</style>

<!-- Google Translate -->
<div id="tmp_translatenbar" style="display:none;">
<div id="google_translate_element"></div>
<script type="text/javascript">// <![CDATA[
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'en',
layout: google.translate.TranslateElement.InlineLayout.SIMPLE
}, 'google_translate_element');
}
// ]]></script>
<script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit" type="text/javascript">// <![CDATA[

// ]]></script>
</div>
<script type="text/javascript">
if (typeof(x$) != 'undefined') {
x$("#xn_bar_menu_tabs").prepend('<div style="float:left;padding-right:20px;" id="translatenbar"></div>');
var t_translatenbarCode = document.getElementById('tmp_translatenbar');
var translatenbarCode = document.getElementById('translatenbar');
translatenbarCode.innerHTML = t_translatenbarCode.innerHTML;
}
</script>
<!-- End Google Translate -->

Enjoy,

Jen

2 members favorited this

▶ Reply to This

Replies to This Discussion

Permalink Reply by Dr. Husky on March 31, 2013 at 1:21pm

Really thanks Jen and TJ @ jQueryHelp !! :)

Very sorry for not replying. I had to be away for several days but now I'm back. infinite thanks. Code does not appear because he was testing at the experimental site. Tomorrow I'll put it on my network.

For now warn that it is not a matter of css styles because deleting all my CSS and continuous without being the translator.

Really, my heartfelt thanks. :)

▶ Reply

Permalink Reply by Dr. Husky on March 31, 2013 at 2:27pm

OK, I've added the tip but still not seen.
Greetings!

▶ Reply

Permalink Reply by Themes - Rosas Negras on January 7, 2014 at 8:02am

In my site i see 3 translators can I get help thanks in advance

▶ Reply

Permalink Reply by JenSocial on January 7, 2014 at 2:05pm

No idea why. I would need to see the code installed, and maybe I can see why this happened.

Best,

Jen

▶ Reply

Permalink Reply by Themes - Rosas Negras on January 11, 2014 at 8:05am

<style>
#google_translate_element {height:26px!important;margin-top:3px;}
.goog-te-gadget-simple {padding:0px!important;height:24px!important;}
.goog-te-gadget img {float: left;}
.goog-te-menu-value  {margin-top:-5px!important;}
</style>

<!-- Google Translate -->
<div id="tmp_translatenbar" style="display:none;">
<div id="google_translate_element"></div>
<script type="text/javascript">// <![CDATA[
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'en',
layout: google.translate.TranslateElement.InlineLayout.SIMPLE
}, 'google_translate_element');
}
// ]]></script>
<script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit" type="text/javascript">// <![CDATA[

// ]]></script>
</div>
<script type="text/javascript">
if (typeof(x$) != 'undefined') {
x$("#xn_bar_menu_tabs").prepend('<div style="float:left;padding-right:20px;" id="translatenbar"></div>');
var t_translatenbarCode = document.getElementById('tmp_translatenbar');
var translatenbarCode = document.getElementById('translatenbar');
translatenbarCode.innerHTML = t_translatenbarCode.innerHTML;
}
</script>
<!-- End Google Translate -->