Website Language Translator Google Plugin Tutorial Add Code and Style

Learn to add and style the Google Website Language Translator Plugin. This allows people to view your web pages in any language they choose, in any browser software they use. Stick the gadget into a PHP include template if you have PHP layout template regions.

---

Closed Caption:

haha today we're going to demonstrate
how simple it is for you as a website
developer to offer your visitors the
option of changing your web pages to
their preferred language you're not
limited to just a few popular languages
you can have all languages
the google chrome browser offers this to
its users by default that the user hits
a foreign language web page but firefox
and internet explorer do not yet
performed this action by default for
their users many people using firefox
internet explorer are not presented with
any options of changing your web page to
their preferred language you might want
to make sure that that option is
available to everyone no matter what
browser they use
before we get into the lesson let's show
you a finished product of what you'll
get
after the lesson so here i am in my Adam
Corey com website and i'll go to select
language and I can change it to spanish
you can change to any language you want
and it's just a couple of lines of code
and only take you a few minutes
the first step is the sign in to your
Google account if you're not already
signed in to google the next step is to
type google translate into the google
search bar
now click the google translate link and
in the middle of the page you see down
here it says google translate for
business
just hit website translator and that's
how you can get access to the plugin
I've already established 14 develop PHP
dot com
but what you want to do here if you
don't have any sites established here is
hit add new website and in google says
well played let's do this
and what is the URL of your website my
website which is Adam Corey calm and
then the next question is what is the
original language of your website
- english so I'll press next now here's
where we can adjust the plug-in settings
it says set the options you want for
translating your website you can change
these options later - so translate
languages also i'll just leave it as all
languages but you can set specific
languages if you only want for instance
French Spanish Italian popular European
languages or you can set whatever you
want I'll just leave it on all languages
and then display mode you can set is
vertical and then it has little powered
by google translate words underneath it
the drop-down horizontal where the words
are on the side or drop down only where
it's only the drop-down and i'm going to
show you guys how you can style this
drop-down this element now i'll leave
this checked here where it's
automatically displayed translation
banner to users speaking languages other
than the language of your page so a
little banner will come up at the very
top of the browser communicating to just
those people and you can also click here
to add your analytics link up if you
want to link up to your analytics for
that site and then once I have all the
plug-in settings i want i just get code
says ready to roll now let's talk code
paste this code into your website
okay here i am in the index HTML page
from my website and i'll go to view the
code so it says place this meta tag
before the closing head tag so i'll grab
this meta tag right here and I'll put it
into place and actually i noticed that
it works
see here's my closing head tag i'll put
that meta tag they suggested right there
and I noticed that this works the
plug-in will still work if you don't put
this meta tag in the place but this meta
tag is for relating unique content ID to
google translate for you
like I said I noticed that the plug-in
works without adding this meta tag at
its basic level for translating a web
page
so now we grab the code that says place
this snippet where you'd like to display
the website translator plug-in on your
webpage so i'll grab that snippet of
code
press ctrl-c to copy it and I'll go
right under my div top here so let me
collapse that div top so it doesn't get
in our way and i'm going to put a new
div into place here
put the closing div tag then go down a
couple of lines and inside of that div
container
i'm going to add the code that google
offered me in the translator plugin
now since I have the meta tag in place
now and the code that they suggested let
me press ctrl s and all ftp this file
onto my server and run it live in a
browser
okay here i am on my web page and you
can see that the plug-in is sitting
right here
first of all I don't want it all the way
on the edge of my page i want to tucked
in
maybe around this area somewhere right
there
so let's go back into the code and
here's the div that contains all the
code that google gave me
I'll give this div some style I'll make
its with maybe eight hundred and fifty
pixels and i'll give it a margin of 0
pixels and auto so it will have a 0
pixels for the top and bottom margins
and auto for the left and right margins
that way
the 850 wide container will be centered
directly in the page if we go back into
the browser and we refresh will see that
it's sitting where I wanted its it now
because it's contained in an 850 wide
give right here there's an 850 wide give
that is set to Center in the page so the
plug-in is just sitting on the left side
of that
850 wide give now for really
understanding how to style this thing up
I need you guys to go into Google Chrome
or any browser that lets you inspect an
element that your mouse is also put my
mouse over the element right click
inspect element and then a window is
going to pop up a window popped up and
what it shows me is all of the element
names
so you can see that i have my google
translate element div here and then
inside of it this all kind of other
classes and ID's that I can target for
instance if I wanted to change the color
of the text that says select language in
between that span element
I would just target this a class of
google te menu value and target its
child span element
so let me show you what I mean I'll
target the google te menu value
class so in my web page code i can just
go into my style my CSS for the web page
and target the element with a class of
google tea menu value
goog tea menu value open close curly
braces and we wanted to target the span
element inside of that because that's
where those letters reside
so I'm going to target these fan element
inside of that a tag they have and i'll
change its color to anything that I want
let's make it a crazy color so you can
really see the difference press ctrl s
and then ftp your file and then refresh
your web page so you can see now i have
like a hot pink or magenta color as the
select language text
so basically what I did was I went into
the code i used google chrome to inspect
element and what that did is it shows me
all of the things that were rendered
dynamically into that element by google
basically it shows you all the code that
google places into that div dynamically
and you can go through and target
all of these things that you want now
i'm going to target this class of google
te gadget simple and that's also a div
that's dynamically rendered at run time
that you really can't see unless you
inspect the element
so that's good te gadget simple press
ctrl s an ftp this up to the web
now let's give this a refresh you can
see we have nice rounded edges on that
element now and that div is what we
target for all that you can also give
that a background if you want that to be
a black background with the pink text on
it and you might not even want that
underlying see how the ugly black
underlying comes into play when I put my
mouse over it
I think we can get rid of that so i'll
try and get rid of that and make the
background for the whole element black
and see what happens
so what I'll do is all target the
element again make another rule right
above it but don't target its child span
this one's going to target the a
directly i'm going to make
text-decoration:none that way it doesn't
have any underlying effect when the
mouse goes over
let's also give this like we said a
background color of black and we can
change the text color to a nice light
blue or something like that may be right
there
press ctrl s an ftp this up to the web
so you see there and you can also target
the borders of that element
maybe you want to give it a little bit
of padding so let's go here and say
padding
maybe 7 pixels and I can also change the
border styles if I want
so if i refresh the page now we'll see a
little bit more padding around
everything which makes it all look a
little more cushion and comfortable and
I think we got rid of the underlying
effect on the text and the arrow
so now I'll just leave it up to you guys
to find the ways to style this
I frame element that pops up because you
can go into the code and see everything
you can see right here the iframe right
there class of google te menu I frame
and this other elements you can play
with styling all about the google
translate website plugin
so now let's use it again and let's
change this to arabic now it's very
important for you to keep in mind that
you can also put this code into your PHP
include files that way you just have to
add it once and it will appear on
thousands of dynamic pages ok so i hope
you found this tutorial helpful and I'm
not going to be offering any source code
you guys can just watch the video and
get your code from Google like I did and
I showed exactly everything I did in the
code you can just copy it straight from
the video if you want to use the CSS
that I applied and things like that but
everything I grabbed was pretty much
would google offered me