Mungkin kalian pernah menjumpai blog yang pada judul di headernya ada animasi seperti dibawah:
Title AnimationNah, kali ini kita akan membuatnya. Tentu saja dapat dengan mudah dipasang pada web /blog kamu hanya dengan css.
Caranya Bang?
Pertama kalian pergi ke edit tema, dan pilih edit html. Kemudian kalian cari kode </head>, jika tidak ketemu mungkin telah diparse menjadi seperti ini <!--<head>--><head>.Dan copy pastekan kode ini tepat diatas </head>.
<style type="text/css">
/* Title Animation Css */
#titleanimation{position:relative}#titleanimation:before,#titleanimation:after{content:"";position:absolute;top:50%;width:3%;height:100%;transform:translateY(-50%);background:#ff1a94;z-index:1}#titleanimation:before{left:155%;animation:light-left 1.8s infinite alternate linear}#titleanimation:after{right:-55%;animation:light-right 3.0s infinite alternate linear}@keyframes light-left{0%{left:85%;opacity:0}50%{left:40%;opacity:1}100%{left:50%;opacity:0}}@keyframes light-right{0%{right:80%;opacity:0}50%{right:100%;opacity:1}100%{right:0%;opacity:0}}
</style>
Btw, kamu tentunya bisa mengganti warnanya dengan mengganti kode hex warna pada tempat yang sudah saya tandai diatas.
Selanjutnya kalian cari kode <div class='headerInner'> kemudian tambahkan id='titleanimation' didalamnya sehingga menjadi seperti ini
<div class='headerInner' id='titleanimation'>
Dan yang terahir jangan lupa untuk save tema. Dan Membuat Title Animation Di Header Blog Dengan CSS telah bekerja dengan baik.
