[Tutorial] Google Translate

Go down

[Tutorial] Google Translate Empty [Tutorial] Google Translate

Post by System32 on September 3rd 2018, 3:52 pm

GOOGLE TRANSLATE TUTORIAL

I am not sure if this is done before, but it is not, let's see how it works.

Step 1
AP > Display > Templates > General > overall_header
Here, look for already created navbar list.
It should look like this:
Code:
<ul class="navbar navlinks{NAVBAR_BORDERLESS}">
    <li>{GENERATED_NAV_BAR}</li>
    <li id="google_translate_element"></li>
</ul>
You will notice that my code is different from yours. So, simply add this part under first generate nav bar, as a list element:
Code:
<li id="google_translate_element"></li>

On the top of the page, you will see lot's of scripts, so let's add our own:
Code:
<script type="text/javascript">
function googleTranslateElementInit() {
  new google.translate.TranslateElement({pageLanguage: 'en', layout: google.translate.TranslateElement.InlineLayout.SIMPLE}, 'google_translate_element');
}
</script>
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
Great job so far. Bear in mind that I put the drop menu here, you can add this wherever you want. This was easy way for my tutorial. Save this template, and confirm it afterwards.

Step 2
How does it look like?
[Tutorial] Google Translate Screenshot_1
I know, I know, it is ugly as hell. But, it is up to you to change CSS as you want it. This tutorial does not cover that. As you know, default language for forums is English. I will pick Spanish here and let you see how translation work.
[Tutorial] Google Translate Screenshot_2

Final result looks like this:
[Tutorial] Google Translate Screenshot_3
And the forum itself:
[Tutorial] Google Translate Screenshot_4

Hope you guys like this tutorial if it has not done before.

Credits to Google translate scripts - I simply integrated this into Forumotion
System32
System32
Forumember

Male Posts : 93
Reputation : 13
Language : Serbian,English

View user profile http://paganism.forumotion.com/

Back to top Go down

[Tutorial] Google Translate Empty Re: [Tutorial] Google Translate

Post by SarkZKalie on September 3rd 2018, 6:27 pm

Thank you for sharing us this!

For default overall_header template, I'll provide some example for adding Google Translate based on your forum version
  • PunBB & Invision :

Code:
<ul class="clearfix">
      <li>{GENERATED_NAV_BAR}</li>
      <li id="google_translate_element"></li>
</ul>
  • PhpBB3 :

Code:
<ul class="linklist navlinks{NAVBAR_BORDERLESS}">
      <li>{GENERATED_NAV_BAR}</li>
      <li id="google_translate_element"></li>
</ul>
  • PhpBB2 :

Code:
<tr class="linklist navlinks{NAVBAR_BORDERLESS}">
      <td align="{MENU_POSITION}"{MENU_NOWRAP}>{GENERATED_NAV_BAR}</td>
      <td id="google_translate_element"></td>
</tr>


[Tutorial] Google Translate Sarkzk10
SarkZKalie
SarkZKalie
Support Moderator
Support Moderator

Male Posts : 1173
Reputation : 192
Language : English

View user profile https://www.rotavn.xyz/

Back to top Go down

[Tutorial] Google Translate Empty Re: [Tutorial] Google Translate

Post by System32 on September 3rd 2018, 6:36 pm

Thanks for completing it. I did it only for one version I was testing it.
System32
System32
Forumember

Male Posts : 93
Reputation : 13
Language : Serbian,English

View user profile http://paganism.forumotion.com/

Back to top Go down

[Tutorial] Google Translate Empty Re: [Tutorial] Google Translate

Post by YoshiGM on September 6th 2018, 3:39 am

I remember this using a Javascript and the translation option scrolling in the forum.
If you don't want to see in all the page, this will be a good option.

Well done!
YoshiGM
YoshiGM
Forumember

Male Posts : 919
Reputation : 120
Language : Spanish & English
Location : Mexico

View user profile http://asistencia.foroactivo.com/u21373

Back to top Go down

Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum