Hello everyone, you might know or don't know to enable the translate option in Median UI v1.7 but if we enable the translate feature in Median UI v1.7 we can notice that it still not working, We found a solution for it. In this tutorial was are going to share with you how to fix the translate feature not working in Median UI v1.7. So without wasting much time let's check how to fix it.
- First of all, go to your Blogger dashboard
- Then click on the Theme option from the sidebar
- Then click on the drop-down icon near Customize option
- Then click on Edit HTML from the drop-down menu
- Then find
<style>/*<![CDATA[*/ and paste the following CSS just below it
/* Translate */ body{top:0px!important}.goog-te-banner-frame.skiptranslate, .goog-te-gadget-simple img, img.goog-te-gadget-icon, .goog-te-menu-value span, #goog-gt-tt, .goog-tooltip, .goog-tooltip:hover, .goog-logo-link, .goog-te-balloon-frame{display:none!important} .goog-text-highlight{background-color: transparent !important;box-shadow:none !important;-webkit-box-shadow:none !important} .goog-te-menu-frame{box-shadow:none!important} .goog-te-gadget-simple{background-color:transparent!important;border:none!important;outline:0 !important;-ms-touch-action:manipulation;touch-action:manipulation;-webkit-user-select:none !important;-moz-user-select:none !important;-ms-user-select:none !important;user-select:none !important} #google_translate_element{position:absolute !important;z-index:2 !important;overflow:hidden !important} #google_translate_element, .skiptranslate.goog-te-gadget, .goog-te-gadget-simple{width:40px !important;height:40px !important;padding:0 !important;margin:0 !important;border-radius:50% !important}.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}.goog-te-gadget-simple .VIpgJd-ZVi9od-xl07Ob-lTBxed span{display:none}<b:includable id='allJavascript'> and paste the following JS just below it <script>/*<![CDATA[*//* Translate JS */(function() { var add = document.createElement('script'); var crs = document.createAttribute('crossorigin'); crs.value = 'anonymous'; add.setAttributeNode(crs); add.defer = true; add.src = 'https://cdn.jsdelivr.net/gh/shivaes207/teorzo/translate.min.js'; var sc = document.getElementsByTagName('head')[0]; sc.parentNode.insertBefore(add, sc); })();/*]]>*/</script>
<script>function googleTranslateElementInit(){new google.translate.TranslateElement({pageLanguage:'en',includedLanguages:'en,bn,hi,gu,bn,ta,te,mr,ne,ml,kn,ar,id',layout:google.translate.TranslateElement.InlineLayout.SIMPLE},'google_translate_element')}</script>You can add more languages by adding language code by adding ,
Then find the following code <b:section id='header-icon' maxwidgets='3' showaddelement='false'>
<b:widget id='TextList00' locked='true' title='Header icon' type='TextList' version='2' visible='true'>
<b:widget-settings>
<b:widget-setting name='shownum'/>
<b:widget-setting name='sorting'>NONE</b:widget-setting>
<b:widget-setting name='item-2'>Bookmark</b:widget-setting>
<b:widget-setting name='item-1'>Dark</b:widget-setting>
<b:widget-setting name='item-0'>Search</b:widget-setting>
</b:widget-settings>
<b:includable id='main'>
<div class='headi flex'>
<b:include name='content'/>
</div>
</b:includable>
<b:includable id='content'>
<b:loop values='data:items' var='item'>
<!--[ Search button(mobile) ]-->
<b:if cond='data:item == "Search"'>
<label class='sc ic op i20' expr:aria-label='data:item' for='forSearch'>
<b:include name='search-icon'/>
</label>
</b:if>
</b:loop>
<b:loop index='icon' values='data:items' var='item'>
<!--[ Dark ]-->
<b:if cond='data:item == "Dark"'>
<label class='dc fc ic op i20 noJava' expr:aria-label='data:item' for='forDark'>
<b:include name='moon-n-sun-2-icon'/>
</label>
<!--[ Bookmark ]-->
<b:elseif cond='data:item == "Bookmark"'/>
<!-- Web Blog Bookmark With Browser Local Storage, Created by: igniel.com, Source code: https://www.igniel.com/2022/12/widget-bookmark-blog.html -->
<div class='ignielBookmark ibook'>
<label class='bc fc ic op i20 noJava' data-text='0' expr:aria-label='data:item' for='forBook'>
<b:include name='frame-icon'/>
</label>
</div>
<!--[ Bag/Cart ]-->
<b:elseif cond='data:item == "Cart"'/>
<div class='cc ic op i20 noJava' expr:aria-label='data:item'>
<b:include name='bag-icon'/>
</div>
<!--[ Translate ]-->
<b:elseif cond='data:item == "Translate"'/>
<div class='tc ic op i20 noJava' expr:aria-label='data:item'>
<b:include name='translate-icon'/>
</div>
</b:if>
</b:loop>
<b:loop values='data:items' var='item'>
<!--[ Settings ]-->
<b:if cond='data:item == "Settings"'>
<label class='st fc ic op i20' expr:aria-label='data:item' for='forSettings'>
<b:include name='category-2-icon'/>
</label>
</b:if>
</b:loop>
<b:loop values='data:items' var='item'>
<!--[ Profile ]-->
<b:if cond='data:item == "Profile"'>
<label class='pc fc ic op i20' expr:aria-label='data:item' for='forUsers'>
<b:include name='profile-circle-icon'/>
</label>
</b:if>
</b:loop>
</b:includable>
</b:widget>
</b:section>
<b:section id='header-icon' maxwidgets='3' showaddelement='false'>
<b:widget id='TextList00' locked='true' title='Header icon' type='TextList' version='2' visible='true'>
<b:widget-settings>
<b:widget-setting name='shownum'/>
<b:widget-setting name='sorting'>NONE</b:widget-setting>
<b:widget-setting name='item-2'>Bookmark</b:widget-setting>
<b:widget-setting name='item-1'>Translate</b:widget-setting>
<b:widget-setting name='item-0'>Dark</b:widget-setting>
</b:widget-settings>
<b:includable id='main'>
<div class='headi flex'>
<b:include name='content'/>
</div>
</b:includable>
<b:includable id='content'>
<b:loop values='data:items' var='item'>
<!--[ Search button(mobile) ]-->
<b:if cond='data:item == "Search"'>
<label class='sc ic op i20' expr:aria-label='data:item' for='forSearch'>
<b:include name='search-icon'/>
</label>
</b:if>
</b:loop>
<b:loop index='icon' values='data:items' var='item'>
<!--[ Dark ]-->
<b:if cond='data:item == "Dark"'>
<label class='dc fc ic op i20 noJava' expr:aria-label='data:item' for='forDark'>
<b:include name='moon-n-sun-2-icon'/>
</label>
<!--[ Bookmark ]-->
<b:elseif cond='data:item == "Bookmark"'/>
<!-- Web Blog Bookmark With Browser Local Storage, Created by: igniel.com, Source code: https://www.igniel.com/2022/12/widget-bookmark-blog.html -->
<div class='ignielBookmark ibook'>
<label class='bc fc ic op i20 noJava' data-text='0' expr:aria-label='data:item' for='forBook'>
<b:include name='frame-icon'/>
</label>
</div>
<!--[ Bag/Cart ]-->
<b:elseif cond='data:item == "Cart"'/>
<div class='cc ic op i20 noJava' expr:aria-label='data:item'>
<b:include name='bag-icon'/>
</div>
<!--[ Translate ]-->
<b:elseif cond='data:item == "Translate"'/>
<div class='tc ic op i20 noJava' expr:aria-label='data:item'>
<b:include name='translate-icon'/>
<span id='google_translate_element'/>
</div>
</b:if>
</b:loop>
<b:loop values='data:items' var='item'>
<!--[ Settings ]-->
<b:if cond='data:item == "Settings"'>
<label class='st fc ic op i20' expr:aria-label='data:item' for='forSettings'>
<b:include name='category-2-icon'/>
</label>
</b:if>
</b:loop>
<b:loop values='data:items' var='item'>
<!--[ Profile ]-->
<b:if cond='data:item == "Profile"'>
<label class='pc fc ic op i20' expr:aria-label='data:item' for='forUsers'>
<b:include name='profile-circle-icon'/>
</label>
</b:if>
</b:loop>
</b:includable>
</b:widget>
</b:section>
If you want to lazyload it doesn't affect the speed
First of all, find the following JS <script>/*<![CDATA[*/ /*@shinsenter/defer.js*/ !function(c,i,t){var f,o=/^data-(.+)/,u='IntersectionObserver',r=/p/.test(i.readyState),s=[],a=s.slice,d='lazied',n='load',e='pageshow',l='forEach',m='hasAttribute',h='shift';function p(e){i.head.appendChild(e)}function v(e,n){a.call(e.attributes)[l](n)}function y(e,n,t,o){return o=(o=n?i.getElementById(n):o)||i.createElement(e),n&&(o.id=n),t&&(o.onload=t),o}function b(e,n){return a.call((n||i).querySelectorAll(e))}function g(t,e){b('source',t)[l](g),v(t,function(e,n){(n=o.exec(e.name))&&(t[n[1]]=e.value)}),e&&(t.className+=' '+e),n in t&&t[n]()}function I(e){f(function(o){o=b(e||'[type=deferjs]'),function e(n,t){(n=o[h]())&&(n.parentNode.removeChild(n),(t=y(n.nodeName)).text=n.text,v(n,function(e){'type'!=e.name&&(t[e.name]=e.value)}),t.src&&!t[m]('async')?(t.onload=t.onerror=e,p(t)):(p(t),e()))}()})}(f=function(e,n){r?t(e,n):s.push(e,n)}).all=I,f.js=function(n,t,e,o){f(function(e){(e=y('SCRIPT',t,o)).src=n,p(e)},e)},f.css=function(n,t,e,o){f(function(e){(e=y('LINK',t,o)).rel='stylesheet',e.href=n,p(e)},e)},f.dom=function(e,n,t,o,i){function r(e){o&&!1===o(e)||g(e,t)}f(function(t){t=u in c&&new c[u](function(e){e[l](function(e,n){e.isIntersecting&&(n=e.target)&&(t.unobserve(n),r(n))})},i),b(e||'[data-src]')[l](function(e){e[m](d)||(e.setAttribute(d,''),t?t.observe(e):r(e))})},n)},f.reveal=g,c.Defer=f,c.addEventListener('on'+e in c?e:n,function(){for(I();s[0];t(s[h](),s[h]()))r=1})}(this,document,setTimeout),function(e,n){e.defer=n=e.Defer,e.deferscript=n.js,e.deferstyle=n.css,e.deferimg=e.deferiframe=n.dom}(this);/*]]>*/</script><script>/*<![CDATA[*/ /*!@shinsenter/defer.js */!(function(t){var n,u="Defer",i=t.document,o=t.setTimeout,f=t.IntersectionObserver,r=/p/.test(i.readyState),c=[],s=[],a=c.slice,d="load",e="pageshow",l="on"+e in t?e:d,m=["mousemove","keydown","touchstart","wheel"],h="forEach",v="setAttribute",y="shift";function p(e,t,n){r?o(e,t):(void 0===n&&p.lazy||n?s:c).push(e,t)}function g(e){i.head.appendChild(e)}function b(e,t){a.call(e.attributes)[h](t)}function E(e,t,n,o){return o=(t?i.getElementById(t):o)||i.createElement(e),n&&(o.onload=n),t&&(o.id=t),o}function I(e,t){return a.call((t||i).querySelectorAll(e))}function w(n,e){I("source,img",n)[h](w),b(n,function(e,t){(t=/^data-(.+)/.exec(e.name))&&n[v](t[1],e.value)}),"string"==typeof e&&(n.className+=" "+e),d in n&&n[d]()}function N(e,t,n){p(function(o){o=I(e||"[type=deferjs]"),(function e(t,n){(t=o[y]())&&(t.parentNode.removeChild(t),n=E(t.nodeName),b(t,function(e){"type"!=e.name&&n[v](e.name,e.value)}),n.text=t.text,n.src&&!n.getAttribute("async")?(n.onload=n.onerror=e,g(n)):(g(n),e()))})()},t,n)}function j(e){t.addEventListener(e,n)}function x(e){t.removeEventListener(e,n)}p.all=N,p.dom=function(e,t,i,r,c){p(function(n){function o(e){r&&!1===r(e)||w(e,i)}n=!!f&&new f(function(e){e[h](function(e,t){e.isIntersecting&&(n.unobserve(t=e.target),o(t))})},c),I(e||"[data-src]")[h](function(e){e.setAttribute('lazied',''),e[u]!=p&&(e[u]=p,n?n.observe(e):o(e))})},t,!1)},p.css=function(t,n,e,o,i){p(function(e){(e=E("LINK",n,o)).rel="stylesheet",e.href=t,g(e)},e,i)},p.js=function(t,n,e,o,i){p(function(e){(e=E("SCRIPT",n,o)).src=t,g(e)},e,i)},p.reveal=w,t[u]=p,n=function(e,t){for(t=l==e.type?(x(l),N(),r=p,m[h](j),c):(m[h](x),s);t[0];)o(t[y](),t[y]())},r||j(l)})(this),(function(e,t){t=e.defer=e.Defer,e.deferimg=e.deferiframe=t.dom,e.deferstyle=t.css,e.deferscript=t.js})(this); Defer.lazy = true;/*]]>*/</script><script>/*<![CDATA[*//* Translate JS */(function() { var add = document.createElement('script'); var crs = document.createAttribute('crossorigin'); crs.value = 'anonymous'; add.setAttributeNode(crs); add.defer = true; add.src = 'https://cdn.jsdelivr.net/gh/shivaes207/teorzo/translate.min.js'; var sc = document.getElementsByTagName('head')[0]; sc.parentNode.insertBefore(add, sc); })();/*]]>*/</script>
<script>function googleTranslateElementInit(){new google.translate.TranslateElement({pageLanguage:'en',includedLanguages:'en,bn,hi,gu,bn,ta,te,mr,ne,ml,kn,ar,id',layout:google.translate.TranslateElement.InlineLayout.SIMPLE},'google_translate_element')}</script><script type='deferjs'>/*<![CDATA[*//* Translate JS */(function() { var add = document.createElement('script'); var crs = document.createAttribute('crossorigin'); crs.value = 'anonymous'; add.setAttributeNode(crs); add.defer = true; add.src = 'https://cdn.jsdelivr.net/gh/shivaes207/teorzo/translate.min.js'; var sc = document.getElementsByTagName('head')[0]; sc.parentNode.insertBefore(add, sc); })();/*]]>*/</script>
<script>function googleTranslateElementInit(){new google.translate.TranslateElement({pageLanguage:'en',includedLanguages:'en,bn,hi,gu,bn,ta,te,mr,ne,ml,kn,ar,id',layout:google.translate.TranslateElement.InlineLayout.SIMPLE},'google_translate_element')}</script>Conclusion
Hope this tutorial will help you to fix the translate feature in Median UI v1.7, If you have any doubts related to this tutorial ask me in the comment. Don't forget to share with your friends may be it useful to them. Thanks for visiting, Have a nice day!
