🔔 Aktifkan notifikasi. disini Google News

Cara menambahkan Widget Google Translate yang keren pada Template Fletro Pro

Cara mudah menambahkan Google Translate di Template Fletro Pro, Lebih Fleksibel, Lebih Powerful dan tidak bikin berat Loading Blog Kamu

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='&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:%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='&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:%2348525c;stroke-linecap:round;stroke-linejoin:round'/><line data-name='&lt;Path&gt;' 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='&lt;Path&gt;' 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='&lt;Path&gt;' 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='&lt;Path&gt;' 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='&lt;Path&gt;' 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='&lt;Path&gt;' 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='&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:%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='&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:%23fefefe;stroke-linecap:round;stroke-linejoin:round'/><line data-name='&lt;Path&gt;' 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='&lt;Path&gt;' 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='&lt;Path&gt;' 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='&lt;Path&gt;' 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='&lt;Path&gt;' 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='&lt;Path&gt;' 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: &#39;in&#39;, 
                          includedLanguages: &#39;id,ar,en,es,jv,ko,pa,pt,ru,zh-CN&#39;, layout: google.translate.TranslateElement.InlineLayout.SIMPLE, 
                          autoDisplay: false}, &#39;google_translate_element&#39;);
							}
                       </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
Cara menambahkan Widget Google Translate yang keren pada Template Fletro Pro
Cara menambahkan Widget Google Translate yang keren pada Template Fletro Pro

Harga : *Belum termasuk Ongkos kirim
Pesan via whatsapp Pesan via Email
Baca juga :

Mau donasi lewat mana?

BRI - Warsito (38940-10507-29535)

Mandiri - Warsito (1370-0182-86605)

BSI - Warsito (7153-4266-72)
Merasa terbantu dengan artikel ini? Ayo dukung dengan donasi. Klik tombol merah.

About the Author

Paling Kepo dengan Informasi seputar Technology dan terobosan Bisnis. I'm a Freelance and Content Creator.

Post a Comment

Silahkan berkomentar dengan tutur bahasa yang baik!
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.