Cara Membuat Dark Mode Keren Di Semua Halaman Web Blogger

Cara Membuat Dark Mode Keren Di Semua Halaman Web Blogger


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.

$ads={1}

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
  1. Langkah pertama buka terlebih dahulu halaman blogger kalian.
  2. Kemudian yang kedua di menu dashboard blogger pilih Tema/Theme selanjutnya pilih edit HTML.
  3. 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'/> code-box

  4. 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{} code-box

    Yang saya warnai merah diatas adalah class atau Id yang ingin dirubah saat mengkilk tombol Dark modenya. 
  5. $ads={2}
  6. 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>  code-box

  7. 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>  code-box

  8. 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.

0/Post a Comment/Comments

73745675015091643

Iklan di bawah artikel