Cara Membuat Tombol Night Mode Dengan CSS

 
Cara Membuat Tombol Night Mode Dengan CSS - Night Mode adalah mode dimana kita melihat website dalam tampilan gelap, biasanya ini dipakai saat diruang sekitar tidak ada cahaya dan untuk memperkecil cahaya supaya tidak silau dibuatlah night mode. Ini adalah tutorial untuk bagaimana cara membuat tombol mode malam atau night mode diblog dengan CSS ala blognya bang oji Zynation, nah disini saya akan mempraktekannya ke template Simplify yang kalian bisa lihat sendiri demonya di blog ini. Dan perlu diketahui lagi karna template yang saya pakai mungkin berbeda maka dari itu untuk peletakkan button night mode-nya nanti mungkin akan sedikit berbeda ya.

Download Template Simplify Premium V4

Yang pertama kamu lakukan adalah meletakkan kode dibawah sebelum kode ]]></b:skin> template kamu.
/* CSS Night Mode */
.nightmode {
background: rgba(84,83,84,1);
background: -moz-linear-gradient(left, rgba(84,83,84,1) 0%, rgba(28,28,28,1) 100%);
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(84,83,84,1)), color-stop(100%, rgba(28,28,28,1)));
background: -webkit-linear-gradient(left, rgba(84,83,84,1) 0%, rgba(28,28,28,1) 100%);
background: -o-linear-gradient(left, rgba(84,83,84,1) 0%, rgba(28,28,28,1) 100%);
background: -ms-linear-gradient(left, rgba(84,83,84,1) 0%, rgba(28,28,28,1) 100%);
background: linear-gradient(to right, rgba(84,83,84,1) 0%, rgba(28,28,28,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#545354', endColorstr='#1c1c1c', GradientType=1 );
color: #fff;
}
.nightmode div#wrapper {background:#222;}
.nightmode .post{background:#222;color:#fff;}
.nightmode .author_description_container h4 a{background:#222;color:#fff;}
.nightmode #PopularPosts1 ul li .item-title a{background:#222;color:#fff;}
.nightmode .PopularPosts ul li a{background:#222;color:#fff;}
.nightmode .tabs label{background:#222;color:#fff;}
.nightmode .tabs{background:#222;color:#fff;}
.nightmode .relhead{background:#222;color:#fff;}
.nightmode .halaman-kiri{background:#222;color:#fff;}
.nightmode .halaman-kanan{background:#222;color:#fff;}
.nightmode .banner .widget{background:#222;color:#fff;}
.nightmode .banner2 .widget{background:#222;color:#fff;}
.nightmode #blog-pager{background:#222;color:#fff;}
.nightmode #HTML4 .widget-content{background:#222;color:#fff;}
.nightmode .tabs [id^="tab"]:checked + label{color:#fff;}
.nightmode .maxwrap.header{background:#2c699c;color:#fff;}
.nightmode .comment-set{background:#222;color:#fff;}
.nightmode .comment_body{background:#222;color:#fff;}
.nightmode .disqus-box{background:#222;color:#fff;}
.nightmode .blogger-box{background:#222;color:#fff;}
.nightmode .comment_name a{background:#222;color:#fff;}
.nightmode pre{background:#222;color:#fff;}
.nightmode #search-us input#search-boxy1[type="text"]{background:#fff;color:#222;}
.nightmode button.tombol-nightmode{border: #2c699c solid 2px;color:#222;}
.nightmode #sidebar-wrapper h2{background:#2c699c;color:#fff;}
.nightmode #sidebar-wrapper h3{background:#2c699c;color:#fff;}
.nightmode #sidebar-wrapper h4{background:#2c699c;color:#fff;}
button.tombol-nightmode {
    background: #fff;
    color: #222;
    padding: 3px;
    font-size: 13px;
    border: #222 solid 0px;
    border-radius: 6px;
    line-height: 15px;
    margin-top: 18px;
    cursor: pointer;
Selanjutnya kamu cari kode </body> template kamu lalu pastekan kode dibawah diatas kode tadi.
Untuk kode CSS diatas bisa dilihat yang ditandainya, yang ditandai itu adalah nama css kalian yang akan berubah warna saat tombol night mode di klik, kalau template kalian sama kayak saya mungkin bisa sama kodenya.
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
    $("button.tombol-nightmode").click(function(){
        $("body").toggleClass('nightmode');
    });
});
</script>
Dan untuk yang terakhir kode pemanggil button atau tombol night modenya
<button class='tombol-nightmode'><i class='fa fa-sun-o fa-spin'></i> Night Mode</button> 
Perlu kamu ketahui kode diatas kamu bisa letakkan dimana saja dimana kamu ingin meletakkan tombol night modenya, disini saya beri contoh untuk yang pakai template simplify mungkin bisa melakukan hal yang sama.



Bisa kamu lihat gambar diatas, dimana saya meletakkannya setelah menu navigasi blog saya yang terakhir, itu jika kamu mau meletakkannya disamping tombol menu jika ditempat lain kamu bisa cari sendiri sesuai template kamu.

Mungkin cukup segitu tutorial cara membuat tombol night mode diblogger, semoga bermanfaat jangan lupa untuk meninggalkan jejak anda dikolom komentar dan follow blog ini supaya update terus. Oh iya untuk yang bingung dan mau bertanya bisa komentar saja dibawah.

0 Response to "Cara Membuat Tombol Night Mode Dengan CSS"

Post a Comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel