Cara Menambahkan Effect Bintang Jatuh Pada Fitur Night Mode di Blogger

Cara Menambahkan Effect Bintang Jatuh Pada Fitur Night Mode di Blogger

Hallo guys ?!!, seperti biasa OIFnews.com akan share Tips & Tutorial Blogger, pada artikel kali ini saya akan menulis artikel Cara Menambahkan Effect Bintang Jatuh Pada Fitur Night Mode di Blogger. Langsung aja berikut cara-caranya :


Cara Menambahkan Effect Bintang Jatuh Pada Fitur Night Mode di Blogger

  1. Lоg In ke Blоggеr 
  2. Pilih menu TEMA Edіt HTML
  3. Cору dan Paste kode Stуlе CSS dі bаwаh іnі ѕеbеlum kоdе ]]></b:skin>

    .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. Masukan kоdе JаvаSсrірt dі bаwаh ini tepat sebelum kode </bоdу>

    <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>
  5. Terakhir SIMPAN

Nahh itu dia Tips & Tutorial Blogger kali ini pada artikel Cara Menambahkan Effect Bintang Jatuh Pada Fitur Night Mode di Blogger. Bagiamana sangatlah mudahkan, semoga bermanfaat ya teman-teman dan jangan lupa lihat juga Tips & Tutorial Blogger yang lainnya DISINI