Cara Membuat Mode Malam (Night Mode) di Blogger

DezignDesu - Dark Mode atau sering di namakan Mode Malam (Night Mode) adalah salah satu tampilan yang menjadikan website/blog dari sebelumnya mode terang menjadi mode dark/gelap/malam/terserah kalian. Selain membuat tampilan web/blog anda jadi lebih keren, anda juga bisa mengatur warna gelapnya supaya pengunjung anda tidak sakit mata membaca konten pada web/blog kalian.

Baiklah, mari kita langsung menuju 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.

• Silahkan  kamu login ke Blogger.com - Masuk ke Dashboard
• Menuju menu Tema, Lalu Klik EDIT HTML
• Cari kode ]]></b:skin> dengan  klik CTRL+F
• Masukan kode CSS dibawah ini di ATAS code tersebut ( ]]></b:skin> ).

/* Button Dark Mode DezignDesu */
.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 DezignDesu*/
.DarkMode #wrapper {background: #292e38;}
.DarkMode #HTML3 {background:#1d2129;}
.DarkMode #footer-widget-container {background:#1d2129;}
.DarkMode .share-this-pleaseeeee {background:#292e38;}
.DarkMode .related-post h4{background:#292e38;}
.DarkMode #label-info-th {background:#1d2129;}
.DarkMode body {background:#1d2129;}
.DarkMode .post-body {color:#cccccc}
.DarkMode #baca-juga h2 {color:#cccccc;background:#1d2129}
.DarkMode .label-info-th a {color:#cccccc;background:#3d4658}
.DarkMode li.recent-posts a{color:#cccccc}
.DarkMode .recent-posts-title h2{color:#cccccc}
.DarkMode .Recent_Post_Mas_Tamvan .recent-post-mas-tamvan span.mastamvan_title a{color:#cccccc}
.DarkMode span.mastamvan_title a .Recent_Post_Mas_Tamvan .recent-post-mas-tamvan {color:#cccccc;background:#1d2129}
.DarkMode .Recent_Post_Mas_Tamvan .recent-post-mas-tamvan .widget-content {color:#cccccc;background:#1d2129}
.DarkMode .post-info {color:#cccccc}
.DarkMode {background:#1d2129;}
.DarkMode h2.post-title a {color:#9e9e9e;}
.DarkMode h2.post-title a:hover {color:#f17f43}
.DarkMode .post-title {color:#1e90ff}
.DarkMode ul.nav-social {color:#1d2129}
.DarkMode .post-snippet {color:#cccccc}
.DarkMode #ignielNewsletter {background:#292e38;}
.DarkMode #Label1{background:#292e38;}
.DarkMode .post{background:#292e38;border-bottom-color: #252a33;}
.DarkMode .PopularPosts h2{background:#343944;}
.DarkMode .latest-post-title h2{background:#292e38;border-bottom-color: #313640;}
.DarkMode .newspaptext{color:#9e9e9e}
.DarkMode .PopularPosts h2 span{color:#9e9e9e}
.DarkMode .list-label-widget-content ul li {border-bottom-color: #313640;}
.DarkMode .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;}
.DarkMode #ignielNewsletter .medsos__ {border-top-color: #313640;}
.DarkMode #footer-container{background:#12161f;}
.DarkMode #footer-navmenu{background:#171b25;}
.DarkMode .sidebar h2 {color:#b7b7b7;border-bottom-color: #313640;}
.DarkMode .sidebar-sticky h2 {color:#b7b7b7;border-bottom-color: #313640;}
.DarkMode .latest-post-title h2 {color:#b7b7b7;border-bottom-color: #313640;}
.DarkMode .above-post-widget h2 {color:#b7b7b7;border-bottom-color: #313640;}
.DarkMode .comments h3 {color:#b7b7b7;border-bottom-color: #313640;}
.DarkMode .breadcrumbs {color:#b7b7b7;border-bottom-color: #313640;}
.DarkMode .btnsocialshare {background:#383c44;}
.DarkMode .label-line::before{background: #1d2129;}
.DarkMode .label-line-c::before {background: #333740;}
.DarkMode a.showcontent:hover {background: #373a42;}
.DarkMode a.showcontent{background: #292e38}
.DarkMode #ignielNewsletter input{background: #272b33;border-color:#2b303a;}
.DarkMode .comments .comments-content .comment-content {color:#ffffff}
.DarkMode div#Label1 h2 {border-bottom: 1px solid #272b33;background: #343944;}
.DarkMode .related-post-style-3 .related-post-item-title {color: #bbb;}
.DarkMode #baca-juga ul {border: 2px solid #333740;}
.DarkMode #baca-juga h2 {border: 2px solid #292e38;}
.DarkMode #comments a.hiddencontent {background: #424854;}
.DarkMode .comments .comments-content .comment-thread ol {background: #292e38;}
.DarkMode .comments .comments-content .inline-thread {background: #292e38;}

• Jangan di tutup terlebih dahulu pada menu EDIT HTML. Sekarang kita akan membuat tombol Dark Modenya. Sebenarnya tutorial ini di tujukan untuk pengguna theme viomagz. Namun, tidak membuat template lainnya di kecualikan. Silahkan mengaplikasikan sendiri bagi pengguna template selain viomagz.
• Silakan letakkan kode di bawah ini tepat di ATAS </header>. Jika template selain viomagz, atau bisa disesuaikan sendiri lokasinya, tergantung minat kalian.

<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>

• Terakhir, silahkan tambahkan script JS dibawah ini di tepat ATAS kode </body>

<script type='text/javascript'>
//<![CDATA[
/* Dark Mode, Mode Malam by DezignDesu */
$(document).ready(function(){$("body").toggleClass(localStorage.toggled),$("#modedark").on("click",function(){"DarkMode"!=localStorage.toggled?($("body").toggleClass("DarkMode",!0),localStorage.toggled="DarkMode",$(".section-center").css("display","block")):($("body").toggleClass("DarkMode",!1),localStorage.toggled="",$(".section-center").css("display",""))}),$("body").hasClass("DarkMode")?$("#modedark").prop("checked",!0):$("#modedark").prop("checked",!1)});
//]]>
</script>

• Setelah semua selesai, klik Simpan / Save.
• OK, Selesaii.. Sekarang silahkan cek pada Blog kalian masing - masing.

Sekian dulu posting dari saya. kiranya masih bingung, silahkan komentar pada kolom komentar yang tersedia, sebisa mungkin admin akan membantu masalah kalian mengenai tutorial di posting Cara Membuat Mode Malam (Night Mode) di Blogger. Jika tutorial imi memang berguna, jangan lupa di share ya... Maaf admin juga masih tahap belajar, jadi kita belajar bersama saja bila masih kurang faham, heheheh :v