Recent Posts

    Cara Membuat Dark Mode, Gelap, Malam Pada Blog

    Mungkin Anda sudah tahu bahwa membuat tampilan mode gelap pada sebuah website blog akan lebih menarik dan mempercantik tampilan sebuah blog.

    Mode Gelap yang akan kita bahas kali ini sama seperti sosial media yang Anda gunakan yang tersedia fitur Dark Mode, yakni hanya dengan menekan tombol saja seluruh tampilan blog Anda akan menjadi mode malam.

    cara buat mode gelap di blog

    Kelebihan dari Mode Malam salah satunya membuat mata menjadi lebih rilex dan nyaman ketika dilihat oleh pengunjung. Selain itu cahaya yang berlebihan pada layar ponsel tidak terlalu baik pada kesehatan mata tentunya.

    Baiklah tidak usah lama-lama lagi basa basinya mari kita langsung masuk ke tutorialnya

    Cara Membuat Dark Mode, Gelap, Malam Pada Blog

    • Langkah pertama yang harus Anda lakukan adalah dengan masuk ke akun blogger kalian lalu ke menu Theme setelah itu Edit Html
    • Carilah kode ]]></b:skin> itu, lebih mudahnya dengan tekan CTRL+F 
    • Copy dan pastekan kode dibawah ini tepat diatas kode ]]></b:skin>
    .switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 20px;
    }
    .switch input {display:none;}
    .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #bdc3c7;
    -webkit-transition: .4s;
    transition: .4s;
    }
    .slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
    }
    input:checked + .slider {
    background-color: #1d2129;
    }
    input:focus + .slider {
    box-shadow: 0 0 1px #2196F3;
    }
    input:checked + .slider:before {
    -webkit-transform: translateX(40px);
    -ms-transform: translateX(40px);
    transform: translateX(40px);
    }
    /* Rounded sliders */
    .slider.round {
    border-radius: 20px;
    }
    .slider.round:before {
    border-radius: 50%;
    }
    .Night #wrapper {background:#1d2129;}
    .Night #HTML3 {background:#1d2129;}
    .Night #footer-widget-container {background:#1d2129;}
    .Night .share-this-pleaseeeee {background:#1d2129;}
    .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:#1d2129}
    .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:#cccccc}
    .Night .post-title {color:#cccccc}
    .Night ul.nav-social {color:#1d2129}
    .Night .post-snippet {color:#cccccc} 
    • Setelah selesai dengan kode diatas, dilanjutkan dengan kode dibawah ini pastekan kode tersebut diatas kode </body>
    <script>//<![CDATA[
    $("#Night").click(function(){
    $("body").toggleClass('Night');
    });
    //]]></script>
    • Nah yang terakhir nih Anda bebas menaruh kode dibawah ini dimana saja asalkan bisa dijumpai, kode tersebut nantinya akan digunakan ketika Anda ingin mode gelap tinggal menekan saja, Saya sarankan untuk meletakannya di atas biar lebih mudah ditemukannya
    <li>
    <br/>
    <label class='switch' for='Night'>
    <input id='Night' type='checkbox'/>
    <div class='slider round'/>
    </label>
    </li>
    • Selesai! Anda sekarang bisa menikmati mode gelap pada website blog Anda.
    Ohya jika Anda ingin merubah warna widget lainnya bisa kok, Anda hanya perlu mengatur warna dari kode cssnya saja contohnya seperti dibawah ini:
    
    .Night #HTML3 {background:#1d2129;}
    

    Warna yang ditandain tersebut lah yang Saya maksud, Anda bisa mengubah sesuai yang diinginkan.

    Demikian itu saja yang bisa saya sampaikan mengenai Cara Membuat Dark Mode, Gelap, Malam Pada Blog semoga informasi yang saya berikan bisa bermanfaat untuk Anda semua, jangan lupa dibagikan ya, terima kasih.

    3 Komentar untuk "Cara Membuat Dark Mode, Gelap, Malam Pada Blog"

    Iklan Atas Artikel

    Iklan Tengah Artikel 1

    Iklan Tengah Artikel 2

    Iklan Bawah Artikel