Cara Membuat Tombol Mode Malam (Night Mode) di Blogger - SeriesWans

Serieswans.com - Hallo sahabat blogger, pada kexempatan kali ini saya akan membuat tutorial mengenai cara membuat tombol mode malam atau night mode di blogger. saya membuat tutorial ini juga karena request dari teman-teman yang menghubungi saya lewat kontak email. 

Night Mode atau Mode Malam merupakan salah satu fitur yang digunakan untuk mengubah tampilan template blog anda menjadi terlihat gelap, contohnya saja pada blog serieswans.com yang sudah saya pasang Night Mode. anda bisa menekan tombol mode malam tersebut di pojok kanan bagian header.

Fitur Night Mode ini bervariasi, ada yang di lengkapi dengan tombol switch (seperti blog igniel) atau seperti tombol button. ketika anda mau mengaktifkan mode malam atau ingin kembali ke tampilan awal (Light Mode), anda tinggal menekan tombol itu kembali.

Selain membuat tampilan blog anda jadi lebih keren, anda juga bisa mengatur warna gelapnya supaya pengunjung anda tidak sakit mata melihat isi blog anda,hehe.

Oke kita langsung saja ke tutorialnya, silahkan anda pahami dan praktekan di template blog anda. saya sendiri menggunakan template viomagz. jika anda menggunakan template yang berbeda, silahkan pahami sturktur kodenya lalu sesuaikan dengan kode Night Modenya. selebihnya bisa anda kreasikan sendiri ya.

Cara Membuat Tombol Night Mode atau Mode Malam di Blogger

• Pertama, buka terlebih dahulu akun blogger anda dan masuk ke menu Dashboard
• Pilih Tema atau Template => Edit HTML
• Silahkan cari kode ]]></b:skin> dengan menekan tombol CTRL + F
• Kemudian salin kode di bawah ini dan letakan di atas kode tersebut.

