For world peace, liberate Al-Aqsa, eliminate Israel and anyone who is with Israel, they are the real terrorists
Bacakan

Cara membuat tampilan Dark Mode atau Mode gelap Pada blog

Dark mode pada sebuah halaman website berguna untuk membantu penglihatan mata saat anda mengakses konten di website tersebut, dan sekarang Menggunakan dark mode pada tampilan website sangat digemari jika anda berminat untuk menerapkan pada blog anda saya akan memberikan cara untuk Membuat tampilan Dark mode pada blog anda

Cara Penerapan

Simak baik baik penjelasan berikut untuk diterapkan pada blog anda, dalam membuat mode dark diblogger

  1. Pasang Jquery terlebih dahulu dengan meletakkan kode ini tepat diatas kode </head>
  2. <script src='//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js'></script>
    

    Ingat ya pasang Jquery jika anda belum memasangnya pada Blog anda

  3. Selanjutnya cari kode ]]></b:skin> atau kode </style> dan letakkan kode CSS berikut tepat diatasnya
  4. /* Code CSS Mode Dark */
    .proIcloudice-gelap{
       display:inline-block;
       float: right;
       margin-top: 3px;
       position:absolute;
       right:45px;
       top: 0;
       z-index:999;
    }
    .proIcloudice-gelap svg{
        width:24px;
        height:24px;
        vertical-align: -5px;
        background-repeat: no-repeat !important;
        content: '';}
    .proIcloudice-gelap svg path{
        fill:#fff;
    }
    .proIcloudice-gelap .check:checked ~ .NavMenu{
        opacity:1
        visibility:visible;
        top:45px;
        min-width:200px;
        transition:all .3s ease;
        z-index:2;
    }
    .proIcloudice-iclonGelap {
        cursor: pointer;
        display: block;
        padding: 8px;
        background-position: center;
        transition: all .5s linear;}
    .proIcloudice-iclonGelap: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;
    }
    .proIcloudice-gelap .pro-iclonGelap .openmode{
        display:block;
    }
    .proIcloudice-gelap .proIcloudice-iclonGelap .closemode{
        display:none;
    }
    .proIcloudice-gelap .check:checked ~ .proIcloudice-iclonGelap .openmode{
        display:none;
    }
    .proIcloudice-gelap .check:checked ~ .proIcloudice-iclonGelap .closemode{
        display:block;
    }
    .Night #wrapper {background: #292e38;}
    .Night #HTML3 {background:#1d2129;}
    .Night #footer-widget-container {background:#1d2129;}
    .Night .share-this-pleaseeeee {background:#292e38;}
    .Night .related-post h4{background:#292e38;}
    .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:#3d4658}
    .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 .post-info {color:#cccccc}
    .Night {background:#1d2129;}
    .Night h2.post-title a {color:#9e9e9e;}
    .Night h2.post-title a:hover {color:#f17f43}
    .Night .post-title {color:#1e90ff}
    .Night ul.nav-social {color:#1d2129}
    .Night .post-snippet {color:#cccccc}
    .Night #Label1{background:#292e38;}
    .Night .post{background:#292e38;border-bottom-color: #252a33;}
    .Night .PopularPosts h2{background:#343944;}
    .Night .latest-post-title h2{background:#292e38;border-bottom-color: #313640;}
    .Night .newspaptext{color:#9e9e9e}
    .Night .PopularPosts h2 span{color:#9e9e9e}
    .Night .list-label-widget-content ul li {border-bottom-color: #313640;}
    .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 #footer-container{background:#12161f;}
    .Night #footer-navmenu{background:#171b25;}
    .Night .sidebar h2 {color:#b7b7b7;border-bottom-color: #313640;}
    .Night .sidebar-sticky h2 {color:#b7b7b7;border-bottom-color: #313640;}
    .Night .latest-post-title h2 {color:#b7b7b7;border-bottom-color: #313640;}
    .Night .above-post-widget h2 {color:#b7b7b7;border-bottom-color: #313640;}
    .Night .comments h3 {color:#b7b7b7;border-bottom-color: #313640;}
    .Night .breadcrumbs {color:#b7b7b7;border-bottom-color: #313640;}
    .Night .btnsocialshare {background:#383c44;}
    .Night .label-line::before{background: #1d2129;}
    .Night .label-line-c::before {background: #333740;}
    .Night a.showcontent:hover {background: #373a42;}
    .Night a.showcontent{background: #292e38}
    .Night input{background: #272b33;border-color:#2b303a;}
    .Night .comments .comments-content .comment-content {color:#ffffff}
    .Night div#Label1 h2 {border-bottom: 1px solid #272b33;background: #343944;}
    .Night .related-post-style-3 .related-post-item-title {color: #bbb;}
    .Night #baca-juga ul {border: 2px solid #333740;}
    .Night #baca-juga h2 {border: 2px solid #292e38;}
    .Night #comments a.hiddencontent {background: #424854;}
    .Night .comments .comments-content .comment-thread ol {background: #292e38;}
    .Night .comments .comments-content .inline-thread {background: #292e38;}
    
  5. Kemudian Cari kode </header> dan letakkan kode dibawah ini tepat diatasnya
  6. <!-- Tombol Dark Mode -->
    <div class='proIcloudice-gelap'><input class='check' id='proIcloudice-gelap' title='Dark mode' type='checkbox'/>
    <label class='proIcloudice-iclonGelap' for='proIcloudice-gelap'>
    <svg class='openmode' viewBox='0 0 24 24'><path d='M12,18C11.11,18 10.26,17.8 9.5,17.45C11.56,16.5 13,14.42 13,12C13,9.58 11.56,7.5 9.5,6.55C10.26,6.2 11.11,6 12,6A6,6 0 0,1 18,12A6,6 0 0,1 12,18M20,8.69V4H15.31L12,0.69L8.69,4H4V8.69L0.69,12L4,15.31V20H8.69L12,23.31L15.31,20H20V15.31L23.31,12L20,8.69Z'/></svg>
    <svg class='closemode' viewBox='0 0 24 24'><path d='M14.3,16L13.6,14H10.4L9.7,16H7.8L11,7H13L16.2,16H14.3M20,8.69V4H15.31L12,0.69L8.69,4H4V8.69L0.69,12L4,15.31V20H8.69L12,23.31L15.31,20H20V15.31L23.31,12L20,8.69M10.85,12.65H13.15L12,9L10.85,12.65Z'/></svg>
    </label>
    </div>
    
  7. Terakhir Letakkan kode script dibawah ini tepat diatas kode </body>
  8. <script type='text/javascript'>
    //<![CDATA[
    $(document).ready(function(){$("body").toggleClass(localStorage.toggled),$("#proIcloudice-gelap").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")?$("#proIcloudice-gelap").prop("checked",!0):$("#proIcloudice-gelap").prop("checked",!1)});
    //]]>
    </script>
    
  9. Simpan Template anda jika anda telah menaruh dan meletakkan semua script kode seperti diatas, dan lihat hasilnya

Contoh Tampilan

Baiklah sebagai pelengkapnya admin akan memberikan contoh demo atau contoh tampilan mode darknya, contoh tampilan nya sebagi berikut

Info: Bagaiamana sobat dengan tampilan mode darknya keren bukan

Begitulah bagaimana cara membuat tampilan Dark mode pada blog semoga bermanfaat dan bisa diterapkan di situs blog kesayangan anda

About the Author

Keindahanmu akan kuabadikan disetiap karyaku.

Post a Comment

Menghasilkan uang melalui survei berbayar
Best Viral Premium Blogger Templates from Icloudice


kami menawarkan berbagai template blogger dan produk istimewa untuk anda, support karya anak bangsa dengan membeli produk yang kami jual

Welcome to my store limited

  • Download theme blogger mirip xmlthemes

    Template mirip xmlthemes

    Template blogger terlaris nomor 1 di seluruh Indonesia bahkan di seluruh dunia lagi Diskon 50%
    Rp.153.000
  • Download theme blogger mirip xmlthemes

    Template mirip xmlthemes

    Template blogger terlaris nomor 1 di seluruh Indonesia bahkan di seluruh dunia lagi Diskon 50%
    Rp.153.000
  • Download theme blogger mirip xmlthemes

    Template mirip xmlthemes

    Template blogger terlaris nomor 1 di seluruh Indonesia bahkan di seluruh dunia lagi Diskon 50%
    Rp.153.000
  • Download theme blogger mirip xmlthemes

    Template mirip xmlthemes

    Template blogger terlaris nomor 1 di seluruh Indonesia bahkan di seluruh dunia lagi Diskon 50%
    Rp.153.000
  • Download theme blogger mirip xmlthemes

    Template mirip xmlthemes

    Template blogger terlaris nomor 1 di seluruh Indonesia bahkan di seluruh dunia lagi Diskon 50%
    Rp.153.000
  • Cookie Consent
    We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
    Oops!
    It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
    AdBlock Detected!
    We have detected that you are using adblocking plugin in your browser.
    The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
    Site is Blocked
    Sorry! This site is not available in your country.