 |
| Dark mode viomagz |
Fitur dark mode di waktu belakangan ini menjadi kesukaan para blogger, terkhusus pada semua aplikasi sosial media seperti whatsapp, Instagram dan serta facebook.
Untuk artikel kesempatan kali ini saya akan berbagi tutorial cara memasang fitur dark mode pada template viomagz, versi 4.6 versi 4.7.3 dan template Viomagz lainnya. Bisa juga di semua template platform blogger lainnya anda terapkan.
Penerapan mode malam atau Dark mode sendiri memang sedang diminati ketika ini. Lalu apa fungsi dari fitur dark mode itu? Terdapat banyak keuntungan jika anda menggunakan mode dark mode seperti.
- Menjadikan mata tidak cepat lelah ketika anda membaca tulisan atau artikel
- Menurunkan cahaya biru pada smartphone cahaya biru. Cahaya biru salah satu faktor penyebab penyakit berbahaya seperti kanker dan lain-lain.
- Menjadikan jelas tulisan
- Mengurangi pemakaian baterai smartphone
- Serta yang terakhir pastinya membuat tampilan lebih cool.
Dalam membuat tombol ini terdapat 3 tahapan yang harus di masukkan script mode malam pada template blogger. Adapun ketiga tahapan ini sekaligus menjadi posisi pemasangan, antara lain : diatas kode ]]></b:skin> lalu kode </header> dan kode </body>
Cara Memasang Mode Malam Pada Template Viomagz
Sekarang akan kita lanjutkan untuk membuat dan memasang kode pada posisi-posisi tersebut. Silahkan simak terus cara memasang fitur dark mode template viomagz.
1. Posisi </body>
c. Langkah paling terakhir temukan kode berikut ini </body> masih sama dengan cara diatas salin dan copy pastekan semua kode dibawah ini tepat diatas kode </body>.
<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>2.Posisi ]]></b:skin>
a. Temukan kode ]]></b:skin> adapun langkah cepatnya dengan tekan Ctrl + F pasang kode dibawah ini tepat diatas kode ]]></b:skin>
/* 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 magelang1337.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;}3. Posisi </header>
b. Masih didalam menu edit selanjutnya cari kode </header> Copy pastekan kode dibawah ini tepat diatas kode </header>.
<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>Apabila telah semua posisi dan script di pasang jangan lupa Simpan Tema. Untuk melihat demo anda bisa mencoba pada blog Jejak Pak Mantap dengan klik tombol mode malam seperti gambar dibawah ini.
Kekurangan
Adapun kekurangan dari penerapan mode malam atau dark mode pada template viomag dapat kami sampaikan berikut ini:
- Fitur Featured Post tidak sempurna pada mode malam, terlihat judul dan text snipet tetap memiliki warna default alias tidak berubah.
- Pada bagian sosial icon juga terdapat kelemaha saat mengaktifkan dark mode viomag, dimana kejadiannya sama dengan featured Post, tidak terjadi perubahan apa-apa.
Demikian artikel tentang Cara Pasang fitur Dark Mode Template Viomagz Selamat mencoba dan semoga berhasil.
Silahkan pasang mode malam viomagz, dark mode viomagz 3.1, viomagz dark mode untuk v4.7.3, mode malam viomagz tingkatan lainnya.
