How to add Google Translate Widget on Blogger Blog | Advance script

কিছুদিন আগে আমি আমার ব্লগে একটি অনুবাদ বা ট্রান্সলেট উইজেট ইনস্টল করেছিলাম।সেই গুগল ট্রান্সলেট উইজেট ব্লগ পোস্টগুলো অন্য ভাষায় অনুবাদ করতে সাহায্য করে৷ যাতে বিভিন্ন দেশ থেকে আসা ব্লগের ভিজিটররা সহজেই ব্লগের আর্টিকেলগুলো তাদের নিজস্ব ভাষায় পড়তে পারে কোনো সমস্যা ছাড়াই।

আজকে আমি আপনাদের সাথে শেয়ার করবো,কিভাবে ব্লগারে গুগল ট্রান্সলেট উইজেট যুক্ত করবেন অনেক সহজেই।

আসলে প্রতিটি ব্রাউজারেই এখন ট্রান্সলেট ফিচার পাওয়া যায়।যেমন গুগল ক্রোমে আমরা শুধুমাত্র উপরের ডানদিকে ৩ ডট এ ক্লিক করে ভাষা সিলেক্ট করলে যেকোনো ব্লগের আর্টিকেল ইচ্ছে মত ভাষায় ট্রান্সলেট করে পড়তে পারি।

তাহলে হয়ত আপনি জিজ্ঞাসা করতে পারেন যে কেন আমি এই গুগল ট্রান্সলেট উইজেট নিয়ে পোস্ট করতেছি যা ব্রাউজারেই পাওয়া যায়।উত্তরটা বেশ সহজ।কারণ এখনও সবগুলো ব্রাউজারে এই ফিচারটি পাওয়া যায় না এবং অনেকেই আছেন,যারা জানেন না যে ব্রাউজারে ট্রান্সলেট ফিচার রয়েছে।

এই গুগল ট্রান্সলেট উইজেট ইতোমধ্যে গুগল ব্লগারে দিয়েছে।যেটা আপনি আপনার ব্লগের লেআউট অপশনে গিয়ে সহজেই যুক্ত করতে পারবেন।কিন্তু আমি সেটা সাজেস্ট করবো না।কারণ,এতে করে আমাদের ব্লগের লোডিং স্পীড অনেক কমে যাবে।আর লোডিং স্পীড কমে যাওয়া মানে বাউন্স রেট বেড়ে যাওয়া।আপনি হয়তো প্রশ্ন করতে পারেন যে,কেনো বললাম লোডিং স্পীড কমলে বাউন্স রেট বেড়ে যাবে?ব্যাপারটা অনেক সোজা।আপনি যদি কোনো ওয়েবসাইট ভিজিট করেন,এবং দেখেন যে প্রয়োজনের তুলনায় অতিরিক্ত সময় নিচ্ছে লোড নিতে।তবে আপনি অবশ্যই সেই ওয়েবসাইট থেকে অন্য ওয়েবসাইটে ভিজিট করবেন।এতে করেই বাউন্স রেট বেড়ে যাবে।

বাউন্স রেট শব্দটি নতুন মনে হচ্ছে?যদি আমার আগের পোস্ট গুলো পড়ে থাকেন,তবে হয়তো ইতোমধ্যে জানেন বাউন্স রেট কি?ভিজিটররা যখন সার্চ রেজাল্ট থেকে কোনো ওয়েবসাইটে ক্লিক করে এবং ক্লিক করার পর উক্ত পেজে কত সময় কাটালো,তারপর উক্ত ওয়েবসাইটের অন্য কোনো পেজে ভিসিট করলো কি না এগুলো নিয়েই বাউন্স রেট কাউন্ট করা হয়।যখন কোনো ভিজিটর আমাদের ওয়েবসাইটের এসেই সাথে সাথে বের হয়ে যায়,তখন আমাদের ওয়েবসাইটের বাউন্স রেট বেড়ে যায়।

গুগল ট্রান্সলেট কি?

আপনি হয়তো ইতোমধ্যে গুগলের এই ট্রান্সলেট বা অনুবাদক সেবাটি ব্যবহার করেছে।এই ট্রান্সলেট ফিচারের মাধ্যমে আমরা সহজেই যেকোনো ভাষাকে অন্য ভাষায় অনুবাদ বা ট্রান্সলেট করে ফেলতে পারি।যেহুতু এটি নতুন কিছু নয়,এবং প্রায় সবারই জানা তাই এটি নিয়ে বেশি কথা না বাড়াই।

গুগল ট্রান্সলেট উইজেট কি?

গুগল ট্রান্সলেট গুগলে একটি প্রোডাক্ট।যেটি দিয়ে আমরা সহজেই যেকোনো ভাষাকে অন্য ভাষায় রূপান্তরিত করতে পারি।গুগল ট্রান্সলেট উইজেট আমাদের ওয়েবসাইটে ব্যবহার করলে আমাদের ওয়েবসাইটের অন্যান্য দেশ থেকে আসা ভিজিটররা সহজেই আমাদের ওয়েবসাইটের আর্টিকেল বা কন্টেন্ট তাদের নিজস্ব ভাষায় রূপান্তর করে পড়তে পারবে।

ব্লগারে কিভাবে গুগল ট্রান্সলেট উইজেট যুক্ত করবো?

Blogger হলো একটি ব্লগিং প্ল্যাটফর্ম।অন্যভাবে বললে এটাকে বলা যাবে CMS বা Content Management System । যা অধিকাংশ ব্লগার তাদের ব্লগিং ক্যারিয়ার শুরুর দিকে ব্যবহার করে থাকে।কারণ,ব্লগার দিয়ে ব্লগিং করতে আমাদের কোনো প্রকার খরচ করতে হয় না।ব্লগিং করে ইতোমধ্যেই অনেকেই ভালো পরিমাণ উপার্জন করতেছেন।কেউ তো ব্লগারের ফ্রী ব্লগস্পট সাবডোমেইন দিয়ে এডসেন্স এপ্রুভাল নিয়ে তা দিয়ে কাজ করতেছে।

ব্লগার ফ্রী একটি প্লাটফর্ম।একটি গুগল একাউন্ট থাকলেই ব্লগিং শুরু করা যায়।ব্লগিং করার জন্য কোনো ধরনের অর্থ ব্যয় না করেও সফলতা লাভ করতে পারে যে কেউ।একজন ব্লগার যিনি নতুন ব্লগিং শুরু করেছেন ব্লগার দিয়ে,তিনি চাইলে ব্লগার এর সাবডোমেইন দিয়ে কাজ করে অ্যাডসেন্স এপ্রুভাল নিয়ে ব্লগিং চালিয়ে যেতে পারে।

আমাদের ওয়েবসাইট থেকে আসা ইনকাম বৃদ্ধির জন্য প্রয়োজন প্রচুর পরিমাণে ট্রাফিক বা ভিজিটর।ভিজিটর হলো ওয়েবসাইটের প্রাণ।কারণ,ভিজিটর না থাকলে ওয়েবসাইট তৈরির আসল উদ্দেশ্যই ব্যাহত হবে।আর আমরা যদি আমাদের ব্লগে আমাদের কন্টেন্ট বা আর্টিকেল সবগুলো ভাষায় ট্রান্সলেট বা অনুবাদ করার ফিচার যুক্ত করে দেই,তবে অন্যান্য দেশ থেকে আসা ভিজিটররা উপকৃত হবে।এতে করে বাংলা কন্টেন্ট হলে অন্যান্য দেশের ভিজিটররা সহজেই তাদের ভাষায় আর্টিকেল গুলো রূপান্তর করে পড়তে পারবে।

