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

December 20, 2022 কোন মন্তব্য নেই

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

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

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

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

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

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

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

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

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

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

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

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.



from Trickbd.com https://ift.tt/N7LzTkj
via IFTTT

শেয়ার করুন
আব্দুল্লাহ

লেখকঃ

পূর্ববর্তী পোষ্ট
পরবর্তী পোষ্ট
Subscribe to: Post Comments (Atom)