Cara Pasang Tombol Nihgt Mode Di Blog Dengan Mudah

Cara Pasang Tombol Nihgt Mode Di Blog Dengan Mudah

- Kali ini saya akan membagikan tutorial perihal Cara Pasang Tombol Nihgt Mode di Blog Dengan Mudah. Dengan adanya mode/tombol night mode pada blog, pengunjung sanggup menyesuaikan pencahayaan redup ketika mengunjungi blog. Oke untuk prakteknya, silahkan ikuti tutorial dibawah ini.

Langkah-langkah memasang/membuat tombol night mode pada blog :

Login ke akun blogger

Copy instruksi jquery dibawah ini, kemudian taruh di atas instruksi </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>

Kode jQuery library hanya sanggup di pasang 1x saja, jikalau teman sudah memasang instruksi jQuery library lewati langkah ini, alasannya akan mengakibatkan konflik / semua instruksi jQuery tidak akan berfungsi.

Cari instruksi ]]></b:skin> (tekan CTRL+F untuk memudahkan pencarian), kemudian copy instruksi css dibawah ini kemudian taruh di atas instruksi tadi.

/* 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;

Kode yang saya blok warna itu ialah instruksi css template blog ini. Anda sanggup merubahnya sesuai instruksi css pada blog Anda.

Berikutnya ialah memasang instruksi javascript pemanggil tombol night mode, copy instruksi dibawah ini kemudian taruh di atas instruksi </body>.

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
    $("button.tombol-nightmode").click(function(){
        $("body").toggleClass('nightmode');
    });
});
</script>

Selanjutnya memasang tombol night mode pada blog. Anda copy instruksi tombol dibwah ini kemudian taruh di bab yang Anda inginkan. Saran saya pada bab sajian navigasi blog.

<button class='tombol-nightmode'><i class='fa fa-sun-o fa-spin'></i> Night Mode</button> 

Keterangan: Untuk memasang tombol night mode sanggup sesuaikan menyerupai pada gambar dibawah ini. Atau anda bebas meletakannya dibagian template yang sanggup dijangkau pengunjung blog. Sedangkan instruksi fa fa-sun-o fa-spin, merupakan instruksi ikon font awesome. Jika blog Anda belum memasang font awesome,maka ikon tersebut tidak tampil sempurna. Pastikan blog anda sudah memasang font awesome.

contoh penempatan tombol Night Mode pada blog .

Save template Anda. Selamat berkreasi, supaya berhasil sobat.

Praktis bukan? Sekian artikel Cara Pasang Tombol Nihgt Mode di Blog Dengan Mudah, jangan lupa komentar Anda jikalau mengalami hambatan dalam pemasangan tombol night mode ini.