Ada banyak cara untuk menghias tampilan blog agar semakin cantik dan menarik. Selain menambahkan widget-widget penting untuk kelengkapan navigasi blog, kita juga bisa menambahkan efek atau fitur-fitur menarik untuk membuat blog lebih menonjol dan beda dengan tampilan milik blog-blog lain. Misalnya dengan menambahkan background gambar, efek animasi bergerak, fitur mode malam, dan lain sebagainya. Namun sebelum itu, jangan lupa untuk cek kecepatan loading blog anda terlebih dulu.
Berkaitan dengan fitur mode malam (night mode), pada artikel sebelumnya saya telah memposting tutorial untuk membuat fitur night mode keren di blogger. Fitur ini memang kini banyak dijumpai di beberapa blog agar pengunjung dapat memilih untuk menggunakan tampilan background terang atau gelap saat membaca artikel blog tersebut. Jika anda menginstal aplikasi Google News di smartphone android anda, aplikasi tersebut juga dilengkapi dengan fitur ini.Adanya fitur night mode atau dark mode ini memang membuat tampilan menjadi lebih menarik. Jika anda berminat untuk memasang fitur mode malam ini di blog anda, silahkan baca postingan saya sebelumnya: Cara Membuat Fitur Night Mode (Dark Mode) Keren di Blog.
Jika sudah memasangnya, apakah anda merasa masih ada yang kurang untuk ditampilkan pada mode malam ini?. Jika iya maka anda juga bisa menambahkan efek kelip-kelip bintang dan bintang jatuh agar tampilan malam terasa lebih nyata dan syahdu. Pada postingan kali ini, kita akan belajar menambahkan efek bintang tersebut agar kesannya pengunjung blog anda seperti sedang menatap langit malam sembari membaca kalimat demi kalimat ditemani bintang gemintang.
Cara Menambahkan Efek Bintang Pada Fitur Night Mode
Bagi yang belum memasang fitur dark modenya, anda bisa memasangnya terlebih dulu. Silahkan baca tutorialnya pada link artikel yang saya sertakan di atas. Jika sudah, silahkan simak langkah-langkah di bawah ini untuk menambahkan efek bintangnya.
1. Buka akun blogger anda.
2. Pilih menu thema dan klik edit html.
3. Cari kode ]]></b:skin> atau kode </style> kemudian 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. Selanjutnya cari kode </body> dan 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 anda dan lihat hasilnya.
Sebagai catatan, saya kurang tahu apakah script untuk membuat efek bintang ini juga bisa berfungsi untuk fitur night mode yang lain. Namun jika anda memasang fitur night mode dari tutorial yang pernah saya bagikan sebelumnya, efek ini akan berjalan dengan baik sehingga blog anda akan semakin keren dan menawan. Semoga bermanfaat. Sumber
Thanks for reading Menambahkan Efek Bintang Pada Fitur Night Mode di Blog. Please share...!
0 Komentar untuk "Menambahkan Efek Bintang Pada Fitur Night Mode di Blog"
Terima kasih telah berkunjung ke blog saya, silahkan berkomentar dengan sopan. Maaf, Komentar berisi Link Aktif, Promosi Produk Tertentu, J*di, P*rn*, Komentar berbau SARA dan Permusuhan, tidak akan dipublish.