Cara Membuat Fitur Dark Mode di Template Viomagz

Saat ini para blogger berlomba untuk mempercantik tampilan blognya agar lebih disukai pengunjung serta semakin SEO friendly. Salah satu hal yang disukai pengunjung saat membaca artikel dalam blog adalah menggunakan fitur night mode.

Night mode atau sering disebut dark mode adalah sebuah fitur yang lebih dikenal dengan nama mode malam. Fitur ini berfungsi untuk merubah tampilan blog menjadi gelap dengan hanya sekali tekan.

Salah satu keunggulan fitur dark mode adalah bisa membuat pengunjung blog tetap nyaman ketika membaca artikel meski sedang dalam keadaan low light.

Nah dalam artikel kali ini, saya akan membagikan tutorial cara membuat fitur dark mode di template viomagz versi berapapun.

Cara Membuat Fitur Dark Mode di Viomagz

Berikut ini adalah beberapa tahapan yang harus dilakukan untuk membuat menu dark mode pada template viomagz.

• Buka dashboard blogger
• Pilih tema
• Pilih Edit HTML

Cari kode ]]></b:skin>, dan letakan kode dibawah ini sebelum kode tersebut.

/* Dark Mode */
/* Button Dark Mode */
.modedark{display:inline-block;float:right;margin-top:3px;position:absolute;right:80px;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:80px;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 Night Mode */
.Night #wrapper{background:#292e38}
.Night #HTML3{background:#1d2129}
.Night #header-container{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:#cccccc}
.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:#9e9e9e}
.Night h2.post-title a:hover{color:#f17f43}
.Night .post-title{color:#fff}
.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 ul li a:hover{color:#f17f43!important}
.Night .PopularPosts1 h2{background:#343944}
.Night .PopularPosts ul li a{color:#9e9e9e!important}
.Night .PopularPosts ul li:nth-child(1){background-color:#292e38}
.Night .PopularPosts ul li:nth-child(2){background-color:#292e38}
.Night .PopularPosts ul li:nth-child(3){background-color:#292e38}
.Night .PopularPosts ul li:nth-child(4){background-color:#292e38}
.Night .PopularPosts ul li:nth-child(5){background-color:#292e38}
.Night .PopularPosts ul li:nth-child(6){background-color:#292e38}
.Night .PopularPosts ul li:nth-child(7){background-color:#292e38}
.Night .PopularPosts ul li:nth-child(8){background-color:#292e38}
.Night .PopularPosts ul li:nth-child(9){background-color:#292e38}
.Night .PopularPosts ul li:nth-child(10){background-color:#292e38}
.Night .PopularPosts .item-thumbnail{margin:0 0 0 0}
.PopularPosts .item-snippet{font-size:11px}
.Night .latest-post-title h2{background:#292e38;border-bottom-color:#313640}
.Night .newspaptext{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 h2{color:#b7b7b7;border-bottom-color:#313640}
.Night .sidebar-sticky h2{color:#b7b7b7;border-bottom-color:#313640}
.Night .latest-post-title h2{color:#b7b7b7;border-bottom-color:#313640}
.Night .above-post-widget h2{color:#b7b7b7;border-bottom-color:#313640}
.Night #back-to-top{background:#454952}
.Night .comments h3{color:#b7b7b7;border-bottom-color:#313640}
.Night .breadcrumbs{color:#b7b7b7;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:#ffffff}
.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}

Catatan:

CSS diatas sudah saya setting persis seperti di blog ini. Sehingga anda tidak perlu ribet lagi harus mengotak-atik sendiri.

Tapi apabila tampilan tombol dark modenya tidak sesuai dengan template yang Anda gunakan, maka silahkan sesuaikan dengan mengedit kode yang ditandai warna kuning.

• Semakin besar nilainya, semakin ke sisi kiri tombol dark modenya.
• Semakin kecil nilainya, semakin ke sisi kanan tombol dark modenya.

Selanjutnya, silahkan cari kode </body>, lalu letakan kode dibawah ini diatas kode tersebut.

<script type='text/javascript'>
//<![CDATA[
/* Dark Mode */
$(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>

Kode javascript diatas adalah kode pemanggil untuk mengaktifkan fitur dark modenya.

Cari kode dibawah ini:

<div class='teknsearch'>atau kode dibawah ini.

<div class='teknsearch'>
<form action='/search' class='search' method='get'>
<input class='check' id='teknsearch' type='checkbox'/>
<input class='input' name='q' placeholder='Cari artikel...' type='text'/>
<label class='icon' for='teknsearch'>
<svg class='open' viewBox='0 0 24 24'><path d='M19.38 17.019l-4.737-4.029c-0.49-0.441-1.013-0.643-1.437-0.624 1.118-1.31 1.794-3.009 1.794-4.867 0-4.142-3.358-7.5-7.5-7.5s-7.5 3.358-7.5 7.5 3.358 7.5 7.5 7.5c1.857 0 3.557-0.676 4.867-1.794-0.020 0.423 0.183 0.947 0.624 1.437l4.029 4.737c0.69 0.767 1.817 0.831 2.504 0.144s0.623-1.814-0.144-2.504zM7.5 12.5c-2.761 0-5-2.239-5-5s2.239-5 5-5 5 2.239 5 5-2.239 5-5 5z'></path></svg>
<svg class='close' viewBox='0 0 24 24'><path d='M12,2C17.53,2 22,6.47 22,12C22,17.53 17.53,22 12,22C6.47,22 2,17.53 2,12C2,6.47 6.47,2 12,2M15.59,7L12,10.59L8.41,7L7,8.41L10.59,12L7,15.59L8.41,17L12,13.41L15.59,17L17,15.59L13.41,12L17,8.41L15.59,7Z'></path></svg>
</label>
</form>
</div>

Setelah ditemukan, letakan kode dibawah ini setelah kode diatas.

<div class='modedark' title='Mode Malam'>
<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='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>

Klik simpan tema dan lihat hasilnya.

Kode diatas merupakan tombol open dan close dari menu dark mode yang akan tampil dibagian kanan atas pada header viomagz.

Untuk demonya, silahkan anda lihat pada blog ini.

Kelebihan Fitur Dark Mode di Blog

• Mengubah tampilan normal ke mode malam hanya dengan sekali klik.
• Responsif saat dibuka di versi desktop dan mobile.
• Tidak memberatkan loading secara signifikan.
• Disukai pengunjung saat membaca di area low light.
• Punya nilai plus dibanding blog tanpa fitur dark mode.

Nah itulah cara membuat fitur dark mode di template viomagz yang bisa saya sampaikan. Adapun jika anda ingin memodifikasinya supaya menjadi lebih keren, maka silahkan anda bereksperimen sendiri, dan jika berhasil jangan lupa berbagi scriptnya ya.

Max Ikhsan

Hai, Saya adalah pemilik blog ini. Mau Kerja Sama? Hubungi maxikhsan.cs@gmail.com

Bagikan Artikel