jalanpintas - Terdapat banyak teknik buat menghias tampilan web supaya terus menjadi mempesona dan menarik. Tidak hanya meningkatkan widget- widget berarti buat kelengkapan navigasi web, kita pula dapat meningkatkan efek ataupun fitur- fitur menarik untuk membuat web lebih menonjol dan beda dengan tampilan milik blog- blog lain. Misalnya dengan meningkatkan latar belakang foto, efek animasi bergerak, fitur mode malam, dan lain sebagainya. Tetapi sebelum itu, jangan lupa buat cek kecepatan loading web kamu terlebih dahulu.
Berkaitan dengan fitur mode malam( night mode), pada postingan tadinya aku sudah memposting bimbingan buat membuat fitur night fashion keren di blogger. Fitur ini memanglah saat ini banyak ditemukan di sebagian web supaya pengunjung bisa memilah buat memakai tampilan latar belakang cerah ataupun hitam disaat membaca postingan web tersebut. Bila kamu menginstal aplikasi Google News di smartphone android kamu, aplikasi tersebut juga dilengkapi dengan fitur ini.
Terdapatnya fitur night mode ataupun dark mode ini memanglah membuat tampilan jadi lebih menarik. Kamu dapat coba fitur night mode di web ini dengan mengklik ikon bulan sabit pada kanan atas header web ini. Keren serta menarik bukan?. Bila kamu berminat buat memasang fitur mode malam ini di web kamu, silahkan baca artikel sebelumnya: Cara Membuat Fitur Night Mode( Dark Mode) Keren di Blog.
Bila telah memasangnya, apakah kamu merasa masih terdapat yang kurang buat ditampilkan pada mode malam ini?. Jika iya maka kamu pula dapat meningkatkan efek kelip- kelip bintang dan bintang jatuh supaya tampilan malam terasa lebih nyata dan syahdu. Pada artikel kali ini, kita bakal belajar meningkatkan efek bintang tersebut supaya kesannya pengunjung web kamu kayak lagi memandang langit malam sambil membaca kalimat demi kalimat ditemani bintang gemintang.
Cara Meningkatkan Efek Bintang Pada Fitur Night Mode
Untuk yang belum memasang fitur dark modenya, kamu dapat memasangnya terlebih dahulu. Silahkan baca tutorialnya pada link postingan yang sebelumnya, Setelah itu silahkan ikuti langkah- langkah di dasar ini buat meningkatkan dampak bintangnya.
1. Buka account blogger kamu.
2. Seleksi menu thema serta klik edit html.
3. Cari kode]]
</ b: skin
ataupun kode</ style
setelah itu letakkan kode CSS berikut ini 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; } }
4. Berikutnya cari kode</ body
serta letakkan kode berikut ini 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>
5. Simpan kembali template kamu serta amati hasilnya.
Sebagai catatan, saya kurang tahu apakah script untuk membuat efek bintang ini juga dapat berfungsi buat fitur night mode yang lain. Tetapi bila kamu memasang fitur night mode dari tutorial yang pernah bagikan sebelumnya, efek ini bakal berjalan dengan baik sehingga web kamu bakal semakin keren serta mempesona. Mudah- mudahan berguna.