Cara Membuat Dark Mode Seperti Template Link Magz
Dalam postingan sebelumnya saya pernah men share artikel tentang bagaimana cara membuat dan menambahkan dark mode untuk template VioMagz, dan pada kesempatan kali ini saya juga akan kembali membuat artikel tentang Cara Membuat Dark Mode Seperti Template Link Magz, agak sedikit berbeda sih dengan yang kemaren ya. Jika dibandingkan dengan dark mode yang saya buat dulu, saya lebih suka menggunakan dark mode yang sekarang atau versi link magz karena simple dan cocok menurut saya.
Dengan adanya fitur dark mode dalam blog, pengunjung atau pembaca akan lebih nyaman untuk berlama-lama di blog kita. Yuk simak tutorial yang saya share kali ini, berikut adalah tutorialnya :
- Langkah Pertama : Silahkan masuk ke dashboard blogger => Tema => Edit HTML
- Selanjutnya, salin dan tempel kode dibawah ini tepat berada 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>
- Jika sudah, silahkan salin lagi kode dibawah ini dan tempelkan tepat berada dibawah kode <body> , Berikut adalah kodenya :
<!-- 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>
- Langkah keempat : carilah kode <div class='search-icon'> apabila sudah ketemu maka, salin dan letakkan kode dibawah ini tepat berada diatas kode <div class='search-icon'> , Berikut adalah kodenya :
<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>
- Langkah terakhir, cari kode </body> , jika sudah ketemu salin dan tempel kode dibawah ini tepat berada diatas kode </body> . Berikut adalah kodenya :
<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>
- Jika sudah semua, jangan lupa untuk simpan ya.
Itulah artikel tentang Cara Membuat Dark Mode Seperti Template Link Magz yang bisa saya share untuk teman-teman sekalian. Apabila terdapat kode CSS tersebut ada yang tidak sesuai maka, kamu harus bisa mengedit kode tersebut atau menambahkan kode body.darkmode . Sementara itu untuk mengatur disable tombol darkmode, kamu bisa menambahkan kode dibawah ini dengan meletakannya di menu tata letak => tambahkan widget => HTML/Java Script . Berikut adalah kodenya :
<script>
var AzidBloggerSetting = {//True or False
tombolDarkmode : true,
};
</script>
Comments
Post a Comment