Cara Buat Night Mode / Mode Malam dan Efek Bintang di Blog


Cara Buat Night Mode / Mode Malam dan Efek Bintang di Blog. Dalam Membuat Mode Malam / Dark Mode di situs web atau Blogger sebenarnya cukup mudah. Namun perlu kesabaran untuk memasangnya terutama untuk penyesuaian warna untuk elemen Class tertentu.

Kali ini, untuk Mode Malam yang admin buat agak sedikit spesial untuk teman – teman, karena admin akan tambahkan effect bintang – bintang, ini tidak akan memberatkan website teman – teman jadi sangat Aman untuk digunakan, admin juga menerapkan mode malam ini.

Effect bintang - bintang akan admin bedakan script, jadi Effect bintang ini bisa kalian pasang dan tidak kalian pasang, itu terserah kalian. Langsung saja silakan simak tutorial berikut

Cara Membuat Dark Mode / Mode Malam di Blogger

  1. Silakan kalian login ke blogger, dan masuk ke dashboard.
  2. Masuk ke menu Tema, Lalu Klik EDIT HTML.
  3. Cari Code ]]></b:skin>, Masukan Code CSS dibawah ini di ATAS code tersebut.
  4. /* Dark Mode, Mode Malam by Mediaachmad.com | Wahyu Achmad */
    /* 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 */
    /* Warna Wanjay.com Night Mode */
    .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 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:#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 #ignielNewsletter {background:#292e38;}
    .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 #ignielNewsletter .medsos__ {border-top-color: #313640;}
    .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 #ignielNewsletter 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. Masih di EDIT HTML. Sekarang kita buat tombol Dark Modenya. Jika template kalian viomagz, ingin meletakkan tombolnya di header kanan atas, Silakan letakkan kodenya di ATAS </header>. Jika template selain viomagz, bisa teman - teman sesuaikan sendiri lokasinya..
  6. <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>
  7. Jika sudah tambahkan script JS berikut ini di ATAS kode </body>
  8. UPDATE Oktober 2019 script JS dibawah : Night mode akan terus AKTIF tanpa terpengaruh pindah page
    <script type='text/javascript'>
    //<![CDATA[
    /* Dark Mode, Mode Malam by Mediaachmad.com | Wahyu Achmad */
    $(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>
    jika kalian BELUM menambah / menginstal jquery.min.js di website kalian, Silakan tambahkan code dibawah ini di ATAS </head>
    <script src='//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js'></script>
  9. Kemudian Simpan Tema


Sekarang kita buat untuk bintangnya.

  1. Silakan masuk ke EDIT HTML Lagi.
  2. Tambahkan Code CSS dibawah ini di ATAS code ]]></b:skin>. (Gunakan CRTL + F, untuk mencarinya)
  3. /* Dark Mode Bintang, Mode Malam by Mediaachmad.com | Wahyu Achmad */
    .section-center{
        position: fixed;
        width: 100%;
        height: 100%;
        top: 50%;
        left: 50%;
        display: none;
        overflow: hidden;
        z-index: 5;
     pointer-events: none;
        box-shadow: 0 0 50px 5px rgba(255,148,0,.1);
        transform: translate(-50%, -50%);
    }
    .section-center {
        -webkit-transition: all 500ms linear;
        transition: all 500ms linear;
    }
    .shooting-star {
     z-index: 2;
     width: 1px;
     height: 50px;
     border-bottom-left-radius: 50%;
     border-bottom-right-radius: 50%;
     position: absolute;
     top: 0;
     left: -70px;
     background: linear-gradient(to bottom, rgba(255, 255, 255, 0), white);
     animation: animShootingStar 6s linear infinite;
     -webkit-transition: all 2000ms linear;
     transition: all 2000ms linear; 
    }
    .shooting-star-2 {
     z-index: 2;
     width: 1px;
     height: 50px;
     border-bottom-left-radius: 50%;
     border-bottom-right-radius: 50%;
     position: absolute;
     top: 0;
     left: 200px;
     background: linear-gradient(to bottom, rgba(255, 255, 255, 0), white);
     animation: animShootingStar-2 9s linear infinite;
     -webkit-transition: all 2000ms linear;
     transition: all 2000ms linear; 
    }
    .star {
     z-index: 2;
     position: absolute;
     top: 185px;
     left: 25px;
     background-image: url('https://ivang-design.com//svg-load/air/star.png');
     background-size: 15px 15px;
     width: 15px;
     height: 15px;
     opacity: 0.4;
     animation: starShine 3.5s linear infinite;
     -webkit-transition: all 1200ms linear;
     transition: all 1200ms linear; 
    }
    .star.snd {
     top: 100px;
     left: 310px;
     animation-delay: 1s;
    }
    .star.trd {
     top: 130px;
     left: 100px;
     animation-delay: 1.4s;
    }
    .star.fth {
     top: 190px;
     left: 200px;
     animation-delay: 1.8s;
    }
    .star.fith {
     top: 85px;
     left: 1080px;
     animation-delay: 2.2s;
    }
    
    @keyframes animShootingStar {
     from {
      transform: translateY(0px) translateX(0px) rotate(-45deg);
      opacity: 1;
      height: 5px;
     }
     to {
      transform: translateY(1280px) translateX(1280px) rotate(-45deg);
      opacity: 1;
      height: 800px;
     }
    }
    @keyframes animShootingStar-2 {
     from {
      transform: translateY(0px) translateX(0px) rotate(-45deg);
      opacity: 1;
      height: 5px;
     }
     to {
      transform: translateY(1920px) translateX(1920px) rotate(-45deg);
      opacity: 1;
      height: 800px;
     }
    }
    
    @keyframes starShine {
     0% {
      transform: scale(0.3) rotate(0deg);
      opacity: 0.4;
     }
     25% {
      transform: scale(1) rotate(360deg);
      opacity: 1;
     }
     50% {
      transform: scale(0.3) rotate(720deg);
      opacity: 0.4;
     }
     100% {
      transform: scale(0.3) rotate(0deg);
      opacity: 0.4;
     }
    }
    
  4. Tambahkan kode HTML dibawah ini di ATAS code </body>.
  5. <div class='section-center'> 
     <div class='shooting-star'/>
     <div class='shooting-star-2'/>
     <div class='star'/>
     <div class='star snd'/>
     <div class='star trd'/>
     <div class='star fth'/>
     <div class='star fith'/>
    </div>
  6. Selesai.

