Cara membuat dark mode di blogspot dengan mudah - Susah Tidur

Cara membuat dark mode di blogspot dengan mudah

Cara membuat dark mode di blogspot dengan mudah
Cara membuat dark mode di blogspot dengan mudah - SusahTidur - Buat kamu pengguna ponsel pintar pastinya sudah tahu akan hal ini. Ya mode malam yang biasa kita gunakan di ponsel pintar kini sudah bisa gunakan di sebuah website maupun blog kita.

Seperti yang kita ketahui dark mode atau mode gelap ini jika kita hidupkan akan merubah warna maupun contrast ke warna-warna gelap seperti pada malam hari. Manfaatnya pun tidak bisa dipandang sebelah mata, berikut ini manfaat mode malam bagi kita :
  • Mengurangi radiasi cahaya yang masuk pada mata.
  • Membuat seseorang lebih fokus saat membaca.
  • Memberikan cahaya yang lebih stabil.
  • Cahaya lebih baik saat digunakan untuk membaca.
Bermanfaat banget ya untuk kita khususnya sih untuk mata. 

Seperti yang sudah saya jelaskan diatas tentang mode dark atau mode malam, kini sudah bisa kita pasang di blog. Manfaatnya selain menjaga mata, mode dark di blog tentunya membuat tampilan blog sobat semakin keren dan pengunjung pun makin jadi betah aja. Baik mari langsung kita eksekusi

