bergabung di grup telegram kami

cara memasang widget google terjemahan yang ringan di blog

cara memasang widget google terjemahan yang ringan di blog
cara memasang widget google terjemahan yang ringan di blog

beberapa waktu lalu saya mencoba memasang widget terjemahan di blog ini, Widget Google Translate berfungsi menterjemahkan artikel blog ke dalam bahasa lain. Sehingga pengunjung blog yang datang dari berbagai negara dapat membaca artikel pada blog tanpa perlu copy paste artikel ke halaman penerjemah.

sebenarnya setiap browser sudah menyediakan terjemahan, seperti google chorme kita hanya perlu klik titik tiga pada bagian atas kanan dan pilih terjemahkan, atau jika melalui desktop kita hanya perlu klik kanan pada mouse dan pilih terjemahkan.

lantas mungkin kalian bertanya mengapa saya memasangnya di blog ini, jawabannya cukup sederhana , karena tidak semua orang mengerti internet dan mungkin saja masi ada orang yang tidak menyadari bahwa browser telah menyediakan penerjemah.

widget google translate ini sebenarnya sudah di sediakan di blogger tata letak mungkin di antara kalian belum ada yang menyadarinya, kalian hanya perlu masuk ke tata letak dan tambahkan widget dan nanti akan ada pilihan terjemahan, namun cara ini tidak saya recomendkan karena akan memberatkan loading blog.

yang namanya widget pihak ke 3 tidak ada yang ringan, karena menggunakan js external, sekilas terlihat pendek namun di dalamanya memiliki kode yang sangat amat panjang, dan biasanya di dalam masih terdapat css dan js external lagi seperti widget google translate ini.

namun di sini saya telah mengakalinya agar widget translate ini tidak memberatkan loading blog, di sini saya telah menghosting script google translate ini ke github dan menggunakan lazyload untuk menunda pemuatan scriptnya, hingga ada aktivitas scrol baru script ini akan di muat. untuk demonya kalian bisa rasakan sendiri kecepatan load blog ini, ok jadi jika kalian ingin mencobanya silakan simak caranya di bawah ini.

Cara Memasang Widget Google Translate Di Blog Yang Ringan

silakan masuk ke blogger > tema > edit html salin css di bawah ini dan letakkan di atas kode ]]></b:skin>

fungsi css ini untuk menyembunyikan tampilan asli widget ini yang menurut saya kurang menarik dan terlalu mencolok logo googlenya, jadi saya mengubahnya menjadi icon svg agar lebih simple.

#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;}
jika posisi kurang pas dengan template kalian silakan atur css yang telah saya tandai di atas.
margin-right:5px semakin besar nilainya maka icon akan semakin ke kiri.
margin-top:15px semakin besar nilainya maka icon akan semakin ke bawah.
%2308102b warna icon , wajib menggunakan %23 sebagai tanda #

selanjutnya silakan salin kode di bawah ini dan letakkan di bawah header atau di mana kalian ingin menampilkan icon translatenya.

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

dan terakhir letakkan javascript di bawah ini tepat di atas kode </body> atau &lt;!--</body>--&gt;&lt;/body&gt;


<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/[email protected]/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:&#39;id&#39;,includedLanguages:&#39;en,id,vi,zh-CN,th,ru,ms,ko,ja,it,hi,fr,es,de,ar,tr,jw,sn&#39;,layout:google.translate.TranslateElement.InlineLayout.SIMPLE},&#39;google_translate_element&#39;)}$(&quot;.hover&quot;).mouseleave(function (){$(this).removeClass(&quot;hover&quot;)});
</script>

bagian yang saya tandai adalah kode bahasa yang ingin di tampilkan, kalian boleh menghapusnya jika di rasa tidak memerlukan bahasa tersebut. bagian pageLanguage:&#39;id silakan sesuaikan kode bahasa blog kalian. jika sudah jangan lupa untuk klik simpan

Alternatif Icon

di bawah ini saya menyediakan 3 icon tambahan jika di rasa icon di atas kurang cocok dengan blogmu

