Add Translation Option on Your Blogger Website

কেনো ওয়েবসাইটে Translate অপশন যুক্ত করা প্রয়োজন?

আপনার ওয়েবসাইট দেশ-বিদেশের বিভিন্ন ভাষার বিভিন্ন শ্রেণীর মানুষ ভিজিট করে, কিন্তু প্রত্যেকের জন্য আলাদা ভাষায় কনন্টেন্ট লেখা সম্ভব না। তাই বলে কি অন্য ভাষাভাষীর লোকজন আমাদের লেখা কনন্টেন্ট পড়তে পারবে না?

পারবে কারন আমরা ভিন্ন ভিন্ন ভাষায় কনন্টেন্ট লিখতে না পারলেও আমাদের ওয়েব সাইটে Translate অপশন টি খুব সহজে যুক্ত করতে পারি। যার মাধ্যমে ভিজিটর এক ক্লিকেই Translate করে নিতে পারবে নিজের ভাষায়। তাহলে আসেুন দেখে নিই কিভাবে ব্লগারে Translate অপশন যুক্ত করতে হয়।

প্রথম স্টেপ

নিচের কোডটি Copy করুন এবং ব্লগারের Theme সেকশনের Edit Html ক্লিক করে কোডের মধ্যে ক্লিক করে Ctrl + F ক্লিক করে </b:skin সার্চ করুন তারপর </b:skin এর ঠিক উপরে কোডটি past করুন।

