Night Mode Dan Day Light Mode Dengan Jquery Cookies - Agiel Triono

Night Mode Dan Day Light Mode Dengan Jquery Cookies

Baca Juga
thumbs

Siang Guys , Hari ini saya mau bagi sedikit tutorial untuk bangaimana cara memasang Night Mode dan Day Light Mode di Blogger. Singkat nya yuk kita ikuti tutorial berikut.

Introduction

Sebelum memulai pastikan blog kalian telah terinstal Jquery minimal versi 1.11.0 !

jika belum pasang Jquery terlebih dulu , dan perlu di ingat untuk menginstal Jquery hanya satu kali saja jika terdapat dua maka blog kalian akan Freze.
taruh Jquery Plugin tepat sebelum tag </head> atau sesudah ]]></b:skin>.
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js' type='text/javascript'/>
jika sudah , lanjut ke step berikut nya.

Instalation

Pertama kita perlu menambahkan id pada tag <body> seperti ini <body id='body'>.
Sekarang cari tag ]]></b:skin> , lalu letakan kode di bawah ini tepat di bawah tag ]]></b:skin>.
<style type='text/css'>
/* CSS INPUT*/
input#nighter,input#dayter{border:0;}
input#nighter,input#dayter{background:rgb(255,255,255);color:#f694a0;cursor:pointer;margin:19px 4px;padding:3px 5px 3px 6px;text-decoration:none;border-radius:3px;font-size:9px;transition:all .3s ease;box-shadow:inset 0 0 0 1px #f694a0;font-weight:400}
input#nighter:hover,input#dayter:hover {background:#f694a0;color:#fff;}
/* CSS NIGHTMODE */
.darkSwitch{background:#34495e}
/* CSS DAYLIGHTMODE */
.lightSwitch{background:#ffffff}
</style>

Lanjut cari tag </body> , lalu tambahkan kode di bawah tepat di atas tag </body>.
<script type='text/javascript'>
/* MERESPON INPUT JIKA DI KLIK OLEH PENGUNJUNG */
function day() {
    body.className = "lightSwitch";
  $("#nighter").css({"display":"inline","opacity":"100"});
  $("#dayter").css({"display":"none","opacity":"0"});
};

function night() {
    body.className = "darkSwitch";
  $("#nighter").css({"display":"none","opacity":"0"});
  $("#dayter").css({"display":"inline","opacity":"100"});
};
/*
function reset() {
    body.className = "loading";
};
*/
$(function () {
    /* RegEx untuk mengambil "bgColor" dari cookie */
    var bgColor = document.cookie.replace(/(?:(?:^|.*;\s*)bgColor\s*\=\s*([^;]*).*$)|^.*$/, "$1");

    var button = $('.changeBg');
    button.on('click', function (event) {
        event.preventDefault();

        /* menjalankan fungsi dari input */
        eval($(this).val().toLowerCase() + "();");

        button.not($(this)).removeAttr('disabled');
        if ($(this).val() != "Reset") {
            $(this).attr('disabled', '');

            /* Nah Disini barulah menyimpan value dari input apakah Nightmode apakah Daylight */
            document.cookie = "bgColor="+$(this).val();
        }
    });

    /* If the cookie is not empty on page load, execute the function of the same name */
    if(bgColor.length &gt; 0)
    {     
        eval(bgColor.toLowerCase()+'()');

        /* Disable the button associated with the function name */
        $('button[value="'+bgColor+'"]').attr("disabled","disabled");
    }
});
</script>
<script type='text/javascript'>
/* MENDETEKSI JIKA BACKGROUND PUTIH MAKA INPUT OTOMATIS GANTI MENJADI VALUE NIGHT DAN SEBALIKNYA*/
$(document).ready(function() {
if($('#body').is('.lightSwitch')){
  $("#nighter").css({"display":"inline","opacity":"100"});
  $("#dayter").css({"display":"none","opacity":"0"});
    } 
 else if($('#body').is('.darkSwitch')){
  $("#nighter").css({"display":"none","opacity":"0"});
  $("#dayter").css({"display":"inline","opacity":"100"});
 }
});
</script>

Nah CSS Dan jQuery sudah terpasang , sekarang kita butuh input tipe button untuk memanggil jQuery Yang tadi di pasang.
kita tambahkan Button seperti di bawah ini.
<input class='changeBg' id='nighter' onclick='night();' style='display:inline;opacity:100' type='button' value='Night'/>
<input class='changeBg' id='dayter' onclick='day();' style='display:none;opacity:0' type='button' value='Day'/>

Untuk penempatan Input Button , kalian bisa taruh dimana saja.


Jika semua sudah tertata rapih maka secara keseluruhan akan terlihat seperti ini.
Spoiler
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
  <head>

  <b:if cond='data:blog.pageType == &quot;index&quot;'>
<title><data:blog.pageTitle/></title>
<b:else/>

<title><data:blog.pageName/> - <data:blog.title/></title>
</b:if>
 
<title><data:blog.pageTitle/></title>
  <b:skin><![CDATA[/* ----------------------------------------------- */



]]></b:skin>
<style type='text/css'>
/* CSS INPUT*/
input#nighter,input#dayter{border:0;}
input#nighter,input#dayter{background:rgb(255,255,255);color:#f694a0;cursor:pointer;margin:19px 4px;padding:3px 5px 3px 6px;text-decoration:none;border-radius:3px;font-size:9px;transition:all .3s ease;box-shadow:inset 0 0 0 1px #f694a0;font-weight:400}
input#nighter:hover,input#dayter:hover {background:#f694a0;color:#fff;}
/* CSS NIGHTMODE */
.darkSwitch{background:#34495e}
/* CSS DAYLIGHTMODE */
.lightSwitch{background:#ffffff}
</style>
   </head>

   <body id='body'>
      <!-- input untuk kalian taruh dimana pun -->
<li class='aginfo'><input class='changeBg' id='nighter' onclick='night();' style='display:inline;opacity:100' type='button' value='Night'/></li>
<li class='aginfo'><input class='changeBg' id='dayter' onclick='day();' style='display:none;opacity:0' type='button' value='Day'/></li>
   <b:section id='header' showaddelement='yes'/>   

<b:section class='main' id='main' preferred='yes' showaddelement='no'>
     <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>
     
     </b:widget>
   </b:section>
<script type='text/javascript'>
/* MERESPON INPUT JIKA DI KLIK OLEH PENGUNJUNG */
function day() {
    body.className = "lightSwitch";
  $("#nighter").css({"display":"inline","opacity":"100"});
  $("#dayter").css({"display":"none","opacity":"0"});
};

function night() {
    body.className = "darkSwitch";
  $("#nighter").css({"display":"none","opacity":"0"});
  $("#dayter").css({"display":"inline","opacity":"100"});
};
/*
function reset() {
    body.className = "loading";
};
*/
$(function () {
    /* RegEx untuk mengambil "bgColor" dari cookie */
    var bgColor = document.cookie.replace(/(?:(?:^|.*;\s*)bgColor\s*\=\s*([^;]*).*$)|^.*$/, "$1");

    var button = $('.changeBg');
    button.on('click', function (event) {
        event.preventDefault();

        /* menjalankan fungsi dari input */
        eval($(this).val().toLowerCase() + "();");

        button.not($(this)).removeAttr('disabled');
        if ($(this).val() != "Reset") {
            $(this).attr('disabled', '');

            /* Nah Disini barulah menyimpan value dari input apakah Nightmode apakah Daylight */
            document.cookie = "bgColor="+$(this).val();
        }
    });

    /* If the cookie is not empty on page load, execute the function of the same name */
    if(bgColor.length &gt; 0)
    {     
        eval(bgColor.toLowerCase()+'()');

        /* Disable the button associated with the function name */
        $('button[value="'+bgColor+'"]').attr("disabled","disabled");
    }
});
</script>
<script type='text/javascript'>
/* MENDETEKSI JIKA BACKGROUND PUTIH MAKA INPUT OTOMATIS GANTI MENJADI VALUE NIGHT DAN SEBALIKNYA*/
$(document).ready(function() {
if($('#body').is('.lightSwitch')){
  $("#nighter").css({"display":"inline","opacity":"100"});
  $("#dayter").css({"display":"none","opacity":"0"});
    } 
 else if($('#body').is('.darkSwitch')){
  $("#nighter").css({"display":"none","opacity":"0"});
  $("#dayter").css({"display":"inline","opacity":"100"});
 }
});
</script>
  </body>
   </html>

Nah demikian tutorial dari saya.
Salam blogging 🙋

Night Mode + jQuery Cookies https://stackoverflow.com/questions/17113193/day-night-mode-css-jquery-cookies

  • Untuk memasukan gambar silakan upload gambar pada komentar disqus.
  • Untuk memasukan link silahkan cantumkan link pada komentar tanpa menggunakan tag <a>.
  • Untuk menulis huruf bold silahkan gunakan <strong>...</strong> atau <b>...</b>.
  • Untuk menulis huruf italic silahkan gunakan <em>...</em> atau <i>...</i>.
  • Untuk menulis huruf underline silahkan gunakan <u>...</u>.
  • Untuk menulis huruf strikethrought silahkan gunakan <strike>...</strike>.
  • Untuk menulis kutipan pendek gunakan <q>...</q>.
  • Untuk menulis kutipan panjang gunakan <blockqoute>...</blockqoute>.
  • Untuk menyembunyikan konten panjang gunakan <spoiler>...</spoiler>.
  • Untuk menulis syntax highlighter silahkan gunakan <pre><code>...</code></pre>, dan silahkan parse kode pada tab TOOLS.