. How to Create Night Mode and Star Effects on a website or Blogger - Blogger Byte -->

Iklan Header


How to Create Night Mode and Star Effects on a website or Blogger

Bloggerbyte - If you are looking for ways to make Night Mode / Dark Mode on your blog you can find it here. By installing a dark mode on the blog it is very useful for visitors because it can make visitors more comfortable when visiting your blog that has too high contrast. How to Create Night Mode / Night Mode and Star Effects on Blogs. Creating a Night Mode / Dark Mode on a website or Blogger is actually quite easy. But it takes patience to install it especially for color adjustments for certain Class elements.

How to make Dark Mode / Night Mode on Blogger

  1. Please login to blogger, and enter the dashboard.
  2. Enter the menu Theme, then click EDIT HTML.
  3. Search Code ]]></b:skin>, Put the CSS code below just above ]]></b:skin> code.
  4. /* Dark Mode, by bloggerbyte.net */
    /* 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;
    }
    /* bloggerbyte Dark Mode */
    /* Night Mode by bloggerbyte.net */
    .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. Still on EDIT HTML. Now we make the Dark Mode button. If the template you viomagz, wants to put the button in the upper right header, Please put the code above </header>. If the template is other than viomagz, you can adjust the location yourself.
  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. Now add the following JS script just avobe </body> code
  8. <script type='text/javascript'>
    //<![CDATA[
    /* Dark Mode, by bloggerbyte.net */
    $(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>
    if you have NOT added / installed jquery.min.js on your website, please add the code below just avobe </head>
    <script src='//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js'></script>
  9. Then Save Theme


Now we make for the stars.

  1. Please enter EDIT HTML EDIT HTML again.
  2. Add the CSS code below before code ]]></b:skin>. (Use CRTL + F, to look for it)
  3. /* Dark Mode by bloggerbyte.net */
    .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. Add the HTML code below before </body> code.
  5. &lt;div class=&#039;section-center&#039;&gt;
     &lt;div class=&#039;shooting-star&#039;/&gt;
     &lt;div class=&#039;shooting-star-2&#039;/&gt;
     &lt;div class=&#039;star&#039;/&gt;
     &lt;div class=&#039;star snd&#039;/&gt;
     &lt;div class=&#039;star trd&#039;/&gt;
     &lt;div class=&#039;star fth&#039;/&gt;
     &lt;div class=&#039;star fith&#039;/&gt;
    &lt;/div&gt;
  6. Done.

for DEMO - Click Here

logo
A Website Speed Is Our Priority.
  • Facebook
  • WhatsApp
  • Instagram
  • SHARE

    Subscribe Our Newsletter

    Related Posts

    Open Comments
    Close Comments

    0 Response to "How to Create Night Mode and Star Effects on a website or Blogger"

    Post a comment

    Iklan Atas Artikel

    Iklan Tengah Artikel 1

    Iklan Tengah Artikel 2

    Iklan Bawah Artikel