Lompat ke konten Lompat ke sidebar Lompat ke footer

Cara Membuat Mode Malam (Night Mode) di Blogger

Cara Membuat Mode Malam (Night Mode) di Blogger

DezignDesu - Dark Mode atau sering di namakan Mode Malam (Night Mode) adalah salah satu tampilan yang menjadikan website/blog dari sebelumnya mode terang menjadi mode dark/gelap/malam/terserah kalian. Selain membuat tampilan web/blog anda jadi lebih keren, anda juga bisa mengatur warna gelapnya supaya pengunjung anda tidak sakit mata membaca konten pada web/blog kalian.

Baiklah, mari kita langsung menuju 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.

  • Silahkan  kamu login ke Blogger.com - Masuk ke Dashboard
  • Menuju menu Tema, Lalu Klik EDIT HTML
  • Cari kode ]]></b:skin> dengan  klik CTRL+F
  • Masukan kode CSS dibawah ini di ATAS code tersebut ( ]]></b:skin> ).
/* Button Dark Mode DezignDesu */
.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 DezignDesu*/
.DarkMode #wrapper {background: #292e38;}
.DarkMode #HTML3 {background:#1d2129;}
.DarkMode #footer-widget-container {background:#1d2129;}
.DarkMode .share-this-pleaseeeee {background:#292e38;}
.DarkMode .related-post h4{background:#292e38;}
.DarkMode #label-info-th {background:#1d2129;}
.DarkMode body {background:#1d2129;}
.DarkMode .post-body {color:#cccccc}
.DarkMode #baca-juga h2 {color:#cccccc;background:#1d2129}
.DarkMode .label-info-th a {color:#cccccc;background:#3d4658}
.DarkMode li.recent-posts a{color:#cccccc}
.DarkMode .recent-posts-title h2{color:#cccccc}
.DarkMode .Recent_Post_Mas_Tamvan .recent-post-mas-tamvan span.mastamvan_title a{color:#cccccc}
.DarkMode span.mastamvan_title a .Recent_Post_Mas_Tamvan .recent-post-mas-tamvan {color:#cccccc;background:#1d2129}
.DarkMode .Recent_Post_Mas_Tamvan .recent-post-mas-tamvan .widget-content {color:#cccccc;background:#1d2129}
.DarkMode .post-info {color:#cccccc}
.DarkMode {background:#1d2129;}
.DarkMode h2.post-title a {color:#9e9e9e;}
.DarkMode h2.post-title a:hover {color:#f17f43}
.DarkMode .post-title {color:#1e90ff}
.DarkMode ul.nav-social {color:#1d2129}
.DarkMode .post-snippet {color:#cccccc}
.DarkMode #ignielNewsletter {background:#292e38;}
.DarkMode #Label1{background:#292e38;}
.DarkMode .post{background:#292e38;border-bottom-color: #252a33;}
.DarkMode .PopularPosts h2{background:#343944;}
.DarkMode .latest-post-title h2{background:#292e38;border-bottom-color: #313640;}
.DarkMode .newspaptext{color:#9e9e9e}
.DarkMode .PopularPosts h2 span{color:#9e9e9e}
.DarkMode .list-label-widget-content ul li {border-bottom-color: #313640;}
.DarkMode .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;}
.DarkMode #ignielNewsletter .medsos__ {border-top-color: #313640;}
.DarkMode #footer-container{background:#12161f;}
.DarkMode #footer-navmenu{background:#171b25;}
.DarkMode .sidebar h2 {color:#b7b7b7;border-bottom-color: #313640;}
.DarkMode .sidebar-sticky h2 {color:#b7b7b7;border-bottom-color: #313640;}
.DarkMode .latest-post-title h2 {color:#b7b7b7;border-bottom-color: #313640;}
.DarkMode .above-post-widget h2 {color:#b7b7b7;border-bottom-color: #313640;}
.DarkMode .comments h3 {color:#b7b7b7;border-bottom-color: #313640;}
.DarkMode .breadcrumbs {color:#b7b7b7;border-bottom-color: #313640;}
.DarkMode .btnsocialshare {background:#383c44;}
.DarkMode .label-line::before{background: #1d2129;}
.DarkMode .label-line-c::before {background: #333740;}
.DarkMode a.showcontent:hover {background: #373a42;}
.DarkMode a.showcontent{background: #292e38}
.DarkMode #ignielNewsletter input{background: #272b33;border-color:#2b303a;}
.DarkMode .comments .comments-content .comment-content {color:#ffffff}
.DarkMode div#Label1 h2 {border-bottom: 1px solid #272b33;background: #343944;}
.DarkMode .related-post-style-3 .related-post-item-title {color: #bbb;}
.DarkMode #baca-juga ul {border: 2px solid #333740;}
.DarkMode #baca-juga h2 {border: 2px solid #292e38;}
.DarkMode #comments a.hiddencontent {background: #424854;}
.DarkMode .comments .comments-content .comment-thread ol {background: #292e38;}
.DarkMode .comments .comments-content .inline-thread {background: #292e38;}
  • Jangan di tutup terlebih dahulu pada menu EDIT HTML. Sekarang kita akan membuat tombol Dark Modenya. Sebenarnya tutorial ini di tujukan untuk pengguna theme viomagz. Namun, tidak membuat template lainnya di kecualikan. Silahkan mengaplikasikan sendiri bagi pengguna template selain viomagz.
  • Silakan letakkan kode di bawah ini tepat di ATAS </header>. Jika template selain viomagz, atau bisa disesuaikan sendiri lokasinya, tergantung minat kalian.
<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>
  • Terakhir, silahkan tambahkan script JS dibawah ini di tepat ATAS kode </body>
<script type='text/javascript'>
//<![CDATA[
/* Dark Mode, Mode Malam by DezignDesu */
$(document).ready(function(){$("body").toggleClass(localStorage.toggled),$("#modedark").on("click",function(){"DarkMode"!=localStorage.toggled?($("body").toggleClass("DarkMode",!0),localStorage.toggled="DarkMode",$(".section-center").css("display","block")):($("body").toggleClass("DarkMode",!1),localStorage.toggled="",$(".section-center").css("display",""))}),$("body").hasClass("DarkMode")?$("#modedark").prop("checked",!0):$("#modedark").prop("checked",!1)});
//]]>
</script>
  • Setelah semua selesai, klik Simpan / Save.
  • OK, Selesaii.. Sekarang silahkan cek pada Blog kalian masing - masing.
Sekian dulu posting dari saya. kiranya masih bingung, silahkan komentar pada kolom komentar yang tersedia, sebisa mungkin admin akan membantu masalah kalian mengenai tutorial di posting Cara Membuat Mode Malam (Night Mode) di Blogger. Jika tutorial imi memang berguna, jangan lupa di share ya... Maaf admin juga masih tahap belajar, jadi kita belajar bersama saja bila masih kurang faham, heheheh :v
Tampilkan Komentar
Sembunyikan Komentar

7 komentar untuk "Cara Membuat Mode Malam (Night Mode) di Blogger "

  1. Ngeri blogmu bro, da pa 1 bisa page one lo salut gw

    BalasHapus
  2. Keren. Akhirnya ada juga blogger anime.
    Terus berkarya.

    BalasHapus
  3. kak, cara buat logo vertifikasi di halaman awal gimana kak??? kalau masih belum faham, maksud saya, cara untuk menambahkan logo vertifikasi di nama penulis artikel... sebelum nya terimakasih

    BalasHapus
    Balasan
    1. itu cuma ikon sih..
      cara mudahnya tambahin aja ikon svg/fontawesome di cssnya, pake ::before
      atau bisa taruh ikonnya di sebelum script pemanggil nama author (pada edit tema), ntar tinggal di rapiin make css :)

      Hapus
  4. berhasil gan, terimakasih banyak

    BalasHapus