0:00
Hi everyone, welcome to Kitu Blogging and in this video I will show you how you can add a Google Translate button to your header menu
0:07
So when I click on this button, it will show the number of languages where you can translate this page
0:14
So let me just quickly open a blog post here and let me just scroll down because this is lazily loaded
0:21
So it will load after some times. So let's click on the Google Translate button and let's change it to Hindi
0:30
And as you can see, the page is automatically changed to Hindi language
0:34
Now let's click on again and let's change it to Gujarati. And you can read the web page in Gujarati
0:40
So in this way the Google Translate button works and you can basically add any language here
0:46
by using the HTML ISO language code. Suppose you want to add Assamich, then you can just type AS as a language code
0:56
And if you want to show Chinese, then you can add ZH. or you can say if you want something like French then you can add FR so that it will
1:07
translate that page to French so let me just quickly add this Google Translate
1:15
button to my main website and I will show you how you can add this Google Translate button in your website also So let me just quickly switch to the TechLeep website and let me just open the web page
1:29
first and as you can see there is no translate button here
1:33
So for this I will just go to the theme section and I will take a backup fast because if you
1:39
are doing it in your live site then you should take a backup fast
1:43
And after that you need to click on the edit. HTML here and you can find this position by clicking on the inspect button
1:53
So let me just quickly do that and let me just change it to a responsive one like this
1:59
And let me just inspect it and this is the dark mode
2:05
So and here this is the search level. So let me just click on this wizard and I will click on the header one
2:14
And as you can see, this is the header menu. So let me just scroll down and these are the header links like About Us and charge blog page
2:25
like that. So let me just scroll down to the bottom and let me just find that icons
2:33
Hedor search search form and search level these are these icons So this one dark more button charge button So this is the dog mode button and the search button
2:47
So I want to add a Google Translate button here. So what I can do is just I will add the HTML code of that Google Translate button
2:56
Suppose I want to add the translate button after the search button
3:00
Then I will hit Enter here and I will copy the HTML code from here
3:06
And I will paste the HTML code like this. Now I will scroll down all the way to the bottom of this theme code and I will find the closing
3:19
body tag and I will paste the CSS and JavaScript code. So let me just quickly copy this code and I will paste it just above the closing body tag
3:34
Okay, we have added the HTML, CSS and JavaScript code and you can also copy the CSS code
3:41
and paste it just before the B-skin tag. But in that case, don't use the style tag
3:48
So let me just quickly save this code. All right the code is now saved so let me just close the developer tool and let me just refresh this page And when I scroll the page it will show the translate button So let open a blog post here And as you can see this is the blog post about how to launch
4:10
a blog that can develop into a business. So let's click on the Google Translate button and
4:15
I will change it to Hindi. And as you can see, it will translate the page into a Hindi language
4:22
So you can easily read the blog post in your native Hindi language. So this is how so you can
4:27
is how simple to add a Google Translate button. And I'm talking about the language code
4:33
So currently it is showing a limited number of languages. So if you want to add more languages, then copy the language code from this website and
4:43
then you need to find this option language code. And here it is included language
4:50
And you can see that there is English, E, and Hindi, H, and there is GU, B and Tia
4:57
Tamil TE Telugu. So these are the language code. So you can just add the language code by adding comma in this position and the language will
5:06
be added to your Google Translate button. So I hope this video helps you add a Google Translate button to your blogger website and if you
5:14
have any queries regarding this, then you can ask me in the comment section
5:19
And if you found this video helpful, then make sure to hit the like button
