Artikel menarikMenambahkan Efek Bintang Pada Fitur Night Mode di Blog - Black Exotic - Hallo friend Black Exotic, Pada kesempatan ini, friend akan membaca Artikel yang dengan judul Artikel menarikMenambahkan Efek Bintang Pada Fitur Night Mode di Blog - Black Exotic, tim kami telah mengemas artikel ini dengan baik untuk anda simak dan ambil informasi didalamnya. mudah-mudahan isi postingan Artikel Blogging, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.

Judul : Artikel menarikMenambahkan Efek Bintang Pada Fitur Night Mode di Blog - Black Exotic
link : Artikel menarikMenambahkan Efek Bintang Pada Fitur Night Mode di Blog - Black Exotic

Artikel menarikMenambahkan Efek Bintang Pada Fitur Night Mode di Blog - Black Exotic

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. Anda bisa coba fitur night mode di blog ini dengan mengklik ikon bulan sabit pada kanan atas header blog ini. Keren dan menarik bukan?. 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

Demikianlah Artikel Artikel menarikMenambahkan Efek Bintang Pada Fitur Night Mode di Blog - Black Exotic

Cukup sampai disini artikel Artikel menarikMenambahkan Efek Bintang Pada Fitur Night Mode di Blog - Black Exotic kali ini, semoga dapat memberi manfaat untuk friend semua. baiklah, jangan lupa membaca artikel lainnya.

Artikel yang sedang anda baca Artikel menarikMenambahkan Efek Bintang Pada Fitur Night Mode di Blog - Black Exotic dengan alamat link https://blackexotic.blogspot.com/2020/10/artikel-menarikmenambahkan-efek-bintang.html

Share this post