নিচে দেখানো পদ্ধতি অনুসরণ করলে আপনি আপনার ব্লগের জন্য সঠিক উপায়ে একটি গুগল ট্রান্সলেট উইজেট যুক্ত করতে পারবেন।এতে করে ব্লগারে থাকা ডিফল্ট গুগল ট্রান্সলেট উইজেট ব্যবহার করলে যে পেজস্পীড পাওয়া যাবে, এর চেয়ে বেশি পেজস্পীড পাওয়া যাবে।এই উইজেটটির আরেকটি বিশেষত্ব হলো আমরা এটি Header icon গুলোর পাশে ইনস্টল করবো।

ডেমো দেখতে : এখানে ক্লিক করুন ।

How to Install Google Translate Widget on Blogger Blog?

 

• প্রথমে আপনার ব্লগার ড্যাশবোর্ড এ যাবেন।এরপর Themes এ গিয়ে drop-down মেনু থেকে Edit HTML এ ক্লিক করলে আপনাকে থিমের ভিতর রিডাইরেক্ট করে নিয়ে যাবে।

 

• এখন থিমের ভিতর সার্চ করুন ]]></b:skin> এবং নিচে দেয়া সিএসএস কোডগুলো এই ]]></b:skin> এর উপরে পেস্ট করে দিন।(মোবাইল দিয়ে সার্চ করতে Hackers Keyboard ব্যবহার করুন।)নিচে দেয়া সিএসএস কোডের সাথে একটু svg গুগল ট্রান্সলেট উইজেট যুক্ত করে দেয়া আছে।এটি দেখতে অনেক সুন্দর।আপনি ব্লগে যুক্ত করার পর বুঝবেন।

#google_translate_element{padding:0;margin-right:5px;margin-top:15px}
.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-menu-frame{box-shadow:none!important}
.goog-te-gadget-simple{background-color:transparent!important;background:url("data:image/svg+xml,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><g data-name='Google Translate' id='Google_Translate'><g data-name='&lt;Group&gt;' id='_Group_'><path d='M.5,2V18A1.5,1.5,0,0,0,2,19.5H17L10.5.5H2A1.5,1.5,0,0,0,.5,2Z' data-name='&lt;Path&gt;' id='_Path_' style='fill:none;stroke:none;stroke-linecap:round;stroke-linejoin:round' transform='translate(1.0000,1.4000)'/><path d='M.5,2V18A1.5,1.5,0,0,0,2,19.5H17L10.5.5H2A1.5,1.5,0,0,0,.5,2Z' data-name='&lt;Path&gt;' id='_Path_' style='fill:none;stroke:%2308102b;stroke-linecap:round;stroke-linejoin:round'/><path d='M12,4.5H22A1.5,1.5,0,0,1,23.5,6V22A1.5,1.5,0,0,1,22,23.5H13.5l-1.5-4' data-name='&lt;Path&gt;' id='_Path_2' style='fill:none;stroke:none;stroke-linecap:round;stroke-linejoin:round' transform='translate(1.0000,1.4000)'/><path d='M12,4.5H22A1.5,1.5,0,0,1,23.5,6V22A1.5,1.5,0,0,1,22,23.5H13.5l-1.5-4' data-name='&lt;Path&gt;' id='_Path_2' style='fill:none;stroke:%2308102b;stroke-linecap:round;stroke-linejoin:round'/><line data-name='&lt;Path&gt;' id='_Path_3' style='fill:none;stroke:%2308102b;stroke-linecap:round;stroke-linejoin:round' x1='17' x2='13.5' y1='19.5' y2='23.5'/><line data-name='&lt;Path&gt;' id='_Path_4' style='fill:none;stroke:%2308102b;stroke-linecap:round;stroke-linejoin:round' x1='14.5' x2='21.5' y1='10.5' y2='10.5'/><line data-name='&lt;Path&gt;' id='_Path_5' style='fill:none;stroke:%2308102b;stroke-linecap:round;stroke-linejoin:round' x1='17.5' x2='17.5' y1='9.5' y2='10.5'/><path d='M20,10.5c0,1.1-1.77,4.42-4,6' data-name='&lt;Path&gt;' id='_Path_6' style='fill:none;stroke:%2308102b;stroke-linecap:round;stroke-linejoin:round'/><path d='M16,13c.54,1.33,4,4.5,4,4.5' data-name='&lt;Path&gt;' id='_Path_7' style='fill:none;stroke:%2308102b;stroke-linecap:round;stroke-linejoin:round'/><path d='M10.1,7.46a4,4,0,1,0,1.4,3h-4' data-name='&lt;Path&gt;' id='_Path_8' style='fill:none;stroke:%2308102b;stroke-linecap:round;stroke-linejoin:round'/></g></g></svg>") center / 12px no-repeat;-webkit-transition:all .2s ease;transition:all .2s ease;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}

