-->

Cara Membuat Tombol Mode Malam (Night Mode) di Blogger

Serieswans.com - Hallo sahabat blogger, pada kexempatan kali ini saya akan membuat tutorial mengenai cara membuat tombol mode malam atau night mode di blogger. saya membuat tutorial ini juga karena request dari teman-teman yang menghubungi saya lewat kontak email. 

Night Mode atau Mode Malam merupakan salah satu fitur yang digunakan untuk mengubah tampilan template blog anda menjadi terlihat gelap, contohnya saja pada blog serieswans.com yang sudah saya pasang Night Mode. anda bisa menekan tombol mode malam tersebut di pojok kanan bagian header.
Cara Membuat Tombol Mode Malam (Night Mode) di Blogger

Fitur Night Mode ini bervariasi, ada yang di lengkapi dengan tombol switch (seperti blog igniel) atau seperti tombol button. ketika anda mau mengaktifkan mode malam atau ingin kembali ke tampilan awal (Light Mode), anda tinggal menekan tombol itu kembali.

Selain membuat tampilan blog anda jadi lebih keren, anda juga bisa mengatur warna gelapnya supaya pengunjung anda tidak sakit mata melihat isi blog anda,hehe.

Oke kita langsung saja ke tutorialnya, silahkan anda pahami dan praktekan di template blog anda. saya sendiri menggunakan template viomagz. jika anda menggunakan template yang berbeda, silahkan pahami sturktur kodenya lalu sesuaikan dengan kode Night Modenya. selebihnya bisa anda kreasikan sendiri ya.

Cara Membuat Tombol Night Mode atau Mode Malam di Blogger

  • Pertama, buka terlebih dahulu akun blogger anda dan masuk ke menu Dashboard
  • Pilih Tema atau Template => Edit HTML
  • Silahkan cari kode ]]></b:skin> dengan menekan tombol CTRL + F
  • Kemudian salin kode di bawah ini dan letakan di atas kode tersebut.

