VEzcwOIzJo2ocMRnvNfZmXylSxSqdBdXDBtRZkxw
Bookmark

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.

21 komentar

21 komentar

  • Mas Kholis
    Mas Kholis
    Januari 27, 2020
    Ga work untuk viomagz versi 3.3
    • Mas Kholis
      Kurniawan
      Januari 28, 2020
      Scriptnya sudah saya perbaiki ya, silahkan coba lagi
    • Mas Kholis
      Mas Kholis
      Februari 02, 2020
      Siap..
    Reply
  • Syahrul Arul
    Syahrul Arul
    Desember 17, 2019
    Lagi ngetrend nih, mantap tutorialnya min.
    Reply
  • Himang
    Himang
    November 09, 2019
    betul kata teman-teman tidak ada reaksi apa-apa mohon penjelasannya.
    • Himang
      Kurniawan
      November 09, 2019
      Kalo boleh tau mas pakai template apa ?
    Reply
  • Evtan Avrillian
    Evtan Avrillian
    November 07, 2019
    Tidak ada reaksi apapun bang😁. Mohon diperbaiki
    • Evtan Avrillian
      Kurniawan
      November 08, 2019
      Barusan saya cek di blog mas, sudah work. Cara ini sudah saya terapkan di viomagz 3.2
    Reply
  • anime
    anime
    November 06, 2019
    Sudah saya letakkan semua nya
    Tetapi pas diklik tidak ada night modenya atau tidak terjadi apa apa
    • anime
      Kurniawan
      November 08, 2019
      Coba mas cek lagi di setiap pemasangan kodenya
    Reply
  • Ham-sama
    Ham-sama
    Oktober 08, 2019
    semisal pindah postingan, night mode nya hilang gak?
    • Ham-sama
      Kurniawan
      Oktober 08, 2019
      Udah bisa gan, kode javascriptnya saya ganti, silahkan cek
    • Ham-sama
      Ham-sama
      Oktober 08, 2019
      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
    • Ham-sama
      Kurniawan
      Oktober 08, 2019
      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
    Reply
  • Wacthoutlogy
    Wacthoutlogy
    Oktober 05, 2019
    Kok saya gagal ya😓
    Tombol sih muncul tpi pas di klik tampilan gak jadi apa2

    Demo: https://urusbae.blogspot.com/
    • Wacthoutlogy
      Kurniawan
      Oktober 06, 2019
      Coba cek lagi kodenya gan, mungkin ada yang kelewat
    • Wacthoutlogy
      Dedy Setyawan
      Desember 15, 2019
      milikkku, muncul tombol tapi jg g berubah pas diklik gan...
    • Wacthoutlogy
      Kurniawan
      Januari 28, 2020
      Kayaknya templatemu mengalami kendala, tidak bisa membaca javascript eksternal, nanti saya ubah lagi kodenya ya
    Reply
  • Wacthoutlogy
    Wacthoutlogy
    Oktober 05, 2019
    Komentar ini telah dihapus oleh pengarang.
  • Agung Maulana
    Agung Maulana
    Oktober 01, 2019
    Cara buat gambar profil di header gimana
    • Agung Maulana
      Kurniawan
      Oktober 02, 2019
      Nanti saya akan buatkan gan tutorialnya, pantengin terus ya blog serieswans.com.
    Reply