/* css darkmode sesuaikan classnya jika berbeda atau hapus bagian ini */
.dark-mode .goog-te-gadget-simple{background-color:transparent!important;background:url("data:image/svg+xml,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><g data-name='Google Translate' id='Google_Translate'><g data-name='&lt;Group&gt;' id='_Group_'><path d='M.5,2V18A1.5,1.5,0,0,0,2,19.5H17L10.5.5H2A1.5,1.5,0,0,0,.5,2Z' data-name='&lt;Path&gt;' id='_Path_' style='fill:none;stroke:none;stroke-linecap:round;stroke-linejoin:round' transform='translate(1.0000,1.4000)'/><path d='M.5,2V18A1.5,1.5,0,0,0,2,19.5H17L10.5.5H2A1.5,1.5,0,0,0,.5,2Z' data-name='&lt;Path&gt;' id='_Path_' style='fill:none;stroke:%23d2d0d0;stroke-linecap:round;stroke-linejoin:round'/><path d='M12,4.5H22A1.5,1.5,0,0,1,23.5,6V22A1.5,1.5,0,0,1,22,23.5H13.5l-1.5-4' data-name='&lt;Path&gt;' id='_Path_2' style='fill:none;stroke:none;stroke-linecap:round;stroke-linejoin:round' transform='translate(1.0000,1.4000)'/><path d='M12,4.5H22A1.5,1.5,0,0,1,23.5,6V22A1.5,1.5,0,0,1,22,23.5H13.5l-1.5-4' data-name='&lt;Path&gt;' id='_Path_2' style='fill:none;stroke:%23d2d0d0;stroke-linecap:round;stroke-linejoin:round'/><line data-name='&lt;Path&gt;' id='_Path_3' style='fill:none;stroke:%23d2d0d0;stroke-linecap:round;stroke-linejoin:round' x1='17' x2='13.5' y1='19.5' y2='23.5'/><line data-name='&lt;Path&gt;' id='_Path_4' style='fill:none;stroke:%23d2d0d0;stroke-linecap:round;stroke-linejoin:round' x1='14.5' x2='21.5' y1='10.5' y2='10.5'/><line data-name='&lt;Path&gt;' id='_Path_5' style='fill:none;stroke:%23d2d0d0;stroke-linecap:round;stroke-linejoin:round' x1='17.5' x2='17.5' y1='9.5' y2='10.5'/><path d='M20,10.5c0,1.1-1.77,4.42-4,6' data-name='&lt;Path&gt;' id='_Path_6' style='fill:none;stroke:%23d2d0d0;stroke-linecap:round;stroke-linejoin:round'/><path d='M16,13c.54,1.33,4,4.5,4,4.5' data-name='&lt;Path&gt;' id='_Path_7' style='fill:none;stroke:%23d2d0d0;stroke-linecap:round;stroke-linejoin:round'/><path d='M10.1,7.46a4,4,0,1,0,1.4,3h-4' data-name='&lt;Path&gt;' id='_Path_8' style='fill:none;stroke:%23d2d0d0;stroke-linecap:round;stroke-linejoin:round'/></g></g></svg>") center / 12px no-repeat;-webkit-transition:all .2s ease;transition:all .2s ease;background-size: 20px 20px;}

