Dark Mode adalah salah satu fitur
yang sangat familiar saat ini dan sangat banyak digunakan diberbagai platform android
dan windows. Fitur Dark mode ini kadang kita jumpai diberbagai aplikasi maupun
website salah satunya Dark Mode Youtube, Dark Mode Instagram, Dark Mode Facebook dan social media lainnya.
Karena familiar dan trennya fitur
dark mode ini sehingga sekarang banyak para programmer utuk membuat fitur dark
mode untuk blogger dan fitur dark mode di wordpress.
Buat kalian sebagai pemilik blog
terutama blogger pasti ingin memberikan kenyamanan yang maksimala kepada
pengunjung kalian yang pastinya bagi pengunjung yang suka berkunjung ke halaman
website kalian pada malam hari, karena yang kita ketahui kenyamanan pengunjung
adalah nomor satu untuk meningkatkan loyalitas pengunjung agar mereka selalu
mampir ke blog kita.
Nah tidak usah banyak kata lagi
pada kesempatan kali ini saya akan membagikan tutorial bagaimana cara membuat
fitur dark mode pada blog kita atau blog agan semua.
Fitur dark mode ini merupakan suatu
tombol dark mode yang berfungsi disemua halaman website, contohnya apabila
seorang pengunjung mengklik tombol dark mode tersebut akan berfungsi disemua
halaman blogger dan tidak akan kembali seperti semula apabila di refresh
kecuali bila di klik tombol dark modenya kembali maka akan kembali lagi seperti
semula. Kenapa bias begitu? Karena fitur dark mode ini sudah memiliki yang Namanya
Local Storage yang berfungsi untuk mengingat aktifitas pengguna layaknya cookie
akan selalu mengingat aktifitas pengunjung.
Fitur dark mode ini sangat
efektif bagi pengunjung blog karena tidak perlu lagi haru memencet tombol
darkmodenya saat berpindah halaman.
Kode dark mode ini sudah saya
rangkai sedemikian rupa agar blog tetap ringan dan tidak mengurangi score di Gtmatrix
maupun di google pagespeed.
Langkah-langkah memasang fitur
dark mode di blog
- Langkah pertama buka terlebih dahulu halaman blogger kalian.
- Kemudian yang kedua di menu dashboard blogger pilih Tema/Theme selanjutnya pilih edit HTML.
- Sebelum
anda memasang fitur dark mode di blog anda harus memasang Jquery yang ada
terlebih dahulu agar fitur dark modenya bias berfungsi dengan baik, tapi kalo
sudah punya kode di bawah lanjut ke langkah ke empat.
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js'/>{codeBox}
- Untuk memasanga kode CSS dibawah ini kalian cari terlebih dahulu yang namanya ]]></b:skin> atau </style> untuk mencari kode tersebut dengan capat yaitu dang menekan Ctrl+F kemudian paste salah satu kode tersebut. Jika sudah ketemu pastekan kode CSS di dibawah tepat diatas salah satu kode di atas.
/* Dark Mode by hartomy.com */ .hartomySwitch{text-align:center;display:inline-block;align-items:center;padding:0} .ictoggler.theme{text-align:left;} .ictoggler .text{color:#5e5e5e;text-transform:uppercase;font-size:.7rem;font-weight:600;padding:5px 0} .switch{position:relative;display:inline-block} .switch input{display:none} .gesek:before{border-radius:100%;background:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12,6A6,6 0 0,1 18,12C18,14.22 16.79,16.16 15,17.2V19A1,1 0 0,1 14,20H10A1,1 0 0,1 9,19V17.2C7.21,16.16 6,14.22 6,12A6,6 0 0,1 12,6M14,21V22A1,1 0 0,1 13,23H11A1,1 0 0,1 10,22V21H14M20,11H23V13H20V11M1,11H4V13H1V11M13,1V4H11V1H13M4.92,3.5L7.05,5.64L5.63,7.05L3.5,4.93L4.92,3.5M16.95,5.63L19.07,3.5L20.5,4.93L18.37,7.05L16.95,5.63Z' fill='%235f7dde'/%3E%3C/svg%3E") center /21px no-repeat;transition:0.3s cubic-bezier(0.175,0.885,0.32,1.275),padding 0.3s ease,margin 0.3s ease;position:absolute;content:"";height:24px;width:24px;left:-12px;bottom:-7px;background-color:#fff;box-shadow:rgba(74,74,74,0.5) 0 1px 3px,rgba(45,45,45,0.1) 0 0 0 6px} .gesek.round{border-radius:34px;cursor:pointer} .hartodark .gesek:before{position:absolute;content:"";left:-12px;height:24px;width:24px;bottom:-7px;background-color:#fff;background:#95a5a6 url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDQ5OS43MTIgNDk5LjcxMiIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDk5LjcxMiA0OTkuNzEyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgd2lkdGg9IjUxMnB4IiBoZWlnaHQ9IjUxMnB4IiBjbGFzcz0iIj48Zz48cGF0aCBzdHlsZT0iZmlsbDojRDlFM0Q0IiBkPSJNMTQ2Ljg4LDM3NS41MjhjMTI2LjI3MiwwLDIyOC42MjQtMTAyLjM2OCwyMjguNjI0LTIyOC42NGMwLTU1Ljk1Mi0yMC4xNi0xMDcuMTM2LTUzLjUyLTE0Ni44OCAgQzQyNS4wNTYsMzMuMDk2LDQ5OS42OTYsMTI5LjY0LDQ5OS42OTYsMjQzLjcwNGMwLDE0MS4zOTItMTE0LjYwOCwyNTYtMjU2LDI1NmMtMTE0LjA2NCwwLTIxMC42MDgtNzQuNjQtMjQzLjY5Ni0xNzcuNzEyICBDMzkuNzQ0LDM1NS4zNjgsOTAuOTQ0LDM3NS41MjgsMTQ2Ljg4LDM3NS41Mjh6IiBkYXRhLW9yaWdpbmFsPSIjRkZEOTNCIiBjbGFzcz0iYWN0aXZlLXBhdGgiIGRhdGEtb2xkX2NvbG9yPSIjRkZEOTNCIi8+PHBhdGggc3R5bGU9ImZpbGw6I0NDRDFDOSIgZD0iTTQwMS45Miw0Mi43NzZjMzQuMjQsNDMuNTA0LDU0LjgxNiw5OC4yNzIsNTQuODE2LDE1Ny45NTJjMCwxNDEuMzkyLTExNC42MDgsMjU2LTI1NiwyNTYgIGMtNTkuNjgsMC0xMTQuNDQ4LTIwLjU3Ni0xNTcuOTUyLTU0LjgxNmM0Ni44NDgsNTkuNDcyLDExOS4zNDQsOTcuNzkyLDIwMC45MjgsOTcuNzkyYzE0MS4zOTIsMCwyNTYtMTE0LjYwOCwyNTYtMjU2ICBDNDk5LjcxMiwxNjIuMTIsNDYxLjM5Miw4OS42NCw0MDEuOTIsNDIuNzc2eiIgZGF0YS1vcmlnaW5hbD0iI0Y0QzUzNCIgY2xhc3M9IiIgZGF0YS1vbGRfY29sb3I9IiNGNEM1MzQiLz48Zz4KCTxwb2x5Z29uIHN0eWxlPSJmaWxsOiNGRkQ4M0I7IiBwb2ludHM9IjEyOC4xMjgsOTkuOTQ0IDE1NC40OTYsMTUzLjQgMjEzLjQ3MiwxNjEuOTYgMTcwLjgsMjAzLjU2IDE4MC44NjQsMjYyLjI5NiAgICAxMjguMTI4LDIzNC41NjggNzUuMzc2LDI2Mi4yOTYgODUuNDQsMjAzLjU2IDQyLjc2OCwxNjEuOTYgMTAxLjc0NCwxNTMuNCAgIiBkYXRhLW9yaWdpbmFsPSIjRkZEODNCIiBjbGFzcz0iIi8+Cgk8cG9seWdvbiBzdHlsZT0iZmlsbDojRkZEODNCOyIgcG9pbnRzPSIyNzYuODY0LDgyLjg0IDI5MC41MjgsMTEwLjU1MiAzMjEuMTA0LDExNC45ODQgMjk4Ljk3NiwxMzYuNTUyIDMwNC4yMDgsMTY2Ljk4NCAgICAyNzYuODY0LDE1Mi42MTYgMjQ5LjUyLDE2Ni45ODQgMjU0Ljc1MiwxMzYuNTUyIDIzMi42MjQsMTE0Ljk4NCAyNjMuMiwxMTAuNTUyICAiIGRhdGEtb3JpZ2luYWw9IiNGRkQ4M0IiIGNsYXNzPSIiLz4KPC9nPjwvZz4gPC9zdmc+Cg==") center / 17px no-repeat;box-shadow:rgb(182, 200, 212) 0 0px 8px, rgba(0, 0, 0, 0.16) 0 0 0 8px;} @media screen and (max-width:736px){.gesek:before{height:35px;width:35px;left:-12px;bottom:0}.hartodark .gesek:before{height:35px;width:35px;left:-12px;bottom:0}} .hartodark .Read-more:before{background:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M22,3H5A2,2 0 0,0 3,5V9H5V5H22V19H5V15H3V19A2,2 0 0,0 5,21H22A2,2 0 0,0 24,19V5A2,2 0 0,0 22,3M7,15V13H0V11H7V9L11,12L7,15M20,13H13V11H20V13M20,9H13V7H20V9M17,17H13V15H17V17Z' fill='%23fff'/%3E%3C/svg%3E") center no-repeat;} .hartodark body{background:#121212;color:#fff} .hartodark #header-wrapper{background:#232323;color:#fff} .hartodark{background:#252f36;color:#fff} .hartodark a{color:#eee;} .hartodark .class-baru{} .hartodark #id-baru{} {codeBox}
Yang saya warnai merah diatas adalah class atau Id yang ingin dirubah saat mengkilk tombol Dark modenya. - Selanjutnya Copy kode html dibawah ini dan untuk tombol dark modenya kalian bebas meletakkannya dimana saja, bisa juga diletakkan di bagian <header> jika kalian ingin meletakkannya disamping header menu blog kalian.
<div class='hartomySwitch'> <div class='switchtheme'> <div class='theme ictoggler'> <label class='switch' for='hartodark'> <input id='hartodark' type='checkbox'/> <div class='gesek round'/> </label> </div> </div> </div> {codeBox}
- Selanjutnya agar tombol dark modenya berfungsi maksimal tambahkan kode javascript dibawah ini tepat di atas kode </body>
<script type='text/javascript'> //<![CDATA[ // Night Mode by hartomy.com var _0x1231=['#hartodark','click','body','toggleClass','hartodark','toggled'];(function(_0x48eed7,_0x55592a){var _0x52efff=function(_0x25873e){while(--_0x25873e){_0x48eed7['push'](_0x48eed7['shift']());}};_0x52efff(++_0x55592a);}(_0x1231,0x120));var _0x5310=function(_0xdab843,_0x5c5fdb){_0xdab843=_0xdab843-0x0;var _0x27e15d=_0x1231[_0xdab843];return _0x27e15d;};$(_0x5310('0x0'))[_0x5310('0x1')](function(){$(_0x5310('0x2'))[_0x5310('0x3')](_0x5310('0x4'));}),$(_0x5310('0x2'))[_0x5310('0x3')](localStorage['toggled']),$(_0x5310('0x0'))[_0x5310('0x1')](function(){_0x5310('0x4')!=localStorage[_0x5310('0x5')]?($(_0x5310('0x2'))[_0x5310('0x3')](_0x5310('0x4'),!0x0),localStorage[_0x5310('0x5')]=_0x5310('0x4')):($(_0x5310('0x2'))['toggleClass'](_0x5310('0x4'),!0x1),localStorage[_0x5310('0x5')]='');}); //]]> </script> {codeBox}
Untuk melihat hasilnya silahkan klik demo dibawah ini.
Bagaimana apakah tombol dark
modenya sudah berfungsi dengan baik? Apabila dark modenya tidak berfungsi
dengan baik anda bisa menanyakannya di kolom komentar.
Sekian dari saya, selamat mencoba.
bang gimana cara mengubah komen disqus ke komen default blogger