Cara membuat Fitur Dark Mode di template Viomagz dengan mudah - 2021

Cara membuat Fitur Dark Mode di template Viomagz dengan mudah - 2021 - Hallo sahabat OBODRINK, Pada Artikel yang anda baca kali ini dengan judul Cara membuat Fitur Dark Mode di template Viomagz dengan mudah - 2021, kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan Artikel Tutorial, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.

Judul : Cara membuat Fitur Dark Mode di template Viomagz dengan mudah - 2021
link : Cara membuat Fitur Dark Mode di template Viomagz dengan mudah - 2021

Baca juga


Cara membuat Fitur Dark Mode di template Viomagz dengan mudah - 2021

cara-membuat-fitur-dark-mode-viomagz

Obodrink.com - Mode Gelap atau Mode Malam (Dark Mode) adalah fitur yang memungkinkan kalian untuk mengubah tampilan  situs web atau blog kalian dari terang menjadi gelap. Tujuan  penambahan fitur Dark Mode Viomagz ini  adalah untuk mempercantik tampilan dan nuansa blog kalian serta memberikan kesan yang berbeda kepada pengunjung kalian. Selain mempercantik blog kalian, pengunjung kalian akan merasa lebih baik karena fitur mode gelap mengurangi risiko sakit mata saat membaca konten blog.

Apabila kalian berkeinginan untuk memakai fitur Dark Mode ini, kalian dapat mengikuti cara berikut ini :

Cara membuat Fitur Dark Mode di template Viomagz

Pertama-tama, Kalian Log In terlebih dulu ke akun kalian

Selanjutnya ketuk menu Tema lalu klik Edit HTML 

Jika kalian telah masuk ke menu Edit HTML, kalian cari dan temukan kode ]]></b:skin>

Setelah ditemukan, kalian copy kode berikut ini lalu pastekan kode pas di atas kode ]]></b:skin>
/* Dark Mode */
/* 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 */
/* Warna Night Mode */
.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:#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:#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 h2{background:#343944;}
.Night .latest-post-title h2{background:#292e38;border-bottom-color: #313640;}
.Night .newspaptext{color:#9e9e9e}
.Night .PopularPosts h2 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 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 .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;}.
Kemudian langkah penempatan tombol Mode gelapnya, kalian bisa tempatkan tombol Mode gelapnya di bagian kanan pojok atas. Bagaimana cara menempatkannya? silahkan kalian cari dan temukan kode </header> 

Kemudian tempelkan kode berikut ini pas berada di atas kode </header> . Apabila kalian pemakai template yang lain, Kalian dapat menyesuaikan sendiri. 
<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>
Apabila sudah selesai, kalian cari dan temukan kode </body> 

Lalu, tempelkan kode javascript berikut ini pas berada di atas kode </body>
<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>

Catatan :

Apabila ditemplate kalian tidak ada kode jQuery, Kalian dapat Meng-copy kode berikut ini, dan kalian pastekan kode berikut diatas kode </head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
Apabila telah selesai, jangan lupa untuk klik simpan. selamat fitur Mode gelap sudah berhasil dipasang pada blog kalian.


Demikianlah Artikel Cara membuat Fitur Dark Mode di template Viomagz dengan mudah - 2021

Sekianlah artikel Cara membuat Fitur Dark Mode di template Viomagz dengan mudah - 2021 kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.

Anda sekarang membaca artikel Cara membuat Fitur Dark Mode di template Viomagz dengan mudah - 2021 dengan alamat link https://www.obodrink.com/2021/11/cara-membuat-fitur-dark-mode-viomagz.html

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel