Penjelasan Singkat
s
kript mode gelap otomatis (Auto Dark Mode) adalah kode skrip yang secara otomatis mengubah warna latar belakang dan teks dan secara otomatis berubah menjadi warna yang lembut dan tidak mencolok berdasarkan jam perangkat pengguna pada malam hari atau saat lampu kamar mati.Mode gelap otomatis bukan hanya fitur pelengkap, tetapi tambahan yang sangat berguna membantu mata pengunjung agar tidak sakit mata dan merasa nyaman melihat bahkan membaca artikel blog di komputer atau perangkat smartphone di kamar gelap atgau ditempat yang pencahayaan mimim saat pembaca beristirahat di malam hari. Selain itu, dengan fitur mode gelap otomatis, itu akan menjadikan website atau blog Anda terlihat dinamis dan user friendly.Pengguna ponsel cerdas sebenarnya sudah memiliki mode gelap (mode membaca), tetapi pengguna masih perlu melakukan pengaturan manual untuk mengaktifkan fitur mode membaca.
Nah, biarkan para pembaca blog anda tidak perlu repot dan dapat membaca artikel dari kenyamanan malam Anda dalam waktu singkat gunakan skrip mode gelap otomatis ini.Ada banyak tutorial untuk membuat skrip mode gelap otomatis, tetapi semuanya semi otomatis dan sulit dipahami penerapannya pada halaman blog, terutama jika Anda mengelola blog yang menggunakan template khusus, sudah Pasti ada banyak kesulitan dalam mengimplementasikannya. Tapi jangan khawatir tentang artikel/tulisan blogkoopedia ini, Saya akan membagikan skrip mode gelap otomatis lanjutan yang dibuat oleh Admin sendiri yang keren dan mudah digunakan.
Mata manusia adalah organ yang bereaksi terhadap cahaya dan memiliki beberapa kegunaan. Sebagai alat indra, mata mamalia memungkinkan untuk penglihatan. Sel batang dan kerucut pada retina memungkinkan persepsi cahaya sadar dan penglihatan seperti diferensiasi warna dan persepsi kedalaman. Mata manusia dapat membedakan sekitar 10 juta warna.
Serupa dengan mata mamalia lainnya, sel-sel ganglion fotosensitif mata manusia non pembentuk gambar pada retina menerima sinyal cahaya yang mempengaruhi penyesuaian ukuran pupil, regulasi dan penekanan hormon melatonin, dan mempengaruhi siklus jam tubuh.
sumber : wikipedia
DAFTAR ISI
- Informasi Singkat
- cara Memasang
- Cara Mengetahui Elemen ID/CLASS
- Cara Membuat Icon Melayang
- Akhir Kata
Cara Memasang:
Mengenai Script auto dark mode, anda terlebih dahulu memiliki plugin Jquery dan Plugin Font Awesome pad template blog anda. Kalau sudah ada lewati saja.
<link rel="stylesheet" href="cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js'></script><script src='https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js'></script>
Perlu diperhatikan! Jika kode template situs web atau blog Anda belum menginstal plugin JQuery, dan FontAwesome, silahkan install kode plugin di atas ke dalam kode template yang Anda gunakan. kode Plugin dipasang di atas elemen kode HTML </head> . Jika kita melanjutkan tutorial ...
Ada tiga mode dasar: Mode Otomatis, Mode Terang, dan Mode Gelap. Pengaturan default akan mengacu pada mode otomatis dimana dalam mode ini akan menyesuaikan dengan waktu di perangkat
pengunjung. Jika pengunjung datang jam 6 pagi, tampilan warna akan otomatis berubah ke mode cahaya, dan jika pengunjung datang pada pukul 20:00, tampilan warna akan berubah ke mode gelap. Selain tampilan mode otomatis, pengunjung dapat dengan bebas memilih mode membaca manual dan hasil mode yang dipilih akan disimpan di cache browser pengunjung sehingga ketika pengunjung tiba, maka pemilihan mode pemilihan akan langsung menyesuaikan dengan pilihan pengunjung.Oke buat yang berminat memasang script auto dark mode punya mimin ini silakan langsung ke cara nya saja.
Sebagai langkah pertama silakan kamu salin kode script dibawah ini ke dalam template website atautemplate blog kamu. Jika kamu pengguna blogspot berikut cara pemasangan script ke dalam template blogger.
- Silahkan masuk ke akun blog anda.
- Pengaturan.
- Silahkan ke Tema dan Edit.
- Scroll ke bawah letakkan kode berikut diatas </body>
<div id='btn_light'><i aria-hidden='true' class='fa fa-star-half-o'/></div>
<script>
//<![CDATA[
/* ------- Element Data ------- */
var elmBGData = ".main-wrapper, .ct-wrapper, .crosscol, .top-nav, .Pagemenu li a, .Pagemenu li a:hover, .Pagemenu li:hover>a, .Pagemenu li a.home, .Pagemenu li, .Pagemenu ul, .a.href, .backer, .menu ul li:hover>a, .widget-HTML, .footer li, .menu ul li, .mage, .mage1, .mage2, .cozo, .menu, .footer boxer lefter";
var elmTXData = ".sidebar, .sidebar a, .sidebar li, .sidebar ul, .leftbar-wrapper, .leftbar-wrapper a, .ct-wrapper, .crosscol, .crosscol ul li a, .sidebar-wrapper, .sidebar-wrapper a, .post-title a, .title-secondary, .title-secondary li, .post ";
var elmBGColor = "#1a1a1a";
var elmTXColor = "#ddd";
var btnColorMode = "#btn_light";
var ntfNotifIcon = '<i class="fa fa-exclamation-circle" aria-hidden="true"></i>';
/* ------- Global Variabel ------- */
var elmStrBGData = [];var elmStrTXData = [];
var setDataArray = false;var txtModeColorNotify='';
var cfldarkmodechk = localStorage.getItem("cfldarkmode");
var cfldarkmodehours = new Date().getHours();
var cflDayTime = cfldarkmodehours > 6 && cfldarkmodehours < 20;
if($(btnColorMode).find('i')==false){$(btnColorMode).html('<i class="fa fa-sun-o"></i>');}
function getDataArrayColorMode(){
var a = document.createElement('div');
a.id = 'cflmodetip';
a.style.cssText = 'position:fixed;background:rgba(0,0,0,.5);color:white;padding:5px;z-index:+99999;border-radius:0 0 5px 5px;font-size:14px;box-shadow:0px 3px 3px rgba(0,0,0,.4);transition:opacity 0.3s;top:0;left:calc(50% - 150px);clear:both;width:300px;text-align:center;display:none;';
document.body.appendChild(a);
elmStrBGData = elmBGData.split(',');
elmStrTXData = elmTXData.split(',');
for(var i=0;i<elmStrBGData.length;i++){elmStrBGData[i]=elmStrBGData[i].trim();}
for(var i=0;i<elmStrTXData.length;i++){elmStrTXData[i]=elmStrTXData[i].trim();}
}getDataArrayColorMode();
if(cfldarkmodechk=="0"){$(btnColorMode+" > i").attr('class', 'fa fa-star-half-o');colorMode();}
if(cfldarkmodechk=="1"||cfldarkmodechk==""||cfldarkmodechk==null||cfldarkmodechk=="undefined"){$(btnColorMode+" > i").attr('class', 'fa fa-sun-o');colorMode();}
if(cfldarkmodechk=="2"){$(btnColorMode+" > i").attr('class', 'fa fa-moon-o');colorMode();}
/* ------- Global Function ------- */
function colorMode(){
$(btnColorMode).off('click');
var a=$(btnColorMode+" > i").attr('class');
if(a=="fa fa-star-half-o"){colorNightMode();cfldarkmodechk='0';localStorage.setItem("cfldarkmode","0");}
if(a=="fa fa-moon-o"){colorLightMode();cfldarkmodechk='2';localStorage.setItem("cfldarkmode","2");}
if(a=="fa fa-sun-o"){
var tmpTxtMode="";
if(cflDayTime==false){colorNightMode();tmpTxtMode="Dark Color";}else{colorLightMode();tmpTxtMode="Light Color";}
$(btnColorMode+" > i").attr('class', 'fa fa-star-half-o');
$(btnColorMode).attr('title', 'Auto Mode');
localStorage.setItem("cfldarkmode","1");
txtModeColorNotify=ntfNotifIcon + ' Auto Mode : ' + tmpTxtMode;
}showModeTip();}
function colorNightMode(){
for(var i=0;i<elmStrBGData.length;i++){$(elmStrBGData[i]).css({'background':elmBGColor,'transition':'background .5s linear,color .5s linear'});}
for(var i=0;i<elmStrTXData.length;i++){$(elmStrTXData[i]).css({'color':elmTXColor});}
$(btnColorMode+" > i").attr('class', 'fa fa-moon-o');
$(btnColorMode).attr('title', 'Dark Mode');
txtModeColorNotify=ntfNotifIcon + ' Dark Color Mode Activated';
}
function colorLightMode(){
for(var i=0;i<elmStrBGData.length;i++){$(elmStrBGData[i]).css({'background':'','transition':'background .5s linear,color .5s linear'});}
for(var i=0;i<elmStrTXData.length;i++){$(elmStrTXData[i]).css({'color':''});}
$(btnColorMode+" > i").attr('class', 'fa fa-sun-o');
$(btnColorMode).attr('title', 'Light Mode');
txtModeColorNotify=ntfNotifIcon + ' Light Color Mode Activated';
}
function showModeTip(){
$('#cflmodetip').html(txtModeColorNotify);
$('#cflmodetip').slideDown();
var b = setTimeout(function(){
$(btnColorMode).on("click", function(){colorMode();});for(var i=0;i<elmStrBGData.length;i++){$(elmStrBGData[i]).css('transition','');};$('#cflmodetip').slideUp();
}, 3000);}
//]]>
</script>
Keterangan:
Setelah memasang script diatas, maka langkah selanjutnya adalah mengatur bebrapa parameter variabel untuk warna bacxkground dan warna tulisan supaya menyesuaikan dengan template blog kamu.
Parameter Variabel :
var elmBGData : ".main-wrapper, .ct-wrapper, .crosscol, .top-nav"; dan seterusnya...
Merupakan variabel semua elemen tag HTML yang akan dirubah warna background nya. anda bisa mencocokkan dengan elemen HTML atau tag tertentu biasanya pada elemen ID dan elemen Class. Contoh diatas merupakan elemen iD atau elemen class admin, dan hanya sebagai contoh.
Parameter Variabel :
Var elmTXData : ".sidebar, .sidebar a, .sidebar li, .sidebar ul, .leftbar-wrapper" dan seterusnya...
Merupakan variabel elemen HTML yang akan dirubah warna teksnya. Pilihlah elemen apa saja yang ingin kamu rubah warna teksnya menjadi lebih terang ditenga-tengah gempuran warna background yang semakin gelap. 🤣 elemen ID/Class diatas hanya lah sebagai contoh saja yah.
Harap dilihat dulu.
Parameter Variabel :
var elmBGColor = "#1a1a1a"; --- warna hitam ( background )
var elmTXColor = "#ddd"; --- warna putih abu-abu ( tulisan )
Silahkan atur sendiri warna kesukaan anda. Bila anda ingin merubah warna hex ataupun RGB silahkan kunjungi situs berikut:
Parameter Variabel :
var btnColorMode ='#btn_light'
Merupakan elemen HTML ID yang digunakan untuk memanggil CSS atau pun lokasi penempatan icon auto dark mode nantinya. Jika ingin meletakkan di samping search box atau kotak pencarian silahkan letakkan saja. berikut kode CSS dan contoh elemen penempatan :
<style> #btn_light {position:fixed;top:calc(50% - 20px);left:0;padding:10px;border:none;background-color:#20B2AA ;color:#fff;border-radius:0 5px 5px 0;}
</style>
contoh dibawah merupakan syntak penulisan dimana anda akan meletakkan icon tersebut.
<div id='btn_light'><i aria-hidden='true' class='fa fa-star-half-o'/></div>
Cara Mengetahui elemen ID/CLASS:
Cara menentukan elemen HTML dari situs web atau template blog untuk digunakan sebagai variabel inputSangat mudah untuk mengubah warna latar belakang dan teks. Silakan jalankan aplikasi browserGunakan komputer PC untuk membuka halaman beranda dan halaman artikel situs web atau blog Anda, laluTekan tombol keyboard F12 atau Fn + F12 (khusus browser: Firefox, Chrome, dan Edge) untuk menampilkan pengembangalat. Hal ini dilakukan untuk memudahkan dalam melacak elemen HTML dan mengetahui jenis elemen apa yang dibutuhkanDijelaskan dalam kode HTML template yang digunakan. Lebih detail seperti yang ditunjukkan di bawah ini.
Sebagai contoh dari gambar diatas dapat dilihat bahwa untuk penempatan icon pada blog Blogkoopedia, admin menempatkan ikon disamping elemen pencarian, dan variabel input menjadi:var btnMode Warna = "#btn_light"; Gunakan tanda pound (#) ketika elemen HTML adalah atribut ID dan titik (.) digunakan untuk mewakili properti Class. Jadi jangan salah pakai atribut ID dengan atribut class.Identifikasi dan temukan jenis elemen lain yang digunakan sebagai variabel input Latar belakang dan teks sama seperti di atas, cukup tentukan area yang akan diubah color nya, lalu masukkan saja jenis elemen area ke dalam variabel input.
Cara Membuat Icon Melayang
membuat elemen HTML menjadi melayang Anda cukup mengubah script CSS diatas dari syntak "position:"fixed;" menjadi "position:relative;" tanpa tanda quotes yah. Untuk menentukan properti posisi elemen HTML (fixed, relative atau absolute) dan properti (top dan left).
Akhir Kata
Sekian pembahasan tentang Cara Mudah Membuat Auto Dark Mode Pada BLog. Apabila ada yang perlu ditanyakan atau kritik dan saran silahkan tulis dikolom komentar. Atas kunjungannya saya ucapkan terimakasih. Wassalam.
Keywords
Blogger, darkmode, lightmode, autodarkmode, SEO, Optimasi, Script, JavaScript, background, website
No comments:
Tulis comments