Cara membuat dark mode di blogspot



  1. Seperti biasa, masuk ke dashboard blogger sobat
  2. Masuk menu Tema > edit HTML 
  3. Cari /* NAV MENU */ jika tidak ada cari CSS berikut
  4. #cssmenu, #cssmenu ul, #cssmenu ul li, #cssmenu ul li a, #cssmenu #head-mobile {
    border: 0;list-style: none;line-height: 1;display: block;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
    
    kemudian letakkan CSS dibawah ini tepat di atas /*NAV MENU*/ atau diatas CSS diatas
    /* Button Dark Mode susahtidur.my.id */
    .modedark{display:inline-block;float: right;margin-top: 3px;position:absolute;right:30px;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 susahtidur.my.id */
    .Night #wrapper {background:#1d2129;}
    .Night body {background:#1d2129;}
    .Night #HTML3 {background:#1d2129;}
    .Night {background:#1d2129;}
    .Night #header-container {background:#292929;color:#fff;}
    .Night #cssmenu > ul > li > a {color: #fff;}
    .Night #footer-container {background:#292929;}
    .Night #cssmenu > ul {background-color: #292929;}
    .Night #cssmenu ul li {background:#292929;color:#b7b7b7}
    .Night .teknsearch .search .check:checked ~ .icon > svg path{fill:#292929;}
    
    .Night .breadcrumbs {background: #292e38;border-bottom: 1px solid rgba(255,255,255,0.12);}
    
    .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 .post{background:#292e38;border-bottom-color: #252a33;}
    .Night h2.post-title a {color:#fff;}
    .Night h2.post-title a:hover {color:#17a2b8}
    .Night h1.post-title {border-image: linear-gradient(to right,transparent,#17a2b8,transparent);border-image-slice: 1;border-bottom: 3px solid;}
    .Night .post-snippet {color:#eaeaea;}
    .Night .post-info {color:#b7b7b7;}
    .Night .post-body {color:#eaeaea;}
    .Night blockquote {background:#213040;}
    
    .Night .susahtidurNavigation .NavMenu ul li.xprofil {background: #213040;border-bottom:1px solid #393939;}
    .Night .susahtidurNavigation .NavMenu ul li.xprofil ul li.name {background: #213040;color:#fff;}
    .Night .susahtidurNavigation .NavMenu ul li.xprofil ul li.follow a:hover {padding:none;}
    .Night .susahtidurNavigation .NavMenu ul li:hover {background:rgba(0,0,0,.2) radial-gradient(circle,transparent 2%,rgba(0,0,0,.2) 2%) center/15000%;;color:#17a2b8}
    .Night .susahtidurNavigation .NavMenu {background: #292e38;color:#fff;}
    .Night .susahtidurNavigation .NavMenu ul li a {color:#eaeaea;}
    .Night .susahtidurNavigation .NavMenu ul li.social {background: #213040;border-top:1px solid #393939;}
    .Night .susahtidurNavigation .NavMenu:before,.susahtidurNavigation .NavMenu:after {border:none;}
    .Night .susahtidurNavigation label:hover {border-radius:100px;background:rgba(0,0,0,.2) radial-gradient(circle,transparent 2%,rgba(0,0,0,.2) 2%) center/15000%;}
    .Night .susahtidurNavigation label:active {border-radius:100px;background-color:#fff;background-size:100%;transition:background 0s;}
    .Night .susahtidurNavigation .NavMenu img {border:1px solid #393939;}
    
    .Night .tabbed-toc .toc-content,
    .tabbed-toc .toc-line {width: 80%;float: right;background-color: transparent;border-left: 5px solid rgba(64,64,64,0.1);box-sizing: border-box;}
    
    
    .Night .label-info svg path{fill:#b7b7b7;}
    .Night .status-msg-body {background: #213040;color:#fff;}
    
    .Night .popular-posts {background: #292e38;color: #ddd;}
    .Night .popular-posts ul li a:hover {background: #3d4658;color:#17a2b8}
    .Night .PopularPosts .widget-content ul li {border-top: 1px solid rgba(255,255,255,0.12);}
    
    .Night .author-profile {background:#213040;}
    .Night .author-profile .writer-name {color:#17a2b8;}
    .Night .writer > span {color:#ddd;}
    
    .Night .latest-post-title h2 {background:#292e38;}
    .Night .PopularPosts h2 {background:#292e38;}
    .Night .sidebar h2 {background:#292e38;}
    .Night .comments h3 {background:#292e38;color:#fff;}
    .Night h1.post-title {color:#17a2b8;}
    
    .Night .contact-form-error-message-with-border {background: #213040;color: #fff;border: 1px solid #b7b7b7;}
    .Night .contact-form-email {background: #213040;border: 1px solid #b7b7b7;}
    .Night .contact-form-name {background: #213040;border: 1px solid #b7b7b7;}
    .Night .contact-form-email-message {background: #213040;border: 1px solid #b7b7b7;}
    
    .Night div.Label h2 {border-bottom: 1px solid rgba(255,255,255,0.12);}
    .Night div.Label {background:#292e38}
    .Night .list-label-widget-content ul li a {background:#292e38;border-bottom: 1px solid rgba(255,255,255,0.12);}
    .Night .list-label-widget-content ul li a:hover{background:#3d4658}
    .Night .related-post-style-3 .related-post-item-title {color:#b7b7b7;}
    
    .Night #blog-pager-older-link a {background: #213040;color: #fff;}
    .Night #blog-pager-newer-link a {background: #213040;color: #fff;}
    .Night #blog-pager-older-link a:hover {background: #17a2b8;}
    .Night #blog-pager-newer-link a:hover {background: #17a2b8;}
    
    .Night .commentBodyContainer {background: #292e38;color: #b7b7b7}
    .Night #comments .comment-thread ol > li {background: #292e38;border: 1px solid #292e38;}
    .Night .comments .comments-content .icon.blog-author::after {color: #fff}
    .Night .comments .comments-content .user {color: #fff}
    .Night .comments .comment-block {background: #292e38;}
    .Night .comments .thread-toggle {background: #213040;color:#fff;}
    .Night .comments .comment .comment-actions a {background: #17a2b8;}
    .Night .comments .comment .comment-actions a:hover, .comments .continue a:hover{background: #155724;}
    .Night .comments .comments-content .comment-content {color: #ddd;}
    .Night .comments .comments-content .comment-header {border-bottom: 1px solid rgba(255,255,255,0.12);}
    .Night .share-this-pleaseeeee {background:#292e38}
  5. Kemudian cari kode </header> nah tepat di atas kode tersebut ada kode ini <div class='clear'/> letakkan kode dibawah ini tepat diatas kode <div class='clear'/> 
    <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='M7,10A2,2 0 0,1 9,12A2,2 0 0,1 7,14A2,2 0 0,1 5,12A2,2 0 0,1 7,10M17,7A5,5 0 0,1 22,12A5,5 0 0,1 17,17H7A5,5 0 0,1 2,12A5,5 0 0,1 7,7H17M7,9A3,3 0 0,0 4,12A3,3 0 0,0 7,15H17A3,3 0 0,0 20,12A3,3 0 0,0 17,9H7Z'/></svg>
    <svg class='closemode' viewBox='0 0 24 24'><path d='M17,10A2,2 0 0,1 19,12A2,2 0 0,1 17,14A2,2 0 0,1 15,12A2,2 0 0,1 17,10M17,7A5,5 0 0,1 22,12A5,5 0 0,1 17,17H7A5,5 0 0,1 2,12A5,5 0 0,1 7,7H17M7,9A3,3 0 0,0 4,12A3,3 0 0,0 7,15H17A3,3 0 0,0 20,12A3,3 0 0,0 17,9H7Z'/></svg>
    </label>
    </div>
    Jadinya begini
    <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='M7,10A2,2 0 0,1 9,12A2,2 0 0,1 7,14A2,2 0 0,1 5,12A2,2 0 0,1 7,10M17,7A5,5 0 0,1 22,12A5,5 0 0,1 17,17H7A5,5 0 0,1 2,12A5,5 0 0,1 7,7H17M7,9A3,3 0 0,0 4,12A3,3 0 0,0 7,15H17A3,3 0 0,0 20,12A3,3 0 0,0 17,9H7Z'/></svg>
    <svg class='closemode' viewBox='0 0 24 24'><path d='M17,10A2,2 0 0,1 19,12A2,2 0 0,1 17,14A2,2 0 0,1 15,12A2,2 0 0,1 17,10M17,7A5,5 0 0,1 22,12A5,5 0 0,1 17,17H7A5,5 0 0,1 2,12A5,5 0 0,1 7,7H17M7,9A3,3 0 0,0 4,12A3,3 0 0,0 7,15H17A3,3 0 0,0 20,12A3,3 0 0,0 17,9H7Z'/></svg>
    </label>
    </div>
    <div class='clear'/>
    </header>
  6. Langkah terakhir ambil Script dibawah ini, letakkan tepat diatas </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>
  7. Kemudian Save/Simpan Template
UPDATE!!

Menambahkan efek bintang jatuh dark mode

  1. Masuk dashboard blogger sobat
  2. Masuk menu Tema > Edit HTML > cari kode /* POST WRAPPER */
  3. Kemudian taruh kode dibawah ini tepat diatas kode /* POST WRAPPER */ jika tidak ada .post-container atau diatas CSS .modedark 
    .section-center{position:fixed;width:100%;height:100%;top:50%;left:50%;display:none;overflow:hidden;z-index:5;pointer-events:none;box-shadow:0 0 50px 5px rgba(255,148,0,.1);transform:translate(-50%,-50%);}.section-center{-webkit-transition:all .5s linear;transition:all .5s linear;}.shooting-star{z-index:2;width:1px;height:50px;border-bottom-left-radius:50%;border-bottom-right-radius:50%;position:absolute;top:0;left:-70px;background:linear-gradient(to bottom,rgba(255,255,255,0),#fff);animation:animShootingStar 6s linear infinite;-webkit-transition:all 2s linear;transition:all 2s linear;}.shooting-star-2{z-index:2;width:1px;height:50px;border-bottom-left-radius:50%;border-bottom-right-radius:50%;position:absolute;top:0;left:200px;background:linear-gradient(to bottom,rgba(255,255,255,0),#fff);animation:animShootingStar-2 9s linear infinite;-webkit-transition:all 2s linear;transition:all 2s linear;}.star{z-index:2;position:absolute;top:185px;left:25px;background-image:url(https://ivang-design.com//svg-load/air/star.png);background-size:15px 15px;width:15px;height:15px;opacity:.4;animation:starShine 3.5s linear infinite;-webkit-transition:all 1.2s linear;transition:all 1.2s linear;}.star.snd{top:100px;left:310px;animation-delay:1s;}.star.trd{top:130px;left:100px;animation-delay:1.4s;}.star.fth{top:190px;left:200px;animation-delay:1.8s;}.star.fith{top:85px;left:1080px;animation-delay:2.2s;}@keyframes animShootingStar{from{transform:translateY(0) translateX(0) rotate(-45deg);opacity:1;height:5px;}to{transform:translateY(1280px) translateX(1280px) rotate(-45deg);opacity:1;height:800px;}}@keyframes animShootingStar-2{from{transform:translateY(0) translateX(0) rotate(-45deg);opacity:1;height:5px;}to{transform:translateY(1920px) translateX(1920px) rotate(-45deg);opacity:1;height:800px;}}@keyframes starShine{0%{transform:scale(.3) rotate(0);opacity:.4;}25%{transform:scale(1) rotate(360deg);opacity:1;}50%{transform:scale(.3) rotate(720deg);opacity:.4;}100%{transform:scale(.3) rotate(0);opacity:.4;}}
  4. Lanjut letakkan kode dibawah ini tepat diatas  </body>
    <div class='section-center'><div class='shooting-star'/><div class='shooting-star-2'/><div class='star'/><div class='star snd'/><div class='star trd'/><div class='star fth'/><div class='star fith'/></div>
    
  5. Kemudian Save/Simpan Tema

PENTING!!
Jika tombol pencarian sobat bentrok dengan tombol mode dark, bisa di edit sendiri. Biasanya kalau bentrok sebelumnya sobat memasang Menu Navigasi Profil Ala Igniplex, seperti punya saya pojok kanan atas itu lho. Tapi kalau tidak bentrok ya biarin saja.

Jika bingug mau mulai dari mana, silahkan cari /* SEARCH FORM */ jika tidak ada silahkan cark CSS ini
.search-icon {
   position: absolute;
   top: 12px;
   right: 50px;
   font-size: 19px;
   z-index: 99;
}
Untuk CSS yang saya warnai diatas silahkan di ubah jadi 70 biasanya itu sudah cukup sih ga bentrok, kalau masih bentrok silahkan diubah-ubah sendiri. Semakin besar angkanya maka akan semakin ke kiri icon nya.

Baik selesai sudah tutorial Cara membuat dark mode di blogspot dengan mudah. Jika masih bingung silahkan bertanya di kolom komentar. Sekian dan terimakasih telah berkunjung ke SusahTidur.
"Cara membuat dark mode di blogspot dengan mudah"
Tampilkan Komentar
Sembunyikan Komentar

Belum ada Komentar untuk "Cara membuat dark mode di blogspot dengan mudah"

Posting Komentar

Jangan malu bertanya!

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel