Language Translate using Google Translator but No Google Lable and Top Bar

Translate your web site in Multi Language using Google api.
But You can Hide google Lable from your Wen site.

Html Dropdown of Language:

<li class=”ct-language”>Language <i class=”fa fa-arrow-down”></i>
<ul class=”list-unstyled ct-language__dropdown”>
<li><a href=”#googtrans(en|en)” class=”lang-en lang-select” data-lang=”en”><img src=”https://www.solodev.com/assets/google-translate/flag-usa.png” alt=”USA”></a></li>
<li><a href=”#googtrans(en|es)” class=”lang-es lang-select” data-lang=”es”><img src=”https://www.solodev.com/assets/google-translate/flag-mexico.png” alt=”MEXICO”></a></li>
<li><a href=”#googtrans(en|fr)” class=”lang-es lang-select” data-lang=”fr”><img src=”https://www.solodev.com/assets/google-translate/flag-france.png” alt=”FRANCE”></a></li>
<li><a href=”#googtrans(en|zh-CN)” class=”lang-es lang-select” data-lang=”zh-CN”><img src=”https://www.solodev.com/assets/google-translate/flag-china.png” alt=”CHINA”></a></li>
<li><a href=”#googtrans(en|ja)” class=”lang-es lang-select” data-lang=”ja”><img src=”https://www.solodev.com/assets/google-translate/flag-japan.png” alt=”JAPAN”></a></li>
</ul>
</li>

    function googleTranslateElementInit() {
      new google.translate.TranslateElement({pageLanguage: 'en', layout: google.translate.TranslateElement.FloatPosition.TOP_LEFT}, 'google_translate_element');
    }

	function triggerHtmlEvent(element, eventName) {
	  var event;
	  if (document.createEvent) {
		event = document.createEvent('HTMLEvents');
		event.initEvent(eventName, true, true);
		element.dispatchEvent(event);
	  } else {
		event = document.createEventObject();
		event.eventType = eventName;
		element.fireEvent('on' + event.eventType, event);
	  }
	}

	$('.lang-select').click(function() {
	  var theLang = jQuery(this).attr('data-lang');
	  $('.goog-te-combo').val(theLang);

	  //alert(jQuery(this).attr('href'));
	  window.location = $(this).attr('href');
	  location.reload();

	});
< script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit">
 

.ct-language__dropdown{
	padding-top: 8px;
	max-height: 0;
	overflow: hidden;
	position: absolute;
	top: 110%;
	left: -3px;
	-webkit-transition: all 0.25s ease-in-out;
	transition: all 0.25s ease-in-out;
	width: 100px;
	text-align: center;
	padding-top: 0;
  z-index:200;
}
.ct-language__dropdown li{
	background: #222;
	padding: 5px;
}
.ct-language__dropdown li a{
	display: block;
}
.ct-language__dropdown li:first-child{
	padding-top: 10px;
	border-radius: 3px 3px 0 0;
}
.ct-language__dropdown li:last-child{
	padding-bottom: 10px;
	border-radius: 0 0 3px 3px;
}
.ct-language__dropdown li:hover{
	background: #444;
}
.ct-language__dropdown:before{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	margin: auto;
	width: 8px;
	height: 0;
	border: 0 solid transparent;
	border-right-width: 8px;
	border-left-width: 8px;
	border-bottom: 8px solid #222;
}
.ct-language{
	position: relative;
  background: #00aced;
  color: #fff;
  padding: 10px 0;
}
.ct-language:hover .ct-language__dropdown{
	max-height: 200px;
	padding-top: 8px;
}
.list-unstyled {
    padding-left: 0;
    list-style: none;
}
.goog-te-banner-frame.skiptranslate {
    display: none !important;
    } 
body {
    top: 0px !important; 
    }

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *

Show Buttons
Hide Buttons
Social Media Auto Publish Powered By : XYZScripts.com