Jika sebelumnya saya bahas mengenai Cara Menambah Widget Google Translate Pada Template Median UI. Kali ini saya bagikan cara mengubah icon Dark Mode pada Median UI 1.5
Jika tidak di ubah, title icon Dark Mode bawaan Median UI 1.5 akan bertabrakan dengan icon Google Translate yang sebelumnya telah di tambahkan.
Cara Mengubah Icon Dark Mode Median UI 1.5
- Buka Dashboard Blogger
- Klik Tema
- Pilih icon Segitiga Terbalik
- Pilih Edit HTML
- Tekan Ctrl + F
- Cari Kode <!–[ Dark mode button ]–>
- Ganti kode icon
<!–[ Dark mode button ]–>
<span aria-label=’Dark’ class=’navDark’ data-text=’Dark’ onclick=’darkMode()’ role=’button’><i/></span> - Menjadi
<!–[ Dark mode button ]–>
<span aria-label=’Dark’ class=’navNight’ data-text=” onclick=’darkMode()’ role=’button’>
<svg class=’line svg-1′ viewBox=’0 0 24 24′><path d=’M183.72453,170.371a10.4306,10.4306,0,0,1-.8987,3.793,11.19849,11.19849,0,0,1-5.73738,5.72881,10.43255,10.43255,0,0,1-3.77582.89138,1.99388,1.99388,0,0,0-1.52447,3.18176,10.82936,10.82936,0,1,0,15.118-15.11819A1.99364,1.99364,0,0,0,183.72453,170.371Z’ transform=’translate(-169.3959 -166.45548)’/></svg>
<svg class=’svg-2′ viewBox=’0 0 24 24′><circle cx=’12’ cy=’12’ r=’6’/><circle cx=’12’ cy=’3′ r=’1’/><circle cx=’12’ cy=’21’ r=’1’/><circle cx=’21’ cy=’12’ r=’1’/><circle cx=’3′ cy=’12’ r=’1’/><circle cx=’5.5′ cy=’5.5′ r=’1’/><circle cx=’18.5′ cy=’18.5′ r=’1’/><circle cx=’18.5′ cy=’5.5′ r=’1’/><circle cx=’5.5′ cy=’18.5′ r=’1’/></svg>
</span> - Agar icon berubah ketika di klik
- Cari Kode /* Widget Social Media */
- Letakkan kode dibawah ini di atas kode /* Widget Social Media
*/ .headerIcon{display:flex;align-items:center; font-size:11px} .headerIcon > *{display:flex;align-items:center; position:relative;cursor:pointer;} .headerIcon > *:not(:first-child){margin-left:12px} .headerIcon label.navMenu:after{content:”;width:45px;height:45px;display:block; background-color:var(–transparent-bg); border-radius:50%; position:absolute;top:-12.5px;left:-12.5px;right:-12.5px; opacity:0;visibility:hidden; -webkit-transition:var(–transition-1);transition:var(–transition-1);transform: scale(.75,.75)} .headerIcon a.navMenu:after{content:attr(data-text); opacity:.7;margin:0 8px} .headerIcon .navMenu:hover:after{opacity:1;visibility:visible;transform: scale(1,1)} .headerIcon .navMenu svg, .headerIcon .navMenu .ham{display:block; -webkit-transition:var(–transition-2);transition:var(–transition-2);z-index:2} .headerIcon .navMenu .svg-2{position:absolute; opacity:0;visibility:hidden} .headerIcon .navMenu .ham{width:20px;height:20px; display:flex;align-items:center} .headerIcon .navMenu .ham span{display:block;padding: 0 2px; width:inherit; opacity:.8} .headerIcon .navMenu .ham i, .headerIcon .navMenu .ham span:before, .headerIcon .navMenu .ham span:after{content:”;display:block;width:100%; border-top:1px solid var(–header-icon)} .headerIcon .navMenu .ham i{margin:4px 0} .headerIcon .navSearch, .headerIcon a.navMenu{display:none} .headerIcon .navDark i{display:flex;align-items:center; width:26px;height:18px; border-radius:10px;border:1px solid var(–header-icon); opacity:.8} .headerIcon .navDark i:before{content:”;display:block;position:relative;left:3px; width:10px;height:10px; border-radius:50%;background-color:var(–header-icon); -webkit-transition:var(–transition-1);transition:var(–transition-1)} .headerIcon .navDark:before{content:attr(data-text);opacity:0; -webkit-transition:var(–transition-2);transition:var(–transition-2); white-space:nowrap; position:absolute;right:0} .headerIcon .navDark:hover:before{opacity:.7;/*padding-right:8px;padding-left:8px;right:26px*/padding-top:35px} header .headerIcon .navNight .svg-2, .darkMode .headerIcon .navNight .svg-1{display:none} .darkMode .headerIcon .navNight .svg-2{display:block} header .headerIcon .navNight:before{content:attr(data-text);font-size:11px;opacity:0;transition:var(–transition-2);-webkit-transition:var(–transition-2);white-space:nowrap; position:absolute;top:15px;left:-2px} header .headerIcon .navNight:hover:before{opacity:.6;top: 20px} .darkMode .headerIcon .navNight:before{content:’ ‘}
- Simpan Tema
