Hello! Welcome to Tech Ankur. this time the admin will explain how to create an option mode translator widget on Blogger
If you are curious about our discussion this time, let's just discuss it together
Widget Translate mode option
Like the previous translate widget that the admin posted, this time the translate mode option widget on Blogger is a feature for translating pages quickly, you can decide for yourself whatever language you want to display in this option translate mode widget.
The way this translator mode option widget works is that if it is activated, all the top text on the blog page will first be translated, while to activate translate, just choose the language you want to translate and then automatically all your pages that contain text in it it will be translated directly
Display Example
If you are curious about the display example of the selected mode translator widget on Blogger, please check it out using the button below, friend
You can see the demo here⤵
Important!If the translate display doesn't work, because the admin also uses the same source code on this blog, please just try it on your blog template, friend.
Ways of making
Now it's time for admin to explain how to create translate mode option widget on blogger. Please read and follow all instructions mentioned below by the administrator.
Step 1: First of all Login to your Blogger Dashboard.
Step 2: On Blogger Dashboard, click Theme.
Step 3: Click the arrow down icon next to 'customize' button.
Step 4: Click Edit HTML, you will be redirected to editing page.
Step 5: Now search the code <head> and paste the following javascript Code just above to it.
<script src='https://cdn.jsdelivr.net/gh/rahcode-ui/icloudice@dewa/users/js/rahTrans.min.js'/>
Step 6:Now search for </body> tag in your theme. It must be located on the bottom of your template.
Step 7:Copy and paste the below code just above </body> closing tag.
<style>.rahTransCl::after{content:'\2715';font-size:14px}</style>
<input class='rahTransI hidden' id='rahTransI' type='checkbox'/>
<div class='rahTransW'>
<div class='rahTransH' data-text='Translator'>
<label class='rahTransCl' for='rahTransI'/>
</div>
<div class='rahTransP'>
<div class='googleTrans hidden' id='_google_translator_element'/>
</div>
</div>
<label class='fCls' for='rahTransI'/>
<script>/*<![CDATA[*/
var rahBahasaKu53 = "id"; /* Change with your bahasa */
var rahBahasaMu53 ="en,hi,gu,bn,ta,te,mr,ar,ne,zh-CN,id,ur,th,tr,vi,ja,ko,tl"; /* Manage your bahasa */
/*]]>*/</script>
<script src='https://cdn.jsdelivr.net/gh/rahcode-ui/icloudice@dewa/users/js/rahLazyTrans53.js'/>
Note!Don't edit or change the code above (except the JavaScript code to manage your blog's language) or the translator widget function will no longer work, and if you want to know the complete language code, please check here
Step 8: Now search for <!--[ Google Translate button ]--> tag in your theme. It must be located on the bottom of your template.
Step 9: Now remove all the codes below it and paste the code given below.
<label class='rahTrans tIc bIc b-Ic' expr:aria-label='data:item' for='rahTransI' onclick='vibRate(53)'><b:include name='translate-icon'/><span id='google_translate_element'/></label>
Please use <label class='rahTrans' for= 'rahTrm' function or add class='rahTrans for= 'rahTransI' to your desired translate button
Information!The code above is only an example of a translate button that uses for='rahTransl' as a function to display the translator widget
Step 10: Then Save
That's done!
Copyright: @Tech Ankur
Source:
www.icloudice.com