√ Cara Memasang Dark Mode Keren Disemua Halaman blog

Cara Memasang Dark Mode Keren Disemua Halaman blog

Posted by New's

Sunday, December 13, 2020

syugulnajeh - Dark mode adalah salah satu fitur familiar saat ini. Dan fitur ini sudah banyak sekali digunakan diberbagai platform Android dan Windows.

Dark mode ini terkadang kita jumpai di sebuah aplikasi atau website. Salag satunya adalah YouTube, Facebook dan juga Instagram. Karena sudah familiarnya fitur ini, maka banyak dari kalangan Programmer mereka membuat fitur dark mode ini di blogger dan wordpress.

Contoh blogger yang menggunakan fitur ini adalah blog syugulnajeh ini. Karena dengan adanya fitur mode gelap, akan memberikan kenyaman yang maksimal ketika membaca artikel.

Tombol dark mode ini berfungsi disemua halaman blog atau website kamu. Dan tombol dark mode ini sangatlah efektif sekali bagi para pembaca diblog, karena mereka tidak perlu mengklik kembali tombolnya meskipun mereka pindah halaman.

Kode dark mode ini sudah saya rangkai sedemikian rupa agar blog kamu tetap ringan saat diakses dan tidak mengurangi skor di Gtmatrix ataupun Googlespeed.

Untuk cara pembuatan dark mode ini, kamu bisa ikuti langkah-langkah dibawah ini sampai selesai.

Cara Memasang Fitur Dark Mode Disemua Halaman Blog Atau Website

1. Masuk ke Dashbord blogger masing-masing.

2. Masuk ke menu Theme --> Edit HTML.

3. Kemudian cari kode ]]><b:skin> atau </style> (gunakan Ctrl + F untuk mencari kode) lalu pastekan kode CSS dibawah ini tepat berada diatas kode tersebut.



/* 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{}

Kalau blog kamu belum terpasang jQuery, copy dan pastekan terlebih dahulu kode jQuery ini diatas tag </head>. Tapi kalau sudah terpasang, bisa dilewati!



<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js'/>

4. Kemudian pastekan HTML dibawah ini ditempat kamu ingin menampilkan mode gelapnya. Contoh seperti blog ini, maka letakan kodenya didalam tag <header>.




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

6. Kemudian letakan kode berikut ini tepat diatas tag </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>

7. Klik simpan dan jika ingin melihat demonya, silahkan klik tombol dibawah ini.

Demo

Atau kamu bisa lihat langsung demo pada blog yang sedang kamu baca ini. Disamping logo header terdapat tombol mode gelap. Sihalkan diklik saja untuk pratinjaunya.

New's