OPTIONAL: উপরে দেয়া সিএসএস কোডগুলোতে margin-right:5px এবং margin-top:15px আপনার ব্লগের থিম অনুযায়ী পরিবর্তন করে নিতে পারবেন।এবং %2308102b পরিবর্তন করে কালার পরিবর্তন করতে পারবেন ইচ্ছে মত।তবে এখানে %23 হলো # এর parsed রূপ।এই %23 ছাড়া বাকি সংখ্যা গুলো কালার কোড অনুযায়ী পরিবর্তন করতে পারেন।

• এখন নিচে দেয়া আইকন কোডগুলো header এর নিচে অথবা ইচ্ছে মত জায়গায় পেস্ট করে দিন।আমি রেকমেন্ড করবো আপনার থিমের dark mode,search,profile বাটন এর পাশে পেস্ট করতে।

<div id='google_translate_element'></div>

• সর্বশেষ নিচে দেয়া জাভাস্ক্রিপ্ট কোডগুলো </body> ট্যাগ এর উপরে পেস্ট করে দিন।

<script>/*<![CDATA[*/
var lazyts=!1;window.addEventListener("scroll",function(){(0!=document.documentElement.scrollTop&&!1===lazyts||0!=document.body.scrollTop&&!1===lazyts)&&(!function(){var e=document.createElement("script");e.type="text/javascript",e.async=!0,e.src="https://cdn.jsdelivr.net/gh/choipanwendy/translategoogle@main/translate2.js";var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(e,a)}(),lazyts=!0)},!0);
/*]]>*/
</script>
<script>
function googleTranslateElementInit(){new google.translate.TranslateElement({pageLanguage:'id',includedLanguages:'en,id,vi,zh-CN,th,ru,ms,ko,ja,it,hi,fr,es,de,ar,tr,jw,sn',layout:google.translate.TranslateElement.InlineLayout.SIMPLE},'google_translate_element')}$(&quot;.hover&quot;).mouseleave(function (){$(this).removeClass(&quot;hover&quot;)});
</script>

উপরে দেয়া জাভাস্ক্রিপ্ট কোডের ভিতর en,id,vi,zh-CN,th,ru,ms,ko,ja,it,hi,fr,es,de,ar,tr,jw,sn এই শব্দগুলো দেখতে পাবেন।এগুলো হলো language code । এগুলোর মাঝে আপনি যে ভাষা গুলো রাখতে চান সেগুলো রেখে বাকিগুলো ডিলেট করে দিতে পারেন।

Language code listing

নিচে একটি টেবিল দিলাম,এখানে আপনি প্রায় সবগুলো language code পাবেন।

Code	Language
id	Indonesia
js	Jawa
su	Sunda
en	English
vi	Vietnam
zh-CN	China (Aks. Sederhana)
zh-TW	China (Aks. Tradisional)
th	Thailand
ru	Rusia
ms	Melayu
ko	Korea
ja	Jepang
it	Italia
hi	Hindi
fr	Prancis
es	Spanyol
de	Jerman
ar	Arab
ps	Pashto
pt	Portugis
hmn	Hmong
hr	Kroat
ht	Kreol Haiti
hu	Magyar
yi	Yiddi
hy	Armenia
yo	Yoruba
ig	Igbo
af	Afrikans
is	Islan
am	Amhara
iw	Ibrani
az	Azerbaijan
zu	Zulu
ro	Rumania
ceb	Cebuano
be	Belarussia
bg	Bulgaria
rw	Kinyarwanda
bn	Bengali
bs	Bosnia
sd	Sindhi
ka	Georgia
si	Sinhala
sk	Slovakia
sl	Slovenia
sm	Samoa
sn	Shona
so	Somali
sq	Albania
ca	Katala
sr	Serb
kk	Kazak
st	Sesotho
km	Khmer
sv	Swensk
sw	Swahili
ku	Kurdi
co	Korsika
ta	Tamil
ky	Kirghiz
cs	Ceko
te	Telugu
tg	Tajik
la	Latin
lb	Luksemburg
cy	Wales
tk	Turkmen
tl	Tagalog
da	Denmark
tt	Tatar
lt	Lituania
lv	Latvia
ug	Uyghur
uk	Ukraina
mg	Malagasi
mi	Maori
ur	Urdu
mk	Makedonia
haw	Hawaii
ml	Malayalam
mn	Mongol
mr	Marathi
uz	Uzbek
mt	Malta
el	Yunani
eo	Esperanto
my	Burma
et	Estonia
eu	Basque
ne	Nepal
fa	Farsi
nl	Belanda
no	Norsk
fi	Finlandia
ny	Chichewa
fy	Frisia
ga	Gaelig
gd	Gaelik Skotlandia
gl	Galisia
xh	Xhosa
pa	Punjabi
ha	Hausa
pl	Polandia
ps	Pashto
pt	Portugis
ht	Kreol Haiti
is	Islan
lo	Laos
or	Odia (Oriya)
gu	Gujarati
tr	Turki

