Lompat ke konten Lompat ke sidebar Lompat ke footer

Cara Mudah Buat Dark Mode Button di Template Viomagz

Cara Mudah Memasang Tombol Dark Mode (Mode Malam) di Template Viomagz - Tombol dark mode sendiri belakangan ini sangat lah hype dikalangan blogger, baik blogger pemula maupun yang sudah profesional sekalipun. Apalagi pada saat ini semua sosial media seperti twitter, instagram, facebook, dan juga whatsapp sudah memiliki dark mode di aplikasi nya. 

Dan pada artikel kali ini Admin akan berbagi kepada anda bagaimana cara untuk memasang tombol dark mode pada template viomagz buatan mas sugeng, yang mana cara ini adalah cara yang menurut saya sangat work digunakan.

Yap, di awal pembukaan artikel saya bilang bahwa dark mode lagi naik daun pada saat ini di dunia perbloggeran, sebenarnya dark mode sendiri memiliki banuak keunggulan dan keuntungan jika kita gunakan.

Cara Mudah Buat Dark Mode Button di Template Viomagz

Apa sajasih keuntungan menggunakan dark mode?

  • Tentunya mata anda tidak gampang lelah disaat membaca sebuah artikel atau tulisan yang ada pada sebuah blog.
  • Mengurangi cahaya biru yang ada pada smartphone, cahaya biru ini sendiri merupakan salah satu faktor yang membuat pengguna smartphone mengalami yang namanya kanker serta penyakit lain.
  • Tulisan dan artikel yang anda baca akan terlihat sangat jelas.
  • Baterai smartphone yang kalian gunakan akan menjadi sangat hemat serta tidak boros.
  • Terakhir, tentunya blog kalian akan menjadi sangat keren dan kekinian


Memasang Mode Malam Pada Template Viomagz

1. Pertama yang harus kalian lakukan adalah dengan mencari kode pada menu EDIT HTML template anda, kode yang harus anda cari adalah kode sebagai berikut ]]></b:skin> dengan menggunakan CTRL+F kemudian silahkan anda pasang kode yang ada dibawah ini diatas kode ]]></b:skin>. 

/* Button Dark Mode by Syahrul Ramadhan Ganteng */
.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: &amp;amp;amp;#039;&amp;amp;amp;#039;;
}
.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 Setting Aja Gan */
/* Night Mode syahrulramadhan.my.id */
.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;}

2. Pastikan anda tetap berada di menu EDIT HTML pada TEMA Blog anda, kemudian selanjutnya cari kode </header> selanjutkan pastekan kode yang ada dibawah ini pada kode </header> tadi.
<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"></path></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"></path></svg>
</label>
</div>

3. Yang ketiga yaitu cari kode </body>, cara mencarinya pun sama dengan 2 cara di atas, kemudian salin dan tempet kode yang ada dibawah ini diatas kode </body> tadi. 
<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>

4. Terakhir yaitu silahkan kalian Save atau Simpan Tema. Dan dark mode button telah berhasil dipasang kan.

Penutup!

Jika kalian kebingungan atau sedikit tidak paham, kalian dapat memberikan komentar atau kontak Admin melalui laman kontak blog, jika ada waktu luang Admin akan bantu dengan sepenuh hati.

Demikian lah Cara Mudah Buat Dark Mode Button di Template Viomagz, mudah-mudahan bermanfaat.
Syahrul Ramadhan
Syahrul Ramadhan Everyone thinks of changing the world, but no one thinks of changing himself.

Posting Komentar untuk "Cara Mudah Buat Dark Mode Button di Template Viomagz"