Cara Membuat Darkmode Seperti Template Linkmagz di Viomagz

Ilmuku Terbaik - Cara Membuat Darkmode Seperti Linkmagz di Viomagz. Sebelumnya Assalamualaikuk Wr Wb pada kesempatan kali ini saya akan share tutorial Cara Membuat Darkmode Seperti Linkmagz di Viomagz. Oke langsung saja disini saya disini gue pakai Viomagz 3.3 oleh karena itu bagi kalian yang masih menggunakan versi dibawahnya atau versi lawas atau juga sudah di redisgn kalian bisa berkreasi sesuka kalian dengan menggunakan inspect atau view page source. Untuk tutorialnya kalian bisa simak betul-betul pembahasan sebagai berikut :

1. Login Blogger.
2. Menuju menu theme/tema.
3. Pilih cadangkan untuk mencadangkan template sobat agar apabila ada kesalahan bisa dipulihkan.
4. Sesudahnya pilih cadangkan, klik edit HTML.
5. 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>

6. Jika sudah cari kode <body> dan letakkan kode berikut ini tepat dibawah kode <body>.

<!-- 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>

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

<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>

8. Cari kode </body> jika sudah ketemu letakkan kode berikut tepat diatas kode </body>.

<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>

9. Simpan Template dan lihat hasilnya.

DEMO

10. Tambahan, Untuk pengaturan disable tombol darkmode kalian bisa menggunakan kode dibawah ini dan letakkan di menu tata letak buat widget baru HTML/Java Script.

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

Mungkin itu saja tutorial mengenai "Cara Membuat Darkmode Seperti Linkmagz di Viomagz". Semoga bisa bermanfaat Wassalamualaikum Wr Wb.

Share :