/* Button Dark Mode */
.modedark{display:inline-block;float: right;margin-top: 3px;position:absolute;right:45px;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 */
/* Night Mode serieswans.com */
.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:#fff;background:#292e38;}
.Night .post-body table.tr-caption-container td{color:#fff;}
.Night .post-body table td{background:no-repeat;border:1px solid #f5f5f5;padding:10px;text-align:left;vertical-align:top}
.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 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:#000;}
.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 #ignielNewsletter {background:#292e38;}
.Night #Label1{background:#292e38;}
.Night .post{background:#292e38;border-bottom-color: #252a33;}
.Night .PopularPosts h3{background:#343944;}
.Night .latest-post-title h3{border-bottom-color: #313640;}
.Night .newspaptext{color:#9e9e9e}
.Night .PopularPosts h3 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 #ignielNewsletter .medsos__ {border-top-color: #313640;}
.Night #footer-container{background:#12161f;}
.Night #footer-navmenu{background:#171b25;}
.Night .sidebar h3 {color:#b7b7b7;border-bottom-color: #313640;}
.Night .sidebar-sticky h3 {color:#fff;border-bottom-color: #313640;}
.Night .latest-post-title h3 {color:#fff;border-bottom-color: #313640;}
.Night .above-post-widget h3 {color:#b7b7b7;border-bottom-color: #313640;}
.Night .comments h3 {color:#fff;border-bottom-color: #313640;}
.Night .breadcrumbs {color:#fff;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 #ignielNewsletter input{background: #272b33;border-color:#2b303a;}
.Night .comments .comments-content .comment-content {color:#000;}
.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;}
  • Sekarang tinggal meletakan tombol Night Modenya,  contohnya pada header atau terserah anda mau memasangnya dmana.
  • Untuk meletakan di bagian header, silahkan cari kode berikut

</header>
  • Lalu salin kode di bawah ini dan letakan di atas kode tersebut.

<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='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>
  • Selanjutnya cari kode </body>  , lalu salin kode di bawah ini dan letakan di atas kode tersebut.

<script type="text/javascript">
    var _0xcf07=[&quot;x74x6Fx67x67x6Cx65x64&quot;,&quot;x74x6Fx67x67x6Cx65x43x6Cx61x73x73&quot;,&quot;x62x6Fx64x79&quot;,&quot;x63x6Cx69x63x6B&quot;,&quot;x4Ex69x67x68x74&quot;,&quot;x64x69x73x70x6Cx61x79&quot;,&quot;x62x6Cx6Fx63x6B&quot;,&quot;x63x73x73&quot;,&quot;x2Ex73x65x63x74x69x6Fx6Ex2Dx63x65x6Ex74x65x72&quot;,&quot;&quot;,&quot;x6Fx6E&quot;,&quot;x23x6Dx6Fx64x65x64x61x72x6B&quot;,&quot;x68x61x73x43x6Cx61x73x73&quot;,&quot;x63x68x65x63x6Bx65x64&quot;,&quot;x70x72x6Fx70&quot;,&quot;x72x65x61x64x79&quot;];$(document)[_0xcf07[15]](function(){$(_0xcf07[2])[_0xcf07[1]](localStorage[_0xcf07[0]]),$(_0xcf07[11])[_0xcf07[10]](_0xcf07[3],function(){_0xcf07[4]!= localStorage[_0xcf07[0]]?($(_0xcf07[2])[_0xcf07[1]](_0xcf07[4],!0),localStorage[_0xcf07[0]]= _0xcf07[4],$(_0xcf07[8])[_0xcf07[7]](_0xcf07[5],_0xcf07[6])):($(_0xcf07[2])[_0xcf07[1]](_0xcf07[4],!1),localStorage[_0xcf07[0]]= _0xcf07[9],$(_0xcf07[8])[_0xcf07[7]](_0xcf07[5],_0xcf07[9]))}),$(_0xcf07[2])[_0xcf07[12]](_0xcf07[4])?$(_0xcf07[11])[_0xcf07[14]](_0xcf07[13],!0):$(_0xcf07[11])[_0xcf07[14]](_0xcf07[13],!1)})
</script>
  • Update 28 Januari 2020 : Jika kode Javascript di atas tidak berhasil, silahkan pakai kode yang kedua di bawah ini

<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>

  • Setelah itu simpan Tema dan cek hasilnya.


Silahkan anda atur tempat untuk meletakan Tombol Night Modenya dan atur juga ukuran tombol di setiap ukuran layar, silahkan cek menggunakan responsinator

Nah,mungkin itu saja tutorial kali ini mengenai Cara Membuat Tombol Mode Malam (Night Mode) di Blogger. silahkan berkomentar bagi anda yang masih belum paham. semoga bermanfaat.

Next
Previous

Related Posts

Show comments
Hide comments

21 Komentar

  1. Cara buat gambar profil di header gimana

    BalasHapus
    Balasan
    1. Nanti saya akan buatkan gan tutorialnya, pantengin terus ya blog serieswans.com.

      Hapus
  2. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  3. Kok saya gagal ya😓
    Tombol sih muncul tpi pas di klik tampilan gak jadi apa2

    Demo: https://urusbae.blogspot.com/

    BalasHapus
    Balasan
    1. Coba cek lagi kodenya gan, mungkin ada yang kelewat

      Hapus
    2. milikkku, muncul tombol tapi jg g berubah pas diklik gan...

      Hapus
    3. Kayaknya templatemu mengalami kendala, tidak bisa membaca javascript eksternal, nanti saya ubah lagi kodenya ya

      Hapus
  4. semisal pindah postingan, night mode nya hilang gak?

    BalasHapus
    Balasan
    1. Udah bisa gan, kode javascriptnya saya ganti, silahkan cek

      Hapus
    2. udah saya coba bisa gan, tapi semisal cara ganti tombol switchnya biar gak floating gimana ya? semisal mau tak pasang di samping search bar gitu.

      unsolvedindonesia.com

      Hapus
    3. Mas harus tau dulu dimna meletakannya, keinginan mas kan mau pasang di samping search bar, nah mas cari kode search bar itu, lalu pindahin kode html night modenya di atas kode searchbar

      Hapus
  5. Sudah saya letakkan semua nya
    Tetapi pas diklik tidak ada night modenya atau tidak terjadi apa apa

    BalasHapus
    Balasan
    1. Coba mas cek lagi di setiap pemasangan kodenya

      Hapus
  6. Tidak ada reaksi apapun bang😁. Mohon diperbaiki

    BalasHapus
    Balasan
    1. Barusan saya cek di blog mas, sudah work. Cara ini sudah saya terapkan di viomagz 3.2

      Hapus
  7. betul kata teman-teman tidak ada reaksi apa-apa mohon penjelasannya.

    BalasHapus
  8. Lagi ngetrend nih, mantap tutorialnya min.

    BalasHapus
  9. Ga work untuk viomagz versi 3.3

    BalasHapus
  • Mohon Tinggalkan jejak sesuai dengan judul artikel.
  • Tidak diperbolehkan untuk mempromosikan barang atau berjualan.
  • Dilarang mencantumkan link aktif di komentar.
  • Komentar dengan link aktif akan otomatis dihapus
  • Berkomentarlah dengan baik, Kepribadian Anda tercemin saat berkomentar.
  • Jika ingin menulis kode maka harus di-parse terlebih dulu (terutama Javascript dan HTML)
  • Centang kotak Beri tahu saya untuk mendapatkan notifikasi via email jika ada yang membalas komentar.
  • Gunakan tag <i> dan diakhiri dengan kode </i> untuk menuliskan kode. Contoh:
    <i>#comments</i>
  • Gunakan tag <em> dan diakhiri dengan kode </em> untuk menuliskan kode yang lebih panjang atau URL. Contoh:
    <em>#comments {margin:0; padding:10px 15px}</em>

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

x
Berlangganan

Dapatkan pemberitahuan melalui email setiap ada artikel baru. Gratis!