Membuat Dark Mode / Mode Gelap Terang di Template Blog Textrim

Pernah lihat di blog ada tombol ketika di klik tampilan blog atau web tersebut berubah warna? atau mungkin yang suka main youtube , twitter asti tahu bahwa dua situs terbut menyediakan mode gelap / dark mode pada tampilan situsnya.

Saya pikir itu desain yang keren, dan ya memang keren karena banyak sekali web atau blog yang  mengikuti dengan memberikan pilihan tampilan kepada pengunjungnya, mau yang terang apa gelap  gelapan.^^

oleh karena itu disini saya ingin berbagi bagaiman cara Membuat Dark Mode / Mode Gelap Terang di Template Blog Textrim.

Kenapa saya buat tutorial ini di blog yang terpasang template textrim? sebenarnya tutorial ini bisa digunakan untuk template manapun hanya saja saya ingin lebih khusus sebagai bentuk dukungan , review atau mungkin promosi template Textrim. Template ini keren, gratis pula. Jika ingin mendapatkan Template textrim slahkan download gratis di blog pembuatnya.

DOWNLOAD TEMPLATE TEXTRIM

Tutorial Dark Mode / Mode Gelap ini menggunakan LocalStorage atau SessionStorage. 

Apa itu LocalStorage / SessionStorage?

Gampangnya seperti mode gelap youtube atau twitter. Lalu apakah ada cara yang berbeda? banyak, jika tidak ingin seperti youtube atau twitter yang ketika berganti halaman atau refresh kembali ke semula silahkan googling, banyak tutorialnya yag dibahas oleh banyak blogger. 

Perlu diingat sebelumnya,pada tutorial ini saya meniru kode orang lain, bukan copypaste tapi copy edit. . hhe

Jadi jika ingin memasang dengan kode dari sumber aslinya silahkan kunjungi

www.myabdurrahim.com

tapi jika ingin menggunakan hasil editan kode tersebut silahkan lanjutkan kawan.

DEMO TUTORIAL

Masuk ke blogger >> Pilih menu template >> Edit HTML , Copy kode dibawah ini kemudian cari kode </head> letakan diatasnya.

<style type='text/css'>
/*Original code by www.myabdurrahim.com , modifikasi by emodjeh.blogspt.com*/
/* Dark Mode www.myabdurrahim.com (edit untuk bagian/div yang menjadi gelap)*/
.dark-mode header{background:#232323;color:#fff}
.dark-mode .textrimMenu{background:#232323;color:#fff}
.dark-mode .textrimBG{background:#232323;color:#fff}
.dark-mode .nama id/class{nilai property}

/* Dark Mode Button(edit untuk mengubah button/tombol) */
.mydark{background:#f80538;float:right;color:#fff;display:inline-block;height:12px;line-height:20px;padding:0 5px;border-radius:3px;font-size:11px;font-weight:700;animation:anim 2s ease-in infinite}
.mydark:hover{background:#444;color:#fff}
#dark-myar{width:10px;position:absolute;top:0px;right:100px;margin:0}
@keyframes anim{5%{-webkit-transform:scale(1.1,.9);transform:scale(1.1,.9)}10%{-webkit-transform:scale(.9,1.1) translateY(-.5rem);transform:scale(.9,1.1) translateY(-.5rem)}15%{-webkit-transform:scale(1);transform:scale(1)}}
</style>

Untuk menambahkan bagian yang ingin masuk dalam mode gelap, edit kode berikut;

.dark-mode .nama id/class{nilai property} 

tambah atau kurangi sesuai kebutuhan. contoh ;

.dark-mode .breadcrumbs a{color:#fff;}

untuk modifikasi Button ,ubah sesuaikan tampilan dengan mengedit css class .mydark

Selanjutnya,  Copy kode javascript berikut ;

var _0x2f0e=['innerHTML','addEventListener','click','preventDefault','classList','toggle','dark-mode','setItem','removeItem','localStorage','getItem','myDarkMode','documentElement','\x20dark-mode','querySelector','#dark-myar'];(function(_0x1b79a7,_0x3a0621){var _0x966a12=function(_0x3e79fd){while(--_0x3e79fd){_0x1b79a7['push'](_0x1b79a7['shift']());}};_0x966a12(++_0x3a0621);}(_0x2f0e,0xa9));var _0x2b5b=function(_0x462a3a,_0x3e5e7f){_0x462a3a=_0x462a3a-0x0;var _0x26f27e=_0x2f0e[_0x462a3a];return _0x26f27e;};;(function(_0x512a50,_0x163dc1,_0x16c793){if(!(_0x2b5b('0x0')in _0x512a50))return;var _0x1d0913=localStorage[_0x2b5b('0x1')](_0x2b5b('0x2'));if(_0x1d0913){_0x163dc1[_0x2b5b('0x3')]['className']+=_0x2b5b('0x4');}}(window,document));;(function(_0x78db9c,_0x2d7dec,_0x44c5fe){if(!('localStorage'in _0x78db9c))return;var _0x41c733=_0x2d7dec[_0x2b5b('0x5')](_0x2b5b('0x6'));if(!_0x41c733)return;_0x41c733[_0x2b5b('0x7')]+='<li\x20id=\x22dark-mode\x22><a\x20class=\x22mydark\x22\x20role=\x22button\x22\x20href=\x22#\x22><i\x20class=\x22fas\x20fa-moon\x22></i>\x20Dark\x20Mode</a></li>';var _0x42910d=_0x2d7dec[_0x2b5b('0x5')]('#dark-mode');if(!_0x42910d)return;_0x42910d[_0x2b5b('0x8')](_0x2b5b('0x9'),function(_0x186dc3){_0x186dc3[_0x2b5b('0xa')]();_0x2d7dec[_0x2b5b('0x3')][_0x2b5b('0xb')][_0x2b5b('0xc')](_0x2b5b('0xd'));if(_0x2d7dec['documentElement'][_0x2b5b('0xb')]['contains'](_0x2b5b('0xd'))){localStorage[_0x2b5b('0xe')](_0x2b5b('0x2'),!![]);return;}localStorage[_0x2b5b('0xf')](_0x2b5b('0x2'));},![]);}(window,document));

lalu letakan didalam function textrim{}, ada di paling bawah kode template, diatas kode </body>

 function textrim() {
      // Put all of your scripts here
      //---- DELETE me and REPLACE with your code ----//

    //]]> </script>

jika ditaruh diluar atau tidak untuk template textrim, tambahkan

<script type="text/javascript">.. kode javascript..</script>

diawal dan akhir ,lalu letakan diatas kode .

Untuk posisi button/ tombol,copy kode berikut dan letakan sesuai keinginan kamu dimana.

 <li id='dark-myar'/>

Saran lebih baik letakan bersama kode menu header.

<ul>
<li><a href='https://sejarahkaca.blogspot.com/search/label/Sejarah' title='Sejarah Kaca'>Sejarah Kaca</a></li>
<li><a href='https://sejarahkaca.blogspot.com/search/label/Penemuan' title='Penemuan Kaca'>Penemuan Kaca</a></li>
<li><a href='https://sejarahkaca.blogspot.com/search/label/Pembuatan' title='Pembuatan Kaca'>Pembuatan Kaca</a></li>
<li id='dark-myar'/>
</ul>

Note:
karena kode ini / tutorial ini masih belum fix, mode gelap ini belum responsive jika dibuka dengan smartphone / hape tombol mode gelap akan menutupi menu header. untuk mengatasinya saya hilangkan. dengan cara menambahkan kode css berikut

 #dark-myar{
  display:none; 
  }
  .dark-myar{
  display:none;
  }

cari @media pada kode template(template >> EDIT HTML), kemudian pilih pada ukuran layar berapa tombol akan hilang, contoh;

@media screen and (max-width:640px){
  #dark-myar{
  display:none; 
  }
  .dark-myar{
  display:none;
  }
  ......
}

artinya ketika layar diperkecil sampai ukuran widht atau lebar kurang dari 640px, maka tombol gelap terang akan hilang.

Itu saja mungkin tutorial singkat membuat mode gelap terang di template textrim semoga membantu.

Share this post