Membuat Efek Bintang Pada Fitur Night Mode di Blog

Yuk kita menghias blogger kita dengan Membuat Efek Bintang Pada Fitur Night Mode di Blog yang enak di pandang untuk kita dan pengujung. Dengan adanya effek tersbut blog kita terasa hidup di luarangkasa karena ada bintang serta bintang yang berjatuhan.

Yang harus di persiapkan dalam Membuat Efek Bintang Pada Fitur Night Mode di Blog sebagi berikut
  • Blogger
  • Kode script (yang di pasang pada tema)
Bila poin di atas sudah tersedia yuk kita tutorial Membuat Efek Bintang Pada Fitur Night Mode di Blog denngan mudah berserta gambarnya.
  • Buka blogger, masuk tema, Edit HTML, Cari kode ]]></b:skin> atau kode </style> tempel di atasnya
/* Dark Mode Bintang */ .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; } }  

  • Cari kode </body> lalu letakan di kode di atasnya
<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>

  • Save, lalau lihat hasilnya pada blog kalian.

Effek mode bintang ini berwarna putih, bila tampilan blog kalian berwarna putih / yang lainya saya juga tutorial cara membuat Drak Mode Night di blogger yang artinya tampilan background kita berwarna gelamp.

Sekarang kalian sudah bsia membuat fitur Efek Bintang Pada Fitur Night Mode di Blog pada blogger kalian yang sangat keren bukan, semoga panduan yang di buat ini bisa bermanfaat buat kalian.
Bagikan:

Post a Comment