Cara Manual dan Otomatis Membuat Tombol Dark Mode di Blog Blogspot

Blog Cara Ocha - Cara Manual dan Otomatis Membuat Tombol Dark Mode di Blog Blogspot - Hello gaes selamat pagi & selamat membaca kembali di blog²an Cara Ocha setelah hari lalu membahas mengenai Cara Memasang Notifications Cookies di Blogspot!

Pada kesempatan kali ini pun akan sedikit aku ulas masih mengenai blog, yaitu Cara Manual dan Otomatis Membuat Tombol Dark Mode di Blog Blogspot! Yuk langsung aja di simak cara nya di bawah ini..

Cara Otomatis Membuat Tombol Dark Mode di Blog Blogspot

Sebelum melanjutkan ke cara manualnya, untuk kalian yang tidak mau ribet harus mengedit isi tema pada blog, aku sarankan menggunakan saja template / theme / tema LinkMagz buatan Mas Sugeng pada tema tersebut sudah secara otomatis terdapat Dark ModeNya sebagai contoh kalian bisa lihat pada blog ini atau secara live klik LinkMagz disini!

Di Blog Cara Ocha saat ini menggunakan tema buatan Mas Sugeng dengan nama tema nya LinkMagz akan tetapi ada beberapa element yang sudah di ubah sesuai selera hehe! Sebenarnya tanpa di rombak ( Re-design ) juga, tampilannya sudah kece & luar biasa banget gaes! Tampilan tema blogspot ini rasa blog WordPress ๐Ÿ˜…

Tapi yang lebih menakjubkannya bukan hanya hal itu saja, tapi Kecepatan loadingnya super wuzz banget gaes! Dan masih banyak lagi kelebihan-kelebihan yang super keren dari tema ini, selengkapnya kalian baca saja pada halaman ini - LinkMagz, Template Blogspot Rasa WordPress [Loading Super Wuzz] untuk harganya di jamin gk bakalan menguras dompet! Hehe

Di samping itu cara setting tampilan tema juga dengan mudah 100% di dalam tata letak, jadi buat kalian yang baru terjun membuka blog di blogger blogspot ini, pastinya tidak akan kesulitan lagi harus membuka isi tampilan template yang terkesan membingungkan mengoprek serangkaian kode-kode ๐Ÿ˜…..

Cara Manual Membuat Tombol Dark Mode di Blog Blogspot

Oke lanjut gaes! Untuk cara otomatisnya sangat mudah banget bukan ?.. tinggal beli saja template LinkMagz buatan Mas Sugeng setelah itu tinggal kalian terapkan pada blogspot kalian dengan cara upload file yang berektensi .xml ( dot xml ), nah sekarang cara membuat secara manualnya! Yuk simak dengan baik, biar tidak ada kesalahan saat penerapannya!

  • Pertama : Log in ke akun Blogger kamu → pilih TemaEdit HTML ( Lihat Gambar di bawah - Klik gambar untuk memperjelas ).


  • Kedua : Copy dan Pastekan kode CSS di bawah ini sebelum / di atas kode ]]></b:skin> atau </style>

  • /* Night Mode */.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}

  • Ketiga : Pastekan JavaScript di bawah ini sebelum / di atas kode </body>

  • <script>
    //<![CDATA[
    $("#Night").click(function(){
    $("body").toggleClass('Night');
    });
    //]]>
    </script>

  • Ke Empat : Terakhir masukan kode pemanggil di bawah ini.. Untuk penempatannya bisa kamu sesuaikan dengan keinginan kamu.. misalnya di header blog ( Kepala blog ) atau footer blog ( kaki blog ) tapi lebih baiknya sih di tempatkan di bagian kepala blog ( Header blog )

  • <li>
      <label class='switch' for='Night'>
          <input id='Night' type='checkbox'/>
        <div class='slider round'/>
      </label>
    </li>

    Gimama gaes, mudah banget kan ? Lebih mudah dan praktis cara otomatis atau manual nih ? ๐Ÿ˜… Pastinya cara otomatis lebih praktis dan simpel dong! Hehe! Tapi apa sih gunanya memasang Dark Mode ini ? ( Mungkin sedikit terlintas di kepala kalian ? )

    Jadi Dark Mode atau biasa di sebut dengan Mode Malam / mode gelap merupakan fitur yang dimana dapat membuat sebuah website atau aplikasi menjadi tampilan gelap. Biasanya fitur ini sering dijumpai di aplikasi atau website media sosial seperti Youtube, Facebook, dan Twitter! Bahkan WhatsApp pun sudah di update ada Dark Modenya.

    Namun seiring berkembangnya zaman, banyak programmer yang ahli coding membuat script yang dapat berfungsi sebagai Dark Mode atau Mode malam ini.

    Kini Dark Mode ini bisa dipasang di website atau blog pribadi, salah satu contoh nya di Blogger. Jika kamu memiliki blog pribadi dan ingin mempercantik tampilan lamannya, mungkin dengan menambahkan fitur Dark Mode ini bisa menjadi pertimbangan untuk kamu!..


    Before you continue reading, it is necessary to underline that what is written is only a reference! so if there are errors in words and delivery methods, please understand! and below the recommendation article for you!

    Content Disclaimer!

  • I as the owner of "BlogCaraOcha" thank you to all loyal readers, and those who accidentally stopped by here.

    And I apologize if there are many advertisements on the homepage or in the post.

    After "BlogCaraOcha" is accepted as a Google publisher, Google automatically places all advertisements.

  • If the content on "BlogCaraOcha" has similarities with other sites or blogs, it only provides a reference to each other by spreading the word in a simple article.

    With the aim, all internet visitors can easily and freely which if the article is easy to understand.

    In addition, so that readers can easily find what is on the search, with content that can provide content in surfing the internet!

  • All images posted in the article are not 100% owned by "BlogCaraOcha" but are taken from Google Search.

    So if there are similarities with the images on other sites, it is only for illustration only (to decorate the storyline as outlined in the article).

    For some of the images here, they are purely self-created, with the same purpose as illustration only.

    However, if there are inappropriate images and ask to be removed, please provide more detailed information via the contact at "BlogCaraOcha"

  • For content that discusses the product review or tutorial, if there are errors, please be advised that it may be an error in typing words or lacking in detail reviewing.

    So if there are typos and results that are not appropriate, can provide input where the location of the error or lack, so that the content is immediately deleted or corrected.

    But before submitting, try to see between the date / year the post was published with the current date / year.

    Because it could be other times what the written policy has changed.
  • Berlangganan via Email

    '