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'/>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 > 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 == "index"'>
<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 > 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