<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path 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='%2308102b'/></svg>
<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M21.35,11.1H12.18V13.83H18.69C18.36,17.64 15.19,19.27 12.19,19.27C8.36,19.27 5,16.25 5,12C5,7.9 8.2,4.73 12.2,4.73C15.29,4.73 17.1,6.7 17.1,6.7L19,4.72C19,4.72 16.56,2 12.1,2C6.42,2 2.03,6.8 2.03,12C2.03,17.05 6.16,22 12.25,22C17.6,22 21.5,18.33 21.5,12.91C21.5,11.76 21.35,11.1 21.35,11.1V11.1Z' fill='%2308102b'/></svg>
<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M17.9,17.39C17.64,16.59 16.89,16 16,16H15V13A1,1 0 0,0 14,12H8V10H10A1,1 0 0,0 11,9V7H13A2,2 0 0,0 15,5V4.59C17.93,5.77 20,8.64 20,12C20,14.08 19.2,15.97 17.9,17.39M11,19.93C7.05,19.44 4,16.08 4,12C4,11.38 4.08,10.78 4.21,10.21L9,15V16A2,2 0 0,0 11,18M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z' fill='%2308102b'/></svg>

Daftar Kode Bahasa

Kode Bahasa:

Kode Bahasa
idIndonesia
jsJawa
suSunda
enEnglish
viVietnam
zh-CNChina (Aks. Sederhana)
zh-TWChina (Aks. Tradisional)
thThailand
ruRusia
msMelayu
koKorea
jaJepang
itItalia
hiHindi
frPrancis
esSpanyol
deJerman
arArab
psPashto
ptPortugis
hmnHmong
hrKroat
htKreol Haiti
huMagyar
yiYiddi
hyArmenia
yoYoruba
igIgbo
afAfrikans
isIslan
amAmhara
iwIbrani
azAzerbaijan
zuZulu
roRumania
cebCebuano
beBelarussia
bgBulgaria
rwKinyarwanda
bnBengali
bsBosnia
sdSindhi
kaGeorgia
siSinhala
skSlovakia
slSlovenia
smSamoa
snShona
soSomali
sqAlbania
caKatala
srSerb
kkKazak
stSesotho
kmKhmer
svSwensk
swSwahili
kuKurdi
coKorsika
taTamil
kyKirghiz
csCeko
teTelugu
tgTajik
laLatin
lbLuksemburg
cyWales
tkTurkmen
tlTagalog
daDenmark
ttTatar
ltLituania
lvLatvia
ugUyghur
ukUkraina
mgMalagasi
miMaori
urUrdu
mkMakedonia
hawHawaii
mlMalayalam
mnMongol
mrMarathi
uzUzbek
mtMalta
elYunani
eoEsperanto
myBurma
etEstonia
euBasque
neNepal
faFarsi
nlBelanda
noNorsk
fiFinlandia
nyChichewa
fyFrisia
gaGaelig
gdGaelik Skotlandia
glGalisia
xhXhosa
paPunjabi
haHausa
plPolandia
psPashto
ptPortugis
htKreol Haiti
isIslan
loLaos
orOdia (Oriya)
guGujarati
trTurki

Khusus Pengguna Template Median-ui 1.6

silakan masuk ke blogger > tema > edit html salin css di bawah ini dan letakkan di atas kode ]]></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}

lanjut gunakan ctrl + f cari kode seperti di bawah ini

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

jika sudah ketemu letakkan kode ini tepat di bawah kode </b:if>

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

dan terakhir letakkan javascript di bawah ini tepat di atas kode &lt;!--</body>--&gt;&lt;/body&gt;


<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/[email protected]/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:&#39;id&#39;,includedLanguages:&#39;en,id,vi,zh-CN,th,ru,ms,ko,ja,it,hi,fr,es,de,ar,tr,jw,sn&#39;,layout:google.translate.TranslateElement.InlineLayout.SIMPLE},&#39;google_translate_element&#39;)}$(&quot;.hover&quot;).mouseleave(function (){$(this).removeClass(&quot;hover&quot;)});
</script>

ok jadi sampai di sini kita sudah berhasil memasang widget google terjemahan yang ringan di blog semoga bermanfaat.

Baca juga :

65 komentar