#google_translate_element{padding:0;margin-right:5px} .goog-te-banner-frame.skiptranslate,.goog-te-gadget-simple img,img.goog-te-gadget-icon,.goog-te-menu-value span{display:none!important} .goog-te-gadget-simple .VIpgJd-ZVi9od-xl07Ob-lTBxed span, .VIpgJd-ZVi9od-ORHb-OEVmcd {display: none;} .goog-te-menu-frame{box-shadow:none!important;margin:5px} .goog-te-gadget-simple{background-color:transparent!important;background:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20,5H10.88L10,2H4A2,2 0 0,0 2,4V17A2,2 0 0,0 4,19H11L12,22H20A2,2 0 0,0 22,20V7A2,2 0 0,0 20,5M7.17,14.59A4.09,4.09 0 0,1 3.08,10.5A4.09,4.09 0 0,1 7.17,6.41C8.21,6.41 9.16,6.78 9.91,7.5L10,7.54L8.75,8.72L8.69,8.67C8.4,8.4 7.91,8.08 7.17,8.08C5.86,8.08 4.79,9.17 4.79,10.5C4.79,11.83 5.86,12.92 7.17,12.92C8.54,12.92 9.13,12.05 9.29,11.46H7.08V9.91H11.03L11.04,10C11.08,10.19 11.09,10.38 11.09,10.59C11.09,12.94 9.5,14.59 7.17,14.59M13.2,12.88C13.53,13.5 13.94,14.06 14.39,14.58L13.85,15.11L13.2,12.88M13.97,12.12H13L12.67,11.08H16.66C16.66,11.08 16.32,12.39 15.1,13.82C14.58,13.2 14.21,12.59 13.97,12.12M21,20A1,1 0 0,1 20,21H13L15,19L14.19,16.23L15.11,15.31L17.79,18L18.5,17.27L15.81,14.59C16.71,13.56 17.41,12.34 17.73,11.08H19V10.04H15.36V9H14.32V10.04H12.36L11.18,6H20A1,1 0 0,1 21,7V20Z' fill='%23161617'/%3E%3C/svg%3E") center / 12px no-repeat;background-size: 20px 20px;display:inline-block;font-weight:400;line-height: 1.8;padding:0 6px;text-align:center;white-space:nowrap;vertical-align: middle;-ms-touch-action: manipulation;touch-action:manipulation;cursor:pointer;-webkit-user-select: none;-moz-user-select:none;-ms-user-select:none;user-select:none;border-left:none!important;border-top:none!important;border-bottom:none!important;border-right:none!important;border-radius: 4px} body{top:0px!important}
.dark .goog-te-gadget-simple{background-color:transparent!important;background:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20,5H10.88L10,2H4A2,2 0 0,0 2,4V17A2,2 0 0,0 4,19H11L12,22H20A2,2 0 0,0 22,20V7A2,2 0 0,0 20,5M7.17,14.59A4.09,4.09 0 0,1 3.08,10.5A4.09,4.09 0 0,1 7.17,6.41C8.21,6.41 9.16,6.78 9.91,7.5L10,7.54L8.75,8.72L8.69,8.67C8.4,8.4 7.91,8.08 7.17,8.08C5.86,8.08 4.79,9.17 4.79,10.5C4.79,11.83 5.86,12.92 7.17,12.92C8.54,12.92 9.13,12.05 9.29,11.46H7.08V9.91H11.03L11.04,10C11.08,10.19 11.09,10.38 11.09,10.59C11.09,12.94 9.5,14.59 7.17,14.59M13.2,12.88C13.53,13.5 13.94,14.06 14.39,14.58L13.85,15.11L13.2,12.88M13.97,12.12H13L12.67,11.08H16.66C16.66,11.08 16.32,12.39 15.1,13.82C14.58,13.2 14.21,12.59 13.97,12.12M21,20A1,1 0 0,1 20,21H13L15,19L14.19,16.23L15.11,15.31L17.79,18L18.5,17.27L15.81,14.59C16.71,13.56 17.41,12.34 17.73,11.08H19V10.04H15.36V9H14.32V10.04H12.36L11.18,6H20A1,1 0 0,1 21,7V20Z' fill='%23aaaaad'/%3E%3C/svg%3E") center / 12px no-repeat;background-size: 20px 20px} .headerIcon .gtWgt.gtHide{display:none} .headerIcon .gtWgt .gtIcon{position:absolute;background-color:var(--header-bg)}
.dark .headerIcon .gtWgt .gtIcon{background-color:var(--dark-bg)} .postComments.gtHide .gtWgt{display:none} .postComments.gtHide .shrBtn{margin-right:0} .postComments .gtWgt .gtLoad{position:relative} .postComments .gtWgt .gtIcon{position:absolute;background-color:var(--body-bg)} .postComments .gtWgt #google_translate_element{margin-right:0}
.dark .postComments .gtWgt .gtIcon{background-color:var(--dark-bg)} .postComments .gtWgt .gtIcon .goog-te-gadget-simple{background-color:transparent!important;background-size: 18px 18px} .postComments .gtWgt .gtIcon .goog-te-gadget-simple{background-color:transparent!important;background:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20,5H10.88L10,2H4A2,2 0 0,0 2,4V17A2,2 0 0,0 4,19H11L12,22H20A2,2 0 0,0 22,20V7A2,2 0 0,0 20,5M7.17,14.59A4.09,4.09 0 0,1 3.08,10.5A4.09,4.09 0 0,1 7.17,6.41C8.21,6.41 9.16,6.78 9.91,7.5L10,7.54L8.75,8.72L8.69,8.67C8.4,8.4 7.91,8.08 7.17,8.08C5.86,8.08 4.79,9.17 4.79,10.5C4.79,11.83 5.86,12.92 7.17,12.92C8.54,12.92 9.13,12.05 9.29,11.46H7.08V9.91H11.03L11.04,10C11.08,10.19 11.09,10.38 11.09,10.59C11.09,12.94 9.5,14.59 7.17,14.59M13.2,12.88C13.53,13.5 13.94,14.06 14.39,14.58L13.85,15.11L13.2,12.88M13.97,12.12H13L12.67,11.08H16.66C16.66,11.08 16.32,12.39 15.1,13.82C14.58,13.2 14.21,12.59 13.97,12.12M21,20A1,1 0 0,1 20,21H13L15,19L14.19,16.23L15.11,15.31L17.79,18L18.5,17.27L15.81,14.59C16.71,13.56 17.41,12.34 17.73,11.08H19V10.04H15.36V9H14.32V10.04H12.36L11.18,6H20A1,1 0 0,1 21,7V20Z' fill='%23aaaaad'/%3E%3C/svg%3E") center / 12px no-repeat;background-size: 18px 18px}
.dark .postComments .gtWgt .gtIcon .goog-te-gadget-simple{background-color:transparent!important;background:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20,5H10.88L10,2H4A2,2 0 0,0 2,4V17A2,2 0 0,0 4,19H11L12,22H20A2,2 0 0,0 22,20V7A2,2 0 0,0 20,5M7.17,14.59A4.09,4.09 0 0,1 3.08,10.5A4.09,4.09 0 0,1 7.17,6.41C8.21,6.41 9.16,6.78 9.91,7.5L10,7.54L8.75,8.72L8.69,8.67C8.4,8.4 7.91,8.08 7.17,8.08C5.86,8.08 4.79,9.17 4.79,10.5C4.79,11.83 5.86,12.92 7.17,12.92C8.54,12.92 9.13,12.05 9.29,11.46H7.08V9.91H11.03L11.04,10C11.08,10.19 11.09,10.38 11.09,10.59C11.09,12.94 9.5,14.59 7.17,14.59M13.2,12.88C13.53,13.5 13.94,14.06 14.39,14.58L13.85,15.11L13.2,12.88M13.97,12.12H13L12.67,11.08H16.66C16.66,11.08 16.32,12.39 15.1,13.82C14.58,13.2 14.21,12.59 13.97,12.12M21,20A1,1 0 0,1 20,21H13L15,19L14.19,16.23L15.11,15.31L17.79,18L18.5,17.27L15.81,14.59C16.71,13.56 17.41,12.34 17.73,11.08H19V10.04H15.36V9H14.32V10.04H12.36L11.18,6H20A1,1 0 0,1 21,7V20Z' fill='%23aaaaad'/%3E%3C/svg%3E") center / 12px no-repeat;background-size: 18px 18px}

দ্বিতীয় স্টেপ

নিচের কোডটি Copy করুন এবং Ctrl + F ক্লিক করে </body সার্চ করুন অথবা স্কল করে একদম নিচে গিয়ে </body এর ঠিক উপরে কোডটি করুন। তারপর Save করুন।

Copyright The Closure Library Authors.
    SPDX-License-Identifier: Apache-2.0
   */
   var h=this||self,l=/^[\w+/_-]+[=]{0,2}$/,m=null;
    function n(a){
       return(a=a.querySelector&&a.querySelector("script[nonce]"))&&(a=a.nonce||a.getAttribute("nonce"))&&l.test(a)?a:""
    }
    function p(a,b){
       function c(){}c.prototype=b.prototype;
       a.i=b.prototype;a.prototype=new c;
       a.prototype.constructor=a;
       a.h=function(g,f,k){
           for(var e=Array(arguments.length-2),d=2;
           d<arguments.length;d++)e[d-2]=arguments[d];
           return b.prototype[f].apply(g,e)
        }
    }
    function q(a){return a};
    function r(a){
        if(Error.captureStackTrace);
        else{var b=Error().stack;b&&(this.stack=b)}a&&(this.message=String(a))
    }

r.prototype.name="CustomError";
    function u(a,b){
        a=a.split("%s");
        for(var c="",g=a.length-1,f=0;
        f<g;f++)c+=a[f]+(f<b.length?b[f]:"%s");
        r.call(this,c+a[g])
    }
    p(u,r);
    u.prototype.name="AssertionError";
   function v(a,b){
       throw new u("Failure"+(a?": "+a:""),Array.prototype.slice.call(arguments,1));
    };
    var w;
    function x(a,b){this.g=b===y?a:""}x.prototype.toString=function(){return this.g+""};var y={};
   function z(a){
       var b=document.getElementsByTagName("head")[0];b||(b=document.body.parentNode.appendChild(document.createElement("head")));
       b.appendChild(a)
    }
   function _loadJs(a){
       var b=document;
       var c="SCRIPT";"application/xhtml+xml"===b.contentType&&(c=c.toLowerCase());
       c=b.createElement(c);
       c.type="text/javascript";
       c.charset="UTF-8";
       if(void 0===w){b=null;var g=h.trustedTypes;
        if(g&&g.createPolicy){
            try{b=g.createPolicy("goog#html",{createScriptURL:q})}
            catch(t){h.console&&h.console.error(t.message)}w=b}
            else w=b
        }
        a=(b=w)?b.createScriptURL(a):a;a=new x(a,y);a:{
            try{
                var f=c&&c.ownerDocument,k=f&&(f.defaultView||f.parentWindow);k=k||h;
                if(k.Element&&k.Location){var e=k;break a}}
                catch(t){}e=null}
                if(e&&"undefined"!=typeof e.HTMLScriptElement&&(!c||!(c instanceof e.HTMLScriptElement)&&(c instanceof e.Location||c instanceof e.Element))){
                    e=typeof c;
                    if("object"==e&&null!=c||"function"==e)
                    try{}
                    catch(t){}
                    else d=void 0===c?"undefined":null===c?"null":typeof c;v()
                }
                a instanceof x&&a.constructor===x?d=a.g:(d=typeof a,v("expected object of type TrustedResourceUrl, got '"+a+"' of type "+("object"!=d?d:a?Array.isArray(a)?"array":d:"null")),d="type_error:TrustedResourceUrl");c.src=d;
                (d=c.ownerDocument&&c.ownerDocument.defaultView)&&d!=h?d=n(d.document):(null===m&&(m=n(h.document)),d=m);
                d&&c.setAttribute("nonce",d);z(c)
    }
   function _loadCss(a){
       var b=document.createElement("link");
       b.type="text/css";b.rel="stylesheet";
       b.charset="UTF-8";b.href=a;z(b)
    }
    function _isNS(a){
        a=a.split(".");
        for(var b=window,c=0;c<a.length;++c)if(!(b=b[a]))return!1;
        return!0
    }
   function _setupNS(a){
       a=a.split(".");
       for(var b=window,c=0;c<a.length;++c)b.hasOwnProperty?b.hasOwnProperty(a)?b=b[a]:b=b[a[c]]={}:b=b[a]||(b[a]={});
       return b
    }

if (_isNS('google.translate.Element')){return}(function(){
       var c=_setupNS('google.translate._const');
       c._cest = gtConstEvalStartTime;gtConstEvalStartTime = undefined;c._cl='en';
       c._cuc='googleTranslateFunction';
       c._cac='';c._cam='';c._ctkk='447972.1887378764';
   var h='translate.googleapis.com';
   var s=(true?'https':window.location.protocol=='https:'?'https':'http')+'://';
   var b=s+h;c._pah=h;c._pas=s;c._pbi=b+'/translate_static/img/te_bk.gif';
   c._plla=h+'/translate_a/l';c._ps=b+'/translate_static/css/translateelement.css';
   c._puh='translate.google.com';
   _loadCss(c._ps);_loadJs(b+'/translate_static/js/element/main.js');})();})();
//]]>
</script>

তৃতীয় স্টেপ

Translate অপশনটি আপনি আপনার ওয়েবসাইটের কোন জায়গাতে বসাতে চান তার class অথবা id name inspect করে দেখে নিন।

আমরা যেহেতু Night Mode এর আগে Translate অপশনট যুক্ত করবো তাই header-right এর মধ্যে search wrap এর মধ্যে mega-modeএর উপরে নিচের কোডটি past করবো।

তাহলে চলুন আবার ব্লগারের Theme সেকশনের Edit Html ক্লিক করে কোডের মধ্যে ক্লিক করে Ctrl + F ক্লিক করে search-wrap সার্চ করি। যে পর্যন্ত div সাথে search-wrap না আসে সে পর্যন্ত enter চেপে next করি তারপর search-wrap ভিতোরে mega-modeএর উপরে নিচের কোডটি past করি এবং save করি।

প্রাথমিক ভাবে আপনার কাজ সম্পূর্ন

আরো অন্যান্য ভাষা যেভাবে যুক্ত করবেন

আরো ভাষা যুক্ত করতে যে ভাষা যুক্ত করতে চান টেবিল থেকে তার ডান পাশের ISO কোডটি কপি করুন

Language	ISO Code
Abkhazian	ab
Afar	aa
Afrikaans	af
Akan	ak
Albanian	sq
Amharic	am
Arabic	ar
Aragonese	an
Armenian	hy
Assamese	as
Avaric	av
Avestan	ae
Aymara	ay
Azerbaijani	az
Bambara	bm
Bashkir	ba
Basque	eu
Belarusian	be
Bengali (Bangla)	bn
Bihari	bh
Bislama	bi
Bosnian	bs
Breton	br
Bulgarian	bg
Burmese	my
Catalan	ca
Chamorro	ch
Chechen	ce
Chichewa, Chewa, Nyanja	ny
Chinese	zh
Chinese (Simplified)	zh-Hans
Chinese (Traditional)	zh-Hant
Chuvash	cv
Cornish	kw
Corsican	co
Cree	cr
Croatian	hr
Czech	cs
Danish	da
Divehi, Dhivehi, Maldivian	dv
Dutch	nl
Dzongkha	dz
English	en
Esperanto	eo
Estonian	et
Ewe	ee
Faroese	fo
Fijian	fj
Finnish	fi
French	fr
Fula, Fulah, Pulaar, Pular	ff
Galician	gl
Gaelic (Scottish)	gd
Gaelic (Manx)	gv
Georgian	ka
German	de
Greek	el
Greenlandic	kl
Guarani	gn
Gujarati	gu
Haitian Creole	ht
Hausa	ha
Hebrew	he
Herero	hz
Hindi	hi
Hiri Motu	ho
Hungarian	hu
Icelandic	is
Ido	io
Igbo	ig
Indonesian	id, in
Interlingua	ia
Interlingue	ie
Inuktitut	iu
Inupiak	ik
Irish	ga
Italian	it
Japanese	ja
Javanese	jv
Kalaallisut, Greenlandic	kl
Kannada	kn
Kanuri	kr
Kashmiri	ks
Kazakh	kk
Khmer	km
Kikuyu	ki
Kinyarwanda (Rwanda)	rw
Kirundi	rn
Kyrgyz	ky
Komi	kv
Kongo	kg
Korean	ko
Kurdish	ku
Kwanyama	kj
Lao	lo
Latin	la
Latvian (Lettish)	lv
Limburgish ( Limburger)	li
Lingala	ln
Lithuanian	lt
Luga-Katanga	lu
Luganda, Ganda	lg
Luxembourgish	lb
Manx	gv
Macedonian	mk
Malagasy	mg
Malay	ms
Malayalam	ml
Maltese	mt
Maori	mi
Marathi	mr
Marshallese	mh
Moldavian	mo
Mongolian	mn
Nauru	na
Navajo	nv
Ndonga	ng
Northern Ndebele	nd
Nepali	ne
Norwegian	no
Norwegian bokmål	nb
Norwegian nynorsk	nn
Nuosu	ii
Occitan	oc
Ojibwe	oj
Old Church Slavonic, Old Bulgarian	cu
Oriya	or
Oromo (Afaan Oromo)	om
Ossetian	os
Pāli	pi
Pashto, Pushto	ps
Persian (Farsi)	fa
Polish	pl
Portuguese	pt
Punjabi (Eastern)	pa
Quechua	qu
Romansh	rm
Romanian	ro
Russian	ru
Sami	se
Samoan	sm
Sango	sg
Sanskrit	sa
Serbian	sr
Serbo-Croatian	sh
Sesotho	st
Setswana	tn
Shona	sn
Sichuan Yi	ii
Sindhi	sd
Sinhalese	si
Siswati	ss
Slovak	sk
Slovenian	sl
Somali	so
Southern Ndebele	nr
Spanish	es
Sundanese	su
Swahili (Kiswahili)	sw
Swati	ss
Swedish	sv
Tagalog	tl
Tahitian	ty
Tajik	tg
Tamil	ta
Tatar	tt
Telugu	te
Thai	th
Tibetan	bo
Tigrinya	ti
Tonga	to
Tsonga	ts
Turkish	tr
Turkmen	tk
Twi	tw
Uyghur	ug
Ukrainian	uk
Urdu	ur
Uzbek	uz
Venda	ve
Vietnamese	vi
Volapük	vo
Wallon	wa
Welsh	cy
Wolof	wo
Western Frisian	fy
Xhosa	xh
Yiddish	yi, ji
Yoruba	yo
Zhuang, Chuang	za
Zulu	zu

তারপর ব্লগারের Theme সেকশনের Edit Html ক্লিক করে কোডের মধ্যে ক্লিক করে Ctrl + F ক্লিক করে </body সার্চ করুন অথবা স্কল করে নিচে গিয়ে javaScript কোডের মধ্যে includedLanguages এর মধ্যে past করে কমা দিয়ে save করুন।