Special for Median UI 1.6 User

যারা Median UI 1.6 টেমপ্লেট ব্যবহার করেন,তাদের জন্য নিচের টিউটোরিয়াল।আপনি উপরের টিউটোরিয়াল ফলো না করে নিচে দেয়া ধাপগুলো অনুসরণ করলে সহজেই গুগল ট্রান্সলেট উইজেট আপনার ব্লগার ব্লগে যুক্ত করতে পারবেন।আপনাকে সাজেস্ট করবো নিচে দেয়া ধাপগুলো অনুসরণ করতে।কারণ,এটি শুধুমাত্র Median UI 1.6 ইউজারদের জন্য।(Jagodesain এর যেকোনো টেমপ্লেট ব্যবহার করলে ট্রাই করতে পারেন,সম্ভবত কাজ করবে।)

• প্রথমে আপনার ব্লগার ড্যাশবোর্ড এ যাবেন।এরপর Themes এ গিয়ে drop-down মেনু থেকে Edit HTML এ ক্লিক করলে আপনাকে থিমের ভিতর রিডাইরেক্ট করে নিয়ে যাবে।

 

• এখন থিমের ভিতর সার্চ করুন ]]></b:skin> এবং নিচে দেয়া সিএসএস কোডগুলো এই ]]></b:skin> এর উপরে পেস্ট করে দিন।

