Cara Membuat Fitur Floating Night Mode di Blogger


RENDIANSYAH - Cara Membuat Fitur Floating Night Mode di Blogger - Memang sudah banyak artikel tentang cara membuat night mode di blogger. Tapi kali ini saya memberikan tutorial sedikit berbeda dari sebelumnya, yaitu dengan firur floating atau melayang.

Night Mode pada blogger memang kegunaannya sama saja dengan night mode pada smartphone Anda. Night mode akan membantu Anda untuk menghemat baterai pada smartphone maupun laptop/pc. Serta menjaga mata agar tidak terlalu banyak cahaya.

Baiklah tidak usah banyak bicara lagi mari kita langsung saja ke caranya. Untuk caranya Anda langaung simak artikel berikut ini dengan cermat dan teliti, agar tidak terjadi kesalahan saat pemasangan.

Cara Memasang Fitur Floating Night Mode di Blogger

Pertama, login kedalam Blogger > menu Tema > klik tombol Edit HTML, tambahkan CSS dibawah ini tepat diatas kode ]]></b:skin> atau </style>

/* Button Night Mode*/
.btn-nightmode{position:fixed;float:left;z-index:99;bottom:20px;left:20px;font-size:15px;padding:10px;border-radius:50%;background:#00A3FE;text-align:center}
.btn-nightmode svg{width:24px;height:24px;vertical-align: -5px;background-repeat: no-repeat !important;content: ''}
.btn-nightmode svg path{fill:#fff}
.check {display: none}
.btn-nightmode .iconmode .openmode{display:block}
.btn-nightmode .iconmode .closemode{display:none}
.btn-nightmode .check:checked ~ .iconmode .openmode{display:none}
.btn-nightmode .check:checked ~ .iconmode .closemode{display:block}
/* Night Mode */
.Night{background:#202124;color:rgba(255,255,255,.9)}
.Night blockquote,.Night kbd{background:#17181a;color:rgba(255,255,255,.9)}

Untuk menambahkan CSS lainnya tambahkan tag .Night contoh .Night CSS1,.Night CSS2{background:#fff}

Selanjutnya, tambahkan kode HTML dan JavaScript dibawah ini tepat diatas kode </body>

<div class='btn-nightmode'><input class='check' id='btn-nightmode' title='Night Dark' type='checkbox'/>
<label class='iconmode' for='btn-nightmode'>
<svg class='openmode' viewBox='0 0 24 24'><path d='M12,18C11.11,18 10.26,17.8 9.5,17.45C11.56,16.5 13,14.42 13,12C13,9.58 11.56,7.5 9.5,6.55C10.26,6.2 11.11,6 12,6A6,6 0 0,1 18,12A6,6 0 0,1 12,18M20,8.69V4H15.31L12,0.69L8.69,4H4V8.69L0.69,12L4,15.31V20H8.69L12,23.31L15.31,20H20V15.31L23.31,12L20,8.69Z'/></svg>
<svg class='closemode' viewBox='0 0 24 24'><path d='M20 8.69V4h-4.69L12 .69 8.69 4H4v4.69L.69 12 4 15.31V20h4.69L12 23.31 15.31 20H20v-4.69L23.31 12 20 8.69zm-2 5.79V18h-3.52L12 20.48 9.52 18H6v-3.52L3.52 12 6 9.52V6h3.52L12 3.52 14.48 6H18v3.52L20.48 12 18 14.48zM12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5z'/></svg>
</label>
</div>
<script type='text/javascript'>
//<![CDATA[
// Night Mode
$(document).ready(function(){$("body").toggleClass(localStorage.toggled),$("#btn-nightmode").on("click",function(){"Night"!=localStorage.toggled?($("body").toggleClass("Night",!0),localStorage.toggled="Night",$(".section-center").css("display","block")):($("body").toggleClass("Night",!1),localStorage.toggled="",$(".section-center").css("display",""))}),$("body").hasClass("Night")?$("#btn-nightmode").prop("checked",!0):$("#btn-nightmode").prop("checked",!1)});
//]]>
</script>

Terakhir, tinggal simpan Tema dan lihat hasilnya yang sudah kita buat tadi. Untuk menglihat hasilnya ada diblog ini, dipojok kiri bawah.

Jadi demikian tutorial Cara membuat fitur floating diblogger. Jika Anda mengalami kesusahan atau gagal dalam pemasangan komentar dibawah agar bisa admin bantu.

Post a Comment

Previous Post Next Post