/* Button Dark Mode */
.modedark{display:inline-block;float: right;margin-top: 3px;position:absolute;right:45px;top: 0;z-index:999;}
.modedark svg{
width:24px;
height:24px;
vertical-align: -5px;
background-repeat: no-repeat !important;
content: '';
}
.modedark svg path{
fill:#fff;
}
.modedark .check:checked ~ .NavMenu{
opacity:1;
visibility:visible;
top:45px;
min-width:200px;
transition:all .3s ease;
z-index:2;
}
.iconmode {
cursor: pointer;
display: block;
padding: 8px;
background-position: center;
transition: all .5s linear;
}
.iconmode:hover{
border-radius: 100px;
background: rgba(0,0,0,.2) radial-gradient(circle, transparent 2%, rgba(0,0,0,.2) 2%) center/15000%;
}
.check {
    display: none;
}
.modedark .iconmode .openmode{
display:block;
}
.modedark .iconmode .closemode{
display:none;
}
.modedark .check:checked ~ .iconmode .openmode{
display:none;
}
.modedark .check:checked ~ .iconmode .closemode{
display:block;
}
/* Warna Dark Mode */
/* Night Mode serieswans.com */
.Night #wrapper {background: #292e38;}
.Night #HTML3 {background:#1d2129;}
.Night #footer-widget-container {background:#1d2129;}
.Night .share-this-pleaseeeee {background:#292e38;}
.Night .related-post h4{background:#292e38;}
.Night #label-info-th {background:#1d2129;}
.Night body {background:#1d2129;}
.Night .post-body {color:#fff;background:#292e38;}
.Night .post-body table.tr-caption-container td{color:#fff;}
.Night .post-body table td{background:no-repeat;border:1px solid #f5f5f5;padding:10px;text-align:left;vertical-align:top}
.Night #baca-juga h2 {color:#cccccc;background:#1d2129}
.Night .label-info-th a {color:#cccccc;background:#3d4658}
.Night li.recent-posts a{color:#cccccc}
.Night .recent-posts-title h2{color:#cccccc}
.Night .Recent_Post_Mas_Tamvan .recent-post-mas-tamvan span.mastamvan_title a{color:#cccccc}
.Night span.mastamvan_title a .Recent_Post_Mas_Tamvan .recent-post-mas-tamvan {color:#cccccc;background:#1d2129}
.Night .Recent_Post_Mas_Tamvan .recent-post-mas-tamvan .widget-content {color:#cccccc;background:#1d2129}
.Night .post-info {color:#cccccc}
.Night {background:#1d2129;}
.Night h2.post-title a {color:#000;}
.Night h2.post-title a:hover {color:#f17f43}
.Night .post-title {color:#1e90ff}
.Night ul.nav-social {color:#1d2129}
.Night .post-snippet {color:#cccccc}
.Night #ignielNewsletter {background:#292e38;}
.Night #Label1{background:#292e38;}
.Night .post{background:#292e38;border-bottom-color: #252a33;}
.Night .PopularPosts h3{background:#343944;}
.Night .latest-post-title h3{border-bottom-color: #313640;}
.Night .newspaptext{color:#9e9e9e}
.Night .PopularPosts h3 span{color:#9e9e9e}
.Night .list-label-widget-content ul li {border-bottom-color: #313640;}
.Night .img-thumbnail img {background: #252931 linear-gradient(to right, rgba(255, 255, 255, 0) 5%, rgb(49, 54, 64) 20%, rgba(255, 255, 255, 0) 30%);background-size: 800px 104px;}
.Night #ignielNewsletter .medsos__ {border-top-color: #313640;}
.Night #footer-container{background:#12161f;}
.Night #footer-navmenu{background:#171b25;}
.Night .sidebar h3 {color:#b7b7b7;border-bottom-color: #313640;}
.Night .sidebar-sticky h3 {color:#fff;border-bottom-color: #313640;}
.Night .latest-post-title h3 {color:#fff;border-bottom-color: #313640;}
.Night .above-post-widget h3 {color:#b7b7b7;border-bottom-color: #313640;}
.Night .comments h3 {color:#fff;border-bottom-color: #313640;}
.Night .breadcrumbs {color:#fff;border-bottom-color: #313640;}
.Night .btnsocialshare {background:#383c44;}
.Night .label-line::before{background: #1d2129;}
.Night .label-line-c::before {background: #333740;}
.Night a.showcontent:hover {background: #373a42;}
.Night a.showcontent{background: #292e38}
.Night #ignielNewsletter input{background: #272b33;border-color:#2b303a;}
.Night .comments .comments-content .comment-content {color:#000;}
.Night div#Label1 h2 {border-bottom: 1px solid #272b33;background: #343944;}
.Night .related-post-style-3 .related-post-item-title {color: #bbb;}
.Night #baca-juga ul {border: 2px solid #333740;}
.Night #baca-juga h2 {border: 2px solid #292e38;}
.Night #comments a.hiddencontent {background: #424854;}
.Night .comments .comments-content .comment-thread ol {background: #292e38;}
.Night .comments .comments-content .inline-thread {background: #292e38;}

• Sekarang tinggal meletakan tombol Night Modenya,  contohnya pada header atau terserah anda mau memasangnya dmana.
• Untuk meletakan di bagian header, silahkan cari kode berikut

</header>

• Lalu salin kode di bawah ini dan letakan di atas kode tersebut.

<div class='modedark'><input class='check' id='modedark' title='Mode Dark' type='checkbox'/>
<label class='iconmode' for='modedark'>
<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='M14.3,16L13.6,14H10.4L9.7,16H7.8L11,7H13L16.2,16H14.3M20,8.69V4H15.31L12,0.69L8.69,4H4V8.69L0.69,12L4,15.31V20H8.69L12,23.31L15.31,20H20V15.31L23.31,12L20,8.69M10.85,12.65H13.15L12,9L10.85,12.65Z'/></svg>
</label>
</div>

• Selanjutnya cari kode </body>  , lalu salin kode di bawah ini dan letakan di atas kode tersebut.

<script type="text/javascript">
    var _0xcf07=[&quot;x74x6Fx67x67x6Cx65x64&quot;,&quot;x74x6Fx67x67x6Cx65x43x6Cx61x73x73&quot;,&quot;x62x6Fx64x79&quot;,&quot;x63x6Cx69x63x6B&quot;,&quot;x4Ex69x67x68x74&quot;,&quot;x64x69x73x70x6Cx61x79&quot;,&quot;x62x6Cx6Fx63x6B&quot;,&quot;x63x73x73&quot;,&quot;x2Ex73x65x63x74x69x6Fx6Ex2Dx63x65x6Ex74x65x72&quot;,&quot;&quot;,&quot;x6Fx6E&quot;,&quot;x23x6Dx6Fx64x65x64x61x72x6B&quot;,&quot;x68x61x73x43x6Cx61x73x73&quot;,&quot;x63x68x65x63x6Bx65x64&quot;,&quot;x70x72x6Fx70&quot;,&quot;x72x65x61x64x79&quot;];$(document)[_0xcf07[15]](function(){$(_0xcf07[2])[_0xcf07[1]](localStorage[_0xcf07[0]]),$(_0xcf07[11])[_0xcf07[10]](_0xcf07[3],function(){_0xcf07[4]!= localStorage[_0xcf07[0]]?($(_0xcf07[2])[_0xcf07[1]](_0xcf07[4],!0),localStorage[_0xcf07[0]]= _0xcf07[4],$(_0xcf07[8])[_0xcf07[7]](_0xcf07[5],_0xcf07[6])):($(_0xcf07[2])[_0xcf07[1]](_0xcf07[4],!1),localStorage[_0xcf07[0]]= _0xcf07[9],$(_0xcf07[8])[_0xcf07[7]](_0xcf07[5],_0xcf07[9]))}),$(_0xcf07[2])[_0xcf07[12]](_0xcf07[4])?$(_0xcf07[11])[_0xcf07[14]](_0xcf07[13],!0):$(_0xcf07[11])[_0xcf07[14]](_0xcf07[13],!1)})
</script>

• Update 28 Januari 2020 : Jika kode Javascript di atas tidak berhasil, silahkan pakai kode yang kedua di bawah ini

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){$("body").toggleClass(localStorage.toggled),$("#modedark").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")?$("#modedark").prop("checked",!0):$("#modedark").prop("checked",!1)});
//]]>
</script>

• Setelah itu simpan Tema dan cek hasilnya.

Silahkan anda atur tempat untuk meletakan Tombol Night Modenya dan atur juga ukuran tombol di setiap ukuran layar, silahkan cek menggunakan responsinator

Nah,mungkin itu saja tutorial kali ini mengenai Cara Membuat Tombol Mode Malam (Night Mode) di Blogger. silahkan berkomentar bagi anda yang masih belum paham. semoga bermanfaat.

Related Posts