In this tutorial we will learn how to make website in multi language,in this tutorial i will implement google translator API.
include this library before body close or you can also include it before close head tag.
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
then write this function after including library
<script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({pageLanguage: 'en',includedLanguages: 'en,hi',layout: google.translate.TranslateElement.InlineLayout.HORIZONTAL}, 'google_translate_element');
}
</script>
<div id="google_translate_element"></div>
use this line where you want to show dropdown menu for language
pageLanguage: en this is default language
includedLanguages: this is optional if you will provide any specific language it will show all language,and you can specify particular language i.e hi,fr etc
HORIZONTAL: here you can also pass SIMPLE for dropdown style
you can also style language dropdown here some styles are:
.goog-logo-link {
display:none !important;
}
.goog-te-gadget{
color: transparent !important;
}
.goog-te-banner-frame.skiptranslate {
display: none !important;
}
body {
top: 0px !important;
}
div#goog-gt-tt {
padding: 10px 14px;
display: none !important;
}
include this library before body close or you can also include it before close head tag.
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
then write this function after including library
<script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({pageLanguage: 'en',includedLanguages: 'en,hi',layout: google.translate.TranslateElement.InlineLayout.HORIZONTAL}, 'google_translate_element');
}
</script>
<div id="google_translate_element"></div>
use this line where you want to show dropdown menu for language
pageLanguage: en this is default language
includedLanguages: this is optional if you will provide any specific language it will show all language,and you can specify particular language i.e hi,fr etc
HORIZONTAL: here you can also pass SIMPLE for dropdown style
you can also style language dropdown here some styles are:
.goog-logo-link {
display:none !important;
}
.goog-te-gadget{
color: transparent !important;
}
.goog-te-banner-frame.skiptranslate {
display: none !important;
}
body {
top: 0px !important;
}
div#goog-gt-tt {
padding: 10px 14px;
display: none !important;
}
No comments:
Post a Comment