How to make a multi language webpage and custom translation Tool bar for your website

Posted by Mithun on

New Updated
Modify and Change your website Multi-language support. How to make your website to the multi-language website, follow the few steps and create a multi-language website and create Language toolbar. Make this tool Support 100+ Language. Just copy and paste and make a tool. This tool uses separate language for separate pages, Customise and recommended language-country code. so let's get started.

Translator Tool

Make a form style, simple HTML tag no require javascript. the start in <form> to target value of language translation page. Hole the all sequence input<form>, values, options, button, etc.
  1. The weblink uses for the target language to translate your website texts. action="https://translate.google.com/translate"
  2. Input for the user, type="hidden" not since the format or change the format data code. Use for select dropdown options menu and hold the all option hide, click/Tap then dropdown and select option.
  3. Here use three of language code just tutorial, use all language-country code then confuse a beginner, go to the list of Language Country Code.
  4. Use value="" for a country language code example: "en" for English.
  5. The value="en" point your website main language, so your website made or post another language lets change the country language code. Example: Are you making a used Hindi language for your website simple replace value="hi"
  6. The name="u" point your website or webpage. so change the page location. Example: https://example.com/page1 (page1 or page1.html, page1.php, page1.asp, page1.jsp, page1.cms etc.).


Now copy and past where to use
<body>
<h1>Please Chose your lnguage</h1>

<form action="https://translate.google.com/translate" target="_blank">
<input type="hidden" name="sl" value="auto">Read
<select type="text" name="tl">
<option value="">Your Own Language</option>
<option value="hi">Hindi</option>
<option value="te">Telugu</option>
<option value="es">Spanish</option>
</select>
<input type="hidden" name="js" value="y">
<input type="hidden" name="prev" value="_t">
<input type="hidden" name="hl" value="en">
<input type="hidden" name="ie" value="UTF-8">
<input type="hidden" name="u" value="https://example.com/page">
<input type="hidden" name="edit-text" value="">
<button type="submit" value="Submit">Translate</button>
</form>
</body>


Preview

Please Chose your language
Read

Design the Options dropdown Menu and Button with Responsive Design

The Button and dropdown options menu to design using the pre-build Bootstrap firmware
First plugin the bootstrap firmware on your website index or main page <head> section.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">


Code

Copy and Paste the code where to use
<div class="container">
<h2>Post Title</h2>
<p>The Translator page create for you. Please select your language</p>
<form class="form-inline" action="https://translate.google.com/translate" target="_blank" rel="nofollow">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-globe"></i></span>
<input type="hidden" name="sl" value="auto">Read
<select type="text" name="tl" class="form-control">
<option value="">Your Own Language</option><option value="hi">Hindi</option>
<option value="te">Telugu</option>
<option value="es">Spanish</option>
</select>
<input type="hidden" name="js" value="y">
<input type="hidden" name="prev" value="_t">
<input type="hidden" name="hl" value="en">
<input type="hidden" name="ie" value="UTF-8">
<input type="hidden" name="u" value="https://www.google.com/doodles/about">
<input type="hidden" name="edit-text" value="">
<div class="input-group-btn">
<button class="btn btn-default" type="submit"><i class="fa fa-language" aria-hidden="true"></i></button>
</div>
</div>
</form>
</div>
Plugin JS Library index or main page on the <body> section end of the page.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


Preview

Please Choose your Language



 Post Title

The Translator page creates for you. Please select your language
Read

You get the new Updates

Comments

Post a Comment

Thank you to visit my blog. Every Week New post coming for you. My blog are you impress please like and share your friends.
Thank you!