image quote pre code
  1. Mas selanjutnya bikin tutorial cara bikin komentar seperti blog ini
    1. Tidak janji kapan di buatkan ya mas, karena saya harus coba juga agar bisa di tarapkan semua jenis template tanpa harus banyak rombak kode yang sudah ada
    2. Ya mas,di template median ui 1.3 sama 1.4 bisa kan
    3. Saya perhatikan setiap ada update class dan ID selalu di ubah jadi di sesuaikan aja jika menggunakan versi lama
  2. Mas saya ada 2 pilih bahasanya
  3. https://1.bp.blogspot.com/-T_VLQxVti4M/YAzxRpVIJlI/AAAAAAAAB0w/1ZPqOY61jhM0yJ3tmEvZl9KHB5_qTjYjwCNcBGAsYHQ/s2340/Screenshot_2021-01-24-12-00-53-0
    1. jika lihat dari foto agak susah, tapi saya perkirakan ada double kodenya, apakah ada menambahkan widget terjemahan melalui tata letak?
    2. Ya mas, baru bisa saya nambahin translate lewat tata letak dulu
    3. Sepertinya mas keliru membaca tutorial ini, saua tidak menyuruh menambahkan translate melalui tata letak tapi saya bilang tidak recomendkan makanya di buatkan tutorial untuk memasnah secara manual, makanya jadi 2 karna jadi double kodenya dan itu akan memberatkan loading blog dan error di google rich
  4. aduh telat 2 hari aku lupa ngunjungi, udah aku terapkan dan work mas.
    itu tulisan 'pilih bahasa' jika di akses orang lain dari negara lain apakah tulisan nya tetap "pilih bahasa" ?
    sebelum nya terima kasih mas tutor nya
    1. lalu kalau menambahkan bahasa bisa gak mas, misal nya mau menambahkan bahasa tagalog filipina, kode nya sih "fil", saya coba tambahkan gak muncul
    2. Tulisan pilih bahasa otomatis ngikutin bahas blog kak,

      Filipina coba pakai kode "tl" Untuk kode bahasa lainnya bisa search di google juga
    3. Hallo kak, saya pakai template Median UI dan saya lihat banyak sekali tutor dari kakak yang bermanfaat, tapi masalahnya saya masih bingung dengan bacaan. Apa kakak ada channel Youtube untuk tutor bloggernya? Terima kasih
    4. channel yt saya ini ya kak , cuma tidak smua tutorial ada saya buat versi vidionya
      https://www.youtube.com/channel/UCKlfXy_XQHZmWSnUUvKJSzQ
  5. Belum berhasil diterapkan di template Linkmagz mas...
    1. bisa kok, ini saya barusan coba pakai template linkmagz
      https://1.bp.blogspot.com/-5TaE8cw4sTk/YFli4XB1hBI/AAAAAAAACiI/sv5QDswgbzMrxRIXB3IOc5xiF9e_8x4bQCNcBGAsYHQ/s320/Screenshot_2021-03-23-10-37-35-21.png
  6. Kok gini ya?
    https://1.bp.blogspot.com/-DHQXB8-4D4E/YGRzRNeQNCI/AAAAAAAAAzE/H5NgobGdeAw5I5wgisH9D02ZQB5vL8DwACLcBGAsYHQ/s1331/Screenshot_2021_0331_200314.png
    1. Kode ini pinddahkan di bawah navSearch aja. Setelah kode tag penutup label
      <div id='google_translate_element/'>
  7. Kok Kalo Dark mode iconnya tetap hitam?
    1. Kalau mau di ubah warna ketika di darkmode itu tinggal kasi class darkmode aja lihat di bawah ini
      .darkmode .goog-te-gadget-simple{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='%23767676'/%3E%3C/svg%3E") 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}
    2. Letakkan di atas kode ]]></b:skin>
  8. Malah jadi gitu
    1. https://1.bp.blogspot.com/-LUFALMJKXEA/YGUU5hku41I/AAAAAAAAAzU/YU6rL-4w-YEs5gt2nwPb28vu1ai9VLJkACLcBGAsYHQ/s261/Screenshot_2021_0401_073255.png
    2. Salah kirim gambar, maksudnya yang ini
      https://1.bp.blogspot.com/-h1KD9pHeSoM/YGUYXYT_CtI/AAAAAAAAAzc/qOr3wLfn7HQB0G24mftV8TJHSlOOgIsyQCLcBGAsYHQ/s320/Screenshot_2021_0401_074753.png
  9. Udah Bisa Mas
    Btw makasih tutornya
    1. Sama2 ya mas
  10. How to default English Language??
    1. all languages ​​can be translated
  11. Mohon untuk fletro juga. mas
    1. Ini bisa di terapkan semua template mas
  12. kode ini
    <div id='google_translate_element'></div>

    letakkan di atas kode
    <span aria-label='Night mode' class='navNight' onclick='darkMode()' role='button'>

    jika icon terlalu ke bawah margin-top nya di kurangin aja nilainya
  13. Terima kasih tanggapannya +Saif
    1. Sama2 ya mas
  14. Saya ingin memberikan informasi. Untuk yang ingin mengubah warna svg nya. Kamu bisa mengedit beberapa svg berikut: fill='%23161617'/%3E%3C/svg%3E
    Kamu bisa mengedit '161617' dengan warna kamu inginkan contohnya jadi seperti ini:

    fill='%23f09800'/%3E%3C/svg%3E

    *Angka warna berasal dari Warna Hex



    ~Saif
    1. Sudah ada mas keterangan di catatan nya untuk mengubah warna icon
  15. Ralat: bahasa sunda dengan 'su', bukan sn
    1. Terima kasih koreksi nya mas, sudah saya up
  16. Cara supaya header median ui pas di tengah di versi mobile itu gimana ya min
    1. Maksudnya gimana ya? Mngkin bisa di jelasin lebih detail, header kan memang di tengah
  17. kalau gak usah di scroll, langsung muncul aja gimana?
    1. jika tidak menggunakan lazyload nanti akan menemukan eror halaman di google rich,

      tapi jika tetap ingin mencobanya gantilah script di bawah ini
      <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/[email protected]/translate.js";var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(e,a)}(),lazyts=!0)},!0);
      /*]]>*/
      </script>


      menjadi
      <script>/*<![CDATA[*/
      function downloadJSAtOnload(){var e=document.createElement("script");e.src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit",document.body.appendChild(e)}window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload;
      /*]]>*/
      </script>

  18. Keren
  19. Assalammualaikum hehe ternyata sudah ada tutorial nya, mungkin karna begadang wkwk. Klo boleh tanya saya pake median ui 1.5 juga, tp saya udah ikutin cara nya sampe 2 jam saya otak atik tetep begitu coba mas lihat deh blog saya udah di ubah margin right nya ga ngaruh.. ezrarahmaditya,com ubah koma ke titik, terimakasih sebelumnya..
    1. Margin top dan right nya di hapus ubah jadi margin:auto
    2. Saua lihat juga itu tergapit tag conditional jd hanya tampil di homepage, bisa lewatkan /b:if pertama
    3. Margin top n right di hapus gnti ke mrg auto. Lalu div nya di pertama , hehe ga paham. Saya letakan div translate nya di bawah deket profile widget. Terimakasih sebelum nya.
    4. Dibawah nya < / label >
    5. Oh iya jd agar ga tampil di homepg doang, taruh di
      < / label >
      < / bif
      Div translate
      < / bif

      Begitu kah,, hehe maaf merepotkan..
    6. Iya seperti itu mas
  20. saya coba ke fletro ga bisa gan, gak muncul tombolnya, gmna cafanya ya?
    1. jika pakai fletro v6 kode ini
      <div id='google_translate_element'></div>

      letakkan setelah kode
      <!--[ Search button ]-->
      <label aria-label='Search' class='navSearch' for='offsearch-box'>
      <svg class='line' viewBox='0 0 24 24'><g><circle cx='11.36167' cy='11.36167' r='9.36167'/><line x1='22' x2='19.9332' y1='22' y2='19.9332'/></g></svg>
      </label>
    2. kemarin sudah bisa mas, sudah rapi, darkmode sudah oke, setelah bbrpa saat tiba² tampilan default translatenya muncul tombolnya hilang, sya kira kode css atau scriptnya, sya hapus ulang dr awal masih sama mas, mslahnya apa ya?
    3. kayaknya css nya ga berfungsi, entah karena apa, tp awalnya oke
  21. sudah berhasil kemarin mas, tp tiba² skrg muncul tampilan default translatenya, knpa ya? sya coba hapus ulang dri awal sma aja
  22. https://www.masgrafis.online/?m=1
    (mau ngirim gambar ga bisa)
    tlong cek mas hhe
  23. Halo gan, tutorialnya sudah berhasil saya terapkan di median ui, tapi saat saya cek di seositecheckup, ada JS Error Test. We've found JavaScript errors on your webpage!
    Itu gmn cara ngatasin nya yaa?
    1. kalau masalah error saya juga kurang tau mas, karena widget pihak ketiga, dgn menggunakan lazyload harusnya si tidak terdeteksi karena tdk ada aktivitas scroll
  24. Mantap bang langsung bisa di median ui 1.6 👍
  25. Cara biar ditaruh di Navbar gimana yah mas. Median ui
  26. kalo blog kita bahasa indonesia tapi tulisan ditranslatenya tetep "choose a language" atau "indonesian" atau "english" ga bisa ya mas? kalau ada pengunjung dari luar takut membingungkan..
    1. mengikuti bahasa blog mas
  27. mas mau tanya kok disaya icony jadi kaya kepotong gitu ya,kira2 apa yg harus saya ubah agar icony jadi utuh
    1. gunakan css yang atas
  28. solusi mas
    1. solusi apa?
© 2020 - Wendy Code