Nikamicode - Cara Membuat Efek Bayangan Berjalan Bolak-Balik pada Logo Blog pada kesempatan kali ini saya akan share cara membuat efek bayangan bolak balik seperti website dunia21 yang dipakai sekarang.
 |
Kode script yang saya berikan tentunya tidak akan memberatkan atau memperlambat kinerja kecepatan template blog kamu karena hanya menambahkan kode CSS saja jadi jangan khawayir ya hehe.
Tujuan dibuatnya Cara Membuat Efek Bayangan Berjalan Bolak Balik pada Header ini tentunya untuk mempercantik blog kamu dan profesional. Tanpa panjang lebar lagi mari ke Tutorial cara membuatnya dibawah ini.
Cara Membuat Efek Bayangan Berjalan Bolak Balik pada Header
1. Login ke akun Blogger kamu.
2. Pilih Dashboard Menu Tema > Edit Tema
3. Cari Kode ]]></b:skin> , lalu copy dan Paste Kode CSS dibawah ini tepat Diatas kode ]]></b:skin>.
/* Header Logo Effect Blog */
header #header-inner a{position:relative}
header #header-inner a:before,header #header-inner a:after{content:"";position:absolute;top:50%;width:10px;height:100%;transform:translateY(-50%);background-color:rgba(255,255,255,.75);z-index:999999999}
header #header-inner a:before{left:-5%;animation:light-left 3s infinite alternate linear}
header #header-inner a:after{right:-5%;animation:light-right 3s infinite alternate linear}
@keyframes light-left{0%{left:-5%;opacity:0}50%{left:50%;opacity:1}100%{left:105%;opacity:0}}
@keyframes light-right{0%{right:-5%;opacity:0}50%{right:50%;opacity:1}100%{right:105%;opacity:0}}4. Langkah Selanjutanya kamu Save/Simpan Tema dan Cek Hasilnya
Jika menggunakan kode CSS tersebut tidak berfungsi, silahkan ganti kode pemanggil #header-inner a menjadi kode pemanggil header template kamu.