Untuk DEMO silakan Teman - Teman bisa klik tombol bulan sabit di kanan atas website ini

Sekarang kalian lihat hasilnya, bila mengalamai kesulitan silakan komen dibawah admin akan mencoba untuk membantu. Mungkin itu yang dapat admin sampaikan sekian dan terima kasih.

Cara Buat Night Mode / Mode Malam dan Efek Bintang di Blog

Postingan Terkait

19 comments

  1. Mantap nih buat Blogku, mau ku coba ntar ..
    .
    Di tunggu Kunjungannya ..
    - SairentoKiru ..
    .

    ReplyDelete
    Replies
    1. Ok gan,.. Terima kasih atas kunjungannya.. :D

      Delete
  2. Ditunggu rombak foter nya gan

    ReplyDelete
  3. Kalo buat header kaya agan gimana

    ReplyDelete
    Replies
    1. itu saya cuma nambah border-left dan border right untuk batas li, untuk sub menu nya saya terinspirasi dari web mbak igniel, untuk tutorialnya bisa cari di google "sub menu full width" :D

      Delete
  4. Buatin tutor cara buat navigasi header punya ente

    ReplyDelete
    Replies
    1. kedepannya nanti akan saya buatkan tutorialnya.. mungkin sedikit lama, karena butuh penyesuaian dan penataan scriptnya.. jika terlalu lama buat agan, mungkin bisa mencari tutorial di web yang lain dulu.. :D

      Delete
  5. boleh minta template yang kmu gunakan donk mas? jika boleh ini email saya mas yumna.7722@gmail.com

    ReplyDelete
    Replies
    1. belom boleh dulu gan.. template masih dalam pengembangan :D

      Delete
  6. Templatenya keren kak😁....

    ReplyDelete
  7. Kok Punya Saya Bertumpukan Ya Gan ?

    ReplyDelete
    Replies
    1. Kadang ada yang bertumpukan gan.. agan bisa mengubah posisinya dengen mengedit CSS nya.. dengan element "right" contoh

      .modedark{
      ...
      right:50px;
      ...
      }

      Delete
  8. This comment has been removed by a blog administrator.

    ReplyDelete
    Replies
    1. maaf gan,.. komentarnya nggak sengaja kehapus


      untuk masalah mode malamnya terdapat di JS Night Modenya, JS night mode agan menjadi 1 baris sampai tidak terbaca.

      script punya agan

      //<![CDATA[ // Night mode$("#nightmode").click(function(){$("body").toggleClass("nightmode")}),$("body").toggleClass(localStorage.toggled),$("#nightmode").click(function(){"nightmode"!=localStorage.toggled?($("body").toggleClass("nightmode",!0),localStorage.toggled="nightmode"):($("body").toggleClass("nightmode",!1),localStorage.toggled="")}); //]]>


      ubah seperti ini


      //<![CDATA[
      $("#nightmode").click(function(){$("body").toggleClass("nightmode")}),$("body").toggleClass(localStorage.toggled),$("#nightmode").click(function(){"nightmode"!=localStorage.toggled?($("body").toggleClass("nightmode",!0),localStorage.toggled="nightmode"):($("body").toggleClass("nightmode",!1),localStorage.toggled="")});
      //]]>

      Delete
    2. Owh terimakasih kak 😁

      Delete

Post a Comment