Widget Google Translate menjadi sangat penting bagi sebuah Blog jika pengunjung datang dari banyak Negara. Keberadaan widget ini pasti akan lebih mempermudah pengunjung dalam memahami artikel yang kita tulis. Sebenarnya Blogger sendiri sudah menyediakan Fitur atau Widget Google Translate, namun seperti yang kita tahu tampilan dari Widget bawaan ini sungguh tidak begitu estetik. Akhirnya aku coba tanya ke pengembang Tema Fletro namun mereka belum memiliki tutorial untuk hal ini.
Dan kemudian aku cari Tutorial Cara menambahkan Widget Google Translate pada Template Freltro Pro, kesana kemari di Google namun yang saya temukan tutorial untuk Median UI. Dan setelah aku terapkan di Fletro Pro sama sekali tidak bekerja. Karena saya sangat menginginkan Google translate seperti pada Median UI, mau tidak mau aku harus membuatnya.
Karena saya sendiri tidak paham dengan yang namanya Coding, akhirnya saya pusing ketika membuka halaman Edit HTML, isinya cuma angka, huruf dengan berbagaimacam bentuk. Akhirnya aku pelajari dulu struktur dan fungsinya dan ternyata HTML itu sebenarnya cukup simpel untuk dipahami, kalau dibanding dengan Wordpress emang Tema Blogger lebih simpel untuk edit-edit dan untuk pengembangan. Ya setiap CMS memang ada plus minusnya kalau Wordpress minusnya saya harus mengeluarkan budget untuk sewa hosting.
Lanjut ke — Baiklah tidak usah banyak kata langsung saya Simak Tutorialnya :
Pastikan kamu sudah membackup Template kamu saat ini, buat jaga-jaga misal terjadi Error. Ingat pastikan kamu sudah membackup, dan lakukan sesuai instruksi.
Cara menambahkan Widget Google Translate pada Template Fletro Pro
1. Buka Dashboard Blogger
2. Klik menu Tema
3. Tekan icon Segitiga Terbalik
4. Pilih Edit HTML
5. Cari kode ]]></b:skin> supaya cepat, tekan Ctrl + F
6. Salin kode CSS Google Translate dibawah ini
7. Letakkan kode CSS Google Translate di atas kode ]]></b:skin>
/* Google Translate */
#google_translate_element{padding:0;margin-right:3px;margin-top:auto}
.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='<Group>' 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='<Path>' 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='<Path>' id='_Path_' style='fill:none;stroke:%2348525c;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='<Path>' 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='<Path>' id='_Path_2' style='fill:none;stroke:%2348525c;stroke-linecap:round;stroke-linejoin:round'/><line data-name='<Path>' id='_Path_3' style='fill:none;stroke:%2348525c;stroke-linecap:round;stroke-linejoin:round' x1='17' x2='13.5' y1='19.5' y2='23.5'/><line data-name='<Path>' id='_Path_4' style='fill:none;stroke:%2348525c;stroke-linecap:round;stroke-linejoin:round' x1='14.5' x2='21.5' y1='10.5' y2='10.5'/><line data-name='<Path>' id='_Path_5' style='fill:none;stroke:%2348525c;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='<Path>' id='_Path_6' style='fill:none;stroke:%2348525c;stroke-linecap:round;stroke-linejoin:round'/><path d='M16,13c.54,1.33,4,4.5,4,4.5' data-name='<Path>' id='_Path_7' style='fill:none;stroke:%2348525c;stroke-linecap:round;stroke-linejoin:round'/><path d='M10.1,7.46a4,4,0,1,0,1.4,3h-4' data-name='<Path>' id='_Path_8' style='fill:none;stroke:%2348525c;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}.darkMode .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='<Group>' 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='<Path>' 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='<Path>' id='_Path_' style='fill:none;stroke:%23fefefe;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='<Path>' 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='<Path>' id='_Path_2' style='fill:none;stroke:%23fefefe;stroke-linecap:round;stroke-linejoin:round'/><line data-name='<Path>' id='_Path_3' style='fill:none;stroke:%23fefefe;stroke-linecap:round;stroke-linejoin:round' x1='17' x2='13.5' y1='19.5' y2='23.5'/><line data-name='<Path>' id='_Path_4' style='fill:none;stroke:%23fefefe;stroke-linecap:round;stroke-linejoin:round' x1='14.5' x2='21.5' y1='10.5' y2='10.5'/><line data-name='<Path>' id='_Path_5' style='fill:none;stroke:%23fefefe;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='<Path>' id='_Path_6' style='fill:none;stroke:%23fefefe;stroke-linecap:round;stroke-linejoin:round'/><path d='M16,13c.54,1.33,4,4.5,4,4.5' data-name='<Path>' id='_Path_7' style='fill:none;stroke:%23fefefe;stroke-linecap:round;stroke-linejoin:round'/><path d='M10.1,7.46a4,4,0,1,0,1.4,3h-4' data-name='<Path>' id='_Path_8' style='fill:none;stroke:%23fefefe;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;}
Langkah berikutnya silahkan Cari Kode <!–[ Search button ]–>
Saling Kode Javascript dibawah ini.
<b:widget id='Translate1' locked='false' title='Translate' type='Translate' version='2' visible='true'>
<b:widget-settings>
<b:widget-setting name='displayMode'>SIMPLE</b:widget-setting>
</b:widget-settings>
<b:includable id='main'>
<b:include name='content'/>
</b:includable>
<b:includable id='content'>
<div id='google_translate_element'/>
<script type='text/javascript'>
function googleTranslateElementInit() {
new google.translate.TranslateElement({pageLanguage: 'in',
includedLanguages: 'id,ar,en,es,jv,ko,pa,pt,ru,zh-CN', layout: google.translate.TranslateElement.InlineLayout.SIMPLE,
autoDisplay: false}, 'google_translate_element');
}
</script>
<script src='//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit' type='text/javascript'/>
</b:includable>
</b:widget>
Kemudian pastekan kode javascript diatas tepat diatas kode berikut.
<b:widget id='TextList000' locked='true' title='Header Icon' type='TextList' version='2' visible='true'>
Keterangan pageLanguage: artinya bahasa artikel yang kita buat (kalau blog kalian berbahasa Indonesia, kode id jangan diubah)
includedLanguage: artinya bahasa tujuan penterjemah (untuk menambahkan bahasa lain, ketik koma, lalu kode.
Berikut saya Infokan Kode Bahasa Yang Bisa Ditambahkan Ke includedLanguage,
Kode Bahasa Yang Bisa Ditambahkan Ke includedLanguage
af (Afrikaans)
ar-dz (Arabic – Algeria)
ar-ly (Arabic – Libya)
ar-ma (Arabic – Morocco)
ar-sa (Arabic – Saudi Arabia)
ar-tn (Arabic – Tunisia)
ar (Arabic)
az (Azeri)
be (Belarusian)
bg (Bulgarian)
bn (Bengali)
bo (Tibetan)
bs (Bosnian)
ca (Catalan)
cs (Czech)
cy (Welsh)
da (Danish)
de-at (German – Austria)
de-ch (German – Switzerland)
de (German)
el (Greek)
en-au (English – Australia)
en-ca (English – Canada)
en-gb (English – Great Britain)
en-ie (English – Ireland)
en-nz (English – New Zealand)
en-us (English – United States)
es-do (Spanish – Dominican Republic)
es (Spanish)
eu (Basque)
fa (Farsi – Persian)
fi (Finnish)
fo (Faroese)
fr-ca (French – Canada)
fr-ch (French – Switzerland)
fr (French)
gd (Gaelic)
he (Hebrew)
hi (Hindi)
hr (Croatian)(
hu (Hungarian)
hy-am (Armenian)
id (Indonesian)
is (Icelandic)
it (Italian)
ja (Japanese)
ka (Georgian)
kk (Kazakh)
km (Khmer)
kn (Kannada)
ko (Korean)
lo (Lao)
lt (Lithuanian)
lv (Latvian)
mk (Maori)
ml (Malayalam)
mr (Marathi)
ms-my (Malay – Malaysia)
ms (Malay)
my (Burmese)
nb (Norwegian)
ne (Nepali)
nl-be (Dutch – Belgium)
nl (Dutch)
pa-in (Punjabi)
pl (Polish)
pt-br (Portuguese – Brazil)
pt (Portuguese)
ro (Romanian)
ru (Russian)
sd (Sindhi)
sk (Slovak)
sl (Slovenian)
sq (Albanian)
sr-cyrl (Serbian – Cyrillic)
sr (Serbian)
sv (Swedish)
sw (Swahili)
ta (Tamil)
te (Telugu)
th (Thai)
ttl-phh
tr (Turkish)
uk (Ukrainian)
ur (Urdu)
uz-latn
uz (Uzbek)
vi (Vietnamese)
yo (Yoruba)
zh-cn (Chinese – Simplified)
zh-hk (Chinese – Hong Kong)
zh-tw (Chinese – Taiwan)
Baiklah Semoga bermanfaat dan Terikasih sudah mampir disini. Bagi temen-temen yang lebih paham seputar Coding mungkin bisa membantu menyempurnakan apa yang sudah saya lakukan ini. hehe. maklum admin hanya meraba-raba..
Simak Artikel Kami di Google News
