Cara Membuat Darkmode Seperti Template Linkmagz di Viomagz

www.azid45.web.id - Cara Membuat Darkmode Seperti Template Linkmagz di Viomagz. Sebelumnya saya sudah pernah share tutorial tentang Cara Membuat Darkmode Seperti linkmagz untuk template igniplex dan kali ini saya akan share membuat tombol darkmode di blog tanpa jQuery yang digunakan pada template Viomagz. Tutorial ini saya tujukan pada teman group saya yang meminta untuk dibuatkan darkmode buat template Viomagz.

Langsung saja,  disini saya menggunakan template Viomagz Versi 3.3 oleh karena itu bagi Anda yang masih menggunakan versi dibawahnya atau sudah di redisgn Anda bisa berkreasi sendiri dengan menggunakan inspect atau view page source. Untuk tutorialnya Anda bisa simak pembahasannya berikut ini:

Pertama, login blogger

Kedua, menuju menu theme/tema dan klik edit HTML

Ketiga, letakkan kode berikut tepat diatas kode </head>

<style>
/*Darkmode*/
.nav-secondary {position:absolute;top:15px;right:70px;}
.darkmode-switch .switch-title{color:#fff}
.darkmode-switch .slider{border:2px solid #fff}
.darkmode-switch .slider:before{background:#fff}
.darkmode-switch .switch:hover .slider:before{background:#ffffff}
.darkmode-switch{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-left:0}
.darkmode-switch .switch-title{font-size:10px;font-size:.625rem;margin-right:4px;text-transform:uppercase}
.darkmode-switch .switch-title:before{content:"Dark Mode"}
.darkmode-switch .switch{position:relative;display:inline-block!important;padding:0!important;width:38px;height:20px;vertical-align:middle}
.darkmode-switch .switch input{opacity:0;width:0;height:0}
.darkmode-switch .slider{position:absolute;cursor:pointer;border-radius:34px;top:0;left:0;right:0;bottom:0;-webkit-transition:.2s;transition:.2s}
.darkmode-switch .slider:before{position:absolute;content:"";border-radius:50%;height:12px;width:12px;left:2px;bottom:2px;-webkit-transition:.2s;transition:.2s}
.darkmode-switch input:checked+.slider{background-color:#428c2f;border:2px solid #fff}
.darkmode-switch input:checked+.slider:before{background:#fff;-webkit-transform:translateX(18px);transform:translateX(18px)}
@media only screen and (max-width: 800px){
.header{right:110px!important}
.nav-secondary{right:60px}
}
@media screen and (max-width: 480px){
.darkmode-switch .switch-title:before{display:none}
}
body.darkmode{background:#353535;color:#eee}
body.darkmode a:link{color:#eee;-webkit-transition:all .2s;transition:all .2s}
body.darkmode a:visited{color:#eee}
body.darkmode a:hover{color:#fff}
body.darkmode #wrapper {background: #292e38;}
body.darkmode #blog-pager a,body.darkmode #Label1 a,body.darkmode .FeaturedPost h3 a{color:#353535;}
body.darkmode #footer-widget-container {background:#1d2129;}
body.darkmode .share-this-pleaseeeee {background:#292e38;}
body.darkmode .related-post h4{background:#292e38;}
body.darkmode #label-info-th {background:#1d2129;}
body.darkmode body {background:#1d2129;}
body.darkmode .post-body {color:#fff;background:#292e38;}
body.darkmode .post-body table.tr-caption-container td{color:#fff;}
body.darkmode .post-body table td{background:no-repeat;border:1px solid #f5f5f5;padding:10px;text-align:left;vertical-align:top}
body.darkmode #baca-juga h2 {color:#cccccc;background:#1d2129}
body.darkmode .label-info-th a {color:#cccccc;background:#3d4658}
body.darkmode .post-info {color:#cccccc}
body.darkmode {background:#1d2129;}
body.darkmode h2.post-title a, body.darkmode .comments .comments-content .comment-content{color:#fff;}
body.darkmode h2.post-title a:hover {color:#b7b2b2}
body.darkmode .post-title {color:#fff}
body.darkmode ul.nav-social {color:#1d2129}
body.darkmode .post-snippet {color:#cccccc}
body.darkmode #Label1{background:#292e38;}
body.darkmode .post{background:#292e38;border-bottom-color: #252a33;}
body.darkmode .item-title a{color:#fff}
body.darkmode .latest-post-title h3{border-bottom-color: #313640;}
body.darkmode .list-label-widget-content ul li {border-bottom-color: #313640;}
body.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;}
body.darkmode #footer-container{background:#12161f;}
body.darkmode #footer-navmenu{background:#171b25;}
body.darkmode .sidebar-sticky h3 {color:#fff;border-bottom-color: #313640;}
body.darkmode .latest-post-title h3 {color:#fff;border-bottom-color: #313640;}
body.darkmode .above-post-widget h3 {color:#b7b7b7;border-bottom-color: #313640;}
body.darkmode .sidebar h2,body.darkmode .sidebar-sticky h2, body.darkmode .latest-post-title h2, body.darkmode .above-post-widget h2, body.darkmode .comments h3{color:#fff;border-bottom-color: #313640;}
body.darkmode .breadcrumbs {color:#fff;border-bottom-color: #313640;}
body.darkmode .btnsocialshare {background:#383c44;}
body.darkmode .label-line::before{background: #1d2129;}
body.darkmode .label-line-c::before {background: #333740;}
body.darkmode a.showcontent:hover {background: #373a42;}
body.darkmode a.showcontent{background: #292e38}
body.darkmode .related-post-style-3 .related-post-item-title {color: #bbb;}
body.darkmode #baca-juga ul {border: 2px solid #333740;}
body.darkmode #baca-juga h2 {border: 2px solid #292e38;}
body.darkmode #comments a.hiddencontent {background: #424854;}
body.darkmode .comments .comments-content .comment-thread ol {background: #292e38;}
body.darkmode .comments .comments-content .inline-thread {background: #292e38;}
</style>

Keempat, Jika sudah masih berada di edit HTML cari kode <body> dan letakkan kode berikut ini tepat dibawah kode tersebut

<!-- tampilkan script darkmode tepat di bawah tag body -->
<script>
                (localStorage.getItem('mode')) === 'darkmode' ? document.querySelector('body').classList.add('darkmode') : document.querySelector('body').classList.remove('darkmode')
                </script>

Kelima, cari kode <div class='search-icon'> jika sudah ketemu, letakkan kode berikut ini tepat diatas kode tersebut

<div class='nav-secondary'>
<div class='darkmode-switch'><span class='switch-title'/><label class='switch'><input aria-label='checkbox' class='checkbox' onclick='darkMode()' type='checkbox'/><span class='slider'/></label>
</div>
</div>

Keenam, cari kode </body> jika sudah ketemu letakkan kode berikut ini tepat diatas kode tersebut

<script>//<![CDATA[
function LMcheckCheckbox(){document.querySelectorAll(".checkbox").forEach(function(e){"darkmode"===localStorage.getItem("mode")?e.checked=!0:e.checked=!1})}function darkMode(){localStorage.setItem("mode","darkmode"===localStorage.getItem("mode")?"light":"darkmode"),"darkmode"===localStorage.getItem("mode")?document.querySelector("body").classList.add("darkmode"):document.querySelector("body").classList.remove("darkmode"),LMcheckCheckbox()}function darkModeHide(){document.querySelectorAll(".darkmode-switch").forEach(function(e){e.parentNode.removeChild(e)})}LMcheckCheckbox(),"undefined"==typeof AzidBloggerSetting&&(AzidBloggerSetting={tombolDarkmode:!0}),0==AzidBloggerSetting.tombolDarkmode&&darkModeHide();
//]]></script>

Ketujuh, Simpan Template.

Perlu Anda ketahui bisa jadi kode CSS tersebut bisa jadi ada yang tidak sesuai oleh karena itu Anda harus kratif untuk mengedit sendiri dari setiap kode yang akan dijadikan darkmode. Anda bisa menambahkan kode body.darkmode 

Untuk pengaturan disable tombol darkmode Anda bisa menggunakan kode dibawah ini dengan meletakkannya di menu tata letak buat widget baru HTML/Java Script

<script>
var AzidBloggerSetting = {//True or False
tombolDarkmode : true,
};
</script>

Demikianlah artikel tutorial tentang Cara Membuat Darkmode Seperti Template Linkmagz di Viomagz. Semoga bermanfaat. Amin.