body{top:0!important}
.goog-te-gadget-simple:after{content:'';position:relative;height:100%;width:50px;padding:10px;z-index:2;background:url("data:image/svg+xml,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><g data-name='Google Translate' id='Google_Translate'><g data-name='&lt;Group&gt;' id='_Group_'><path d='M.5,2V18A1.5,1.5,0,0,0,2,19.5H17L10.5.5H2A1.5,1.5,0,0,0,.5,2Z' data-name='&lt;Path&gt;' id='_Path_' style='fill:none;stroke:none;stroke-linecap:round;stroke-linejoin:round' transform='translate(1.0000,1.4000)'/><path d='M.5,2V18A1.5,1.5,0,0,0,2,19.5H17L10.5.5H2A1.5,1.5,0,0,0,.5,2Z' data-name='&lt;Path&gt;' id='_Path_' style='fill:none;stroke:%2308102b;stroke-linecap:round;stroke-linejoin:round'/><path d='M12,4.5H22A1.5,1.5,0,0,1,23.5,6V22A1.5,1.5,0,0,1,22,23.5H13.5l-1.5-4' data-name='&lt;Path&gt;' id='_Path_2' style='fill:none;stroke:none;stroke-linecap:round;stroke-linejoin:round' transform='translate(1.0000,1.4000)'/><path d='M12,4.5H22A1.5,1.5,0,0,1,23.5,6V22A1.5,1.5,0,0,1,22,23.5H13.5l-1.5-4' data-name='&lt;Path&gt;' id='_Path_2' style='fill:none;stroke:%2308102b;stroke-linecap:round;stroke-linejoin:round'/><line data-name='&lt;Path&gt;' id='_Path_3' style='fill:none;stroke:%2308102b;stroke-linecap:round;stroke-linejoin:round' x1='17' x2='13.5' y1='19.5' y2='23.5'/><line data-name='&lt;Path&gt;' id='_Path_4' style='fill:none;stroke:%2308102b;stroke-linecap:round;stroke-linejoin:round' x1='14.5' x2='21.5' y1='10.5' y2='10.5'/><line data-name='&lt;Path&gt;' id='_Path_5' style='fill:none;stroke:%2308102b;stroke-linecap:round;stroke-linejoin:round' x1='17.5' x2='17.5' y1='9.5' y2='10.5'/><path d='M20,10.5c0,1.1-1.77,4.42-4,6' data-name='&lt;Path&gt;' id='_Path_6' style='fill:none;stroke:%2308102b;stroke-linecap:round;stroke-linejoin:round'/><path d='M16,13c.54,1.33,4,4.5,4,4.5' data-name='&lt;Path&gt;' id='_Path_7' style='fill:none;stroke:%2308102b;stroke-linecap:round;stroke-linejoin:round'/><path d='M10.1,7.46a4,4,0,1,0,1.4,3h-4' data-name='&lt;Path&gt;' id='_Path_8' style='fill:none;stroke:%2308102b;stroke-linecap:round;stroke-linejoin:round'/></g></g></svg>") center / 12px no-repeat;background-size:20px 20px}
.drK .goog-te-gadget-simple:after{content:'';background:url("data:image/svg+xml,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><g data-name='Google Translate' id='Google_Translate'><g data-name='&lt;Group&gt;' id='_Group_'><path d='M.5,2V18A1.5,1.5,0,0,0,2,19.5H17L10.5.5H2A1.5,1.5,0,0,0,.5,2Z' data-name='&lt;Path&gt;' id='_Path_' style='fill:none;stroke:none;stroke-linecap:round;stroke-linejoin:round' transform='translate(1.0000,1.4000)'/><path d='M.5,2V18A1.5,1.5,0,0,0,2,19.5H17L10.5.5H2A1.5,1.5,0,0,0,.5,2Z' data-name='&lt;Path&gt;' id='_Path_' style='fill:none;stroke:%23d2d0d0;stroke-linecap:round;stroke-linejoin:round'/><path d='M12,4.5H22A1.5,1.5,0,0,1,23.5,6V22A1.5,1.5,0,0,1,22,23.5H13.5l-1.5-4' data-name='&lt;Path&gt;' id='_Path_2' style='fill:none;stroke:none;stroke-linecap:round;stroke-linejoin:round' transform='translate(1.0000,1.4000)'/><path d='M12,4.5H22A1.5,1.5,0,0,1,23.5,6V22A1.5,1.5,0,0,1,22,23.5H13.5l-1.5-4' data-name='&lt;Path&gt;' id='_Path_2' style='fill:none;stroke:%23d2d0d0;stroke-linecap:round;stroke-linejoin:round'/><line data-name='&lt;Path&gt;' id='_Path_3' style='fill:none;stroke:%23d2d0d0;stroke-linecap:round;stroke-linejoin:round' x1='17' x2='13.5' y1='19.5' y2='23.5'/><line data-name='&lt;Path&gt;' id='_Path_4' style='fill:none;stroke:%23d2d0d0;stroke-linecap:round;stroke-linejoin:round' x1='14.5' x2='21.5' y1='10.5' y2='10.5'/><line data-name='&lt;Path&gt;' id='_Path_5' style='fill:none;stroke:%23d2d0d0;stroke-linecap:round;stroke-linejoin:round' x1='17.5' x2='17.5' y1='9.5' y2='10.5'/><path d='M20,10.5c0,1.1-1.77,4.42-4,6' data-name='&lt;Path&gt;' id='_Path_6' style='fill:none;stroke:%23d2d0d0;stroke-linecap:round;stroke-linejoin:round'/><path d='M16,13c.54,1.33,4,4.5,4,4.5' data-name='&lt;Path&gt;' id='_Path_7' style='fill:none;stroke:%23d2d0d0;stroke-linecap:round;stroke-linejoin:round'/><path d='M10.1,7.46a4,4,0,1,0,1.4,3h-4' data-name='&lt;Path&gt;' id='_Path_8' style='fill:none;stroke:%23d2d0d0;stroke-linecap:round;stroke-linejoin:round'/></g></g></svg>") center / 12px no-repeat;background-size:20px 20px}
.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-menu-frame{box-shadow:none!important}
.goog-te-gadget-simple{background-color:transparent!important;border-left:none!important;border-top:none!important;border-bottom:none!important;border-right:none!important;border-radius:4px}

• এখন নিচে দেয়া কোডগুলো আপনার থিমের ভিতর খুঁজে বের করুন।

<!--[ Profile button ]-->
   <label class='tPrfl tIc bIc' expr:aria-label='data:item' for='offPrf'><b:include name='profile-icon'/></label>
 </li>
</b:if>

• উপরে দেয়া কোডগুলো খুঁজে পেলে উপরে দেয়া কোডগুলো শেষে যে </b:if> ট্যাগটি আছে,তার নিচে, নিচে দেয়া কোডগুলো পেস্ট করে দিন।

<div class='tIc bIc' id='google_translate_element'/>

• এখন সর্বশেষ,নিচে দেয়া জাভাস্ক্রিপ্ট কোডগুলো কপি করে থিমের ভিতর </body> ট্যাগ খুঁজে বের করে এর উপরে পেস্ট করে দিন।এটি সাধারণত থিমের শেষের দিকে থাকে।

<script>/*<![CDATA[*/
var lazyts=!1;window.addEventListener("scroll",function(){(0!=document.documentElement.scrollTop&&!1===lazyts||0!=document.body.scrollTop&&!1===lazyts)&&(!function(){var e=document.createElement("script");e.type="text/javascript",e.async=!0,e.src="https://cdn.jsdelivr.net/gh/choipanwendy/translategoogle@main/translate2.js";var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(e,a)}(),lazyts=!0)},!0);
/*]]>*/
</script>
<script>
function googleTranslateElementInit(){new google.translate.TranslateElement({pageLanguage:'id',includedLanguages:'en,id,vi,zh-CN,th,ru,ms,ko,ja,it,hi,fr,es,de,ar,tr,jw,sn',layout:google.translate.TranslateElement.InlineLayout.SIMPLE},'google_translate_element')}$(&quot;.hover&quot;).mouseleave(function (){$(this).removeClass(&quot;hover&quot;)});
</script>

উপরে আমি ২টি টিউটোরিয়াল দিয়েছি। একটি সবগুলো থিমের জন্য,আরেকটি শুধুমাত্র Median UI 1.6 বা JagoDesain এর থিমগুলোর জন্য।আশা করি আপনি সঠিক ভাবে এই গুগল ট্রান্সলেট উইজেটটি আপনার ব্লগার ব্লগে ইনস্টল করেছেন।

কোডগুলো ডাউনলোড করতে : এখানে ক্লিক করুন ।

উপসংহার

আজকের এই How to add Google Translate Widget on Blogger Blog পোস্টটি সম্পর্কে মতামত জানাতে পারেন কমেন্ট বক্সে।উইজেট ইনস্টল করতে কোনো সমস্যা ফেস করলে সমাধান চেয়ে কমেন্ট করতে পারেন।আমি যথাসাধ্য চেষ্টা করবো সমাধান দেয়ার জন্য।

The post How to add Google Translate Widget on Blogger Blog | Advance script appeared first on Trickbd.com.