Cara Menciptakan Efek Bersinar Pada Link Di Posting Blogger
Saturday, September 19, 2020
Edit
Sembari nunggu temen ngajak maen futsal dimanfaatkan dulu untuk menciptakan tutorial yang masih wacana seputar tampilan blogger. Kali ini saya akan membikin imbas bersinar atau glowing pada link yang ada di dalam posting blog. Tujuannya ialah untuk menunjukkan suatu perhatian lebih kepada pembaca ketika mereka sedang membaca artikel-artikel di blog anda.
Cara kerja dari imbas bersinar ini ialah ia akan muncul ketika pengunjung melaksanakan hover terhadap semua link yang ada di kiriman blog anda, bukan hanya itu saja sebab saya menciptakan imbas ini dengan menambahkan sedikit efek animasi CSS3 yang akan terus bersinar menyerupai mirip cahaya kunang-kunang bila pengunjung menghentikan cursor mereka pada link tersebut, silahkan lihat misalnya pada halaman demo.
Efek ini tidak akan bekerja pada semua browser, silahkan coba dengan peramban Mozilla Firefox.
Persiapan :
Salin semua aba-aba dibawah
Langkah-langkah :
1) Masuk ke akun blogger anda kemudian klik Template
2) Lakukan Back up kemudian klik Edit HTML
3) Cari aba-aba ]]></b:skin> kemudian pastekan semua aba-aba yang telah di salin tersebut sempurna diatasnya
5) Klik Simpan
Sekarang imbas glow pada link ini akan bekerja secara otomatis dan menciptakan tampilan postingan blog anda lebih bergaya. Enjoy & Happy Coding!
Cara kerja dari imbas bersinar ini ialah ia akan muncul ketika pengunjung melaksanakan hover terhadap semua link yang ada di kiriman blog anda, bukan hanya itu saja sebab saya menciptakan imbas ini dengan menambahkan sedikit efek animasi CSS3 yang akan terus bersinar menyerupai mirip cahaya kunang-kunang bila pengunjung menghentikan cursor mereka pada link tersebut, silahkan lihat misalnya pada halaman demo.
Persiapan :
Salin semua aba-aba dibawah
Klik ganda untuk menyalin
.post-body a { color: #00a693; text-decoration: none; } .post-body a:hover { color: yellow; animation: sinar .4s alternate infinite; z-index: 1; color: #fada5e; text-shadow: 0 0 2px #fada5e, 5px 3px 8px #fada5e; } @keyframes sinar { from { text-shadow: 0 0 2px #fada5e !important; } to { text-shadow: 5px 3px 8px #fada5e; } Langkah-langkah :
1) Masuk ke akun blogger anda kemudian klik Template
2) Lakukan Back up kemudian klik Edit HTML
3) Cari aba-aba ]]></b:skin> kemudian pastekan semua aba-aba yang telah di salin tersebut sempurna diatasnya
5) Klik Simpan
Sekarang imbas glow pada link ini akan bekerja secara otomatis dan menciptakan tampilan postingan blog anda lebih bergaya. Enjoy & Happy Coding!