|
| Widget Animasi Title Blog CSS tanpa JavaSript |
A. Animasi Title
Animasi merupakan elemen visual / gambar bergerak berbentuk dari sekumpulan objek yang disusun secara beraturan mengikuti pergerakan yang telah ditentukan pada setiap pertambahan hitungan waktu yang terjadi. Visual / gambar atau objek yang dimaksud dalam definisi diatas bisa berupa obyek berbentuk garis, bar, gambar manusia, hewan, maupun tulisan.
Kesimpulannya, animasi adalah perubahan cepat dari visual / gambar yang berurutan untuk menciptakan suatu ilusi gerakan
Related Posts
Tutorial membuat Animasi Title Blog
Animasi title blog pada konten ini adalah animasi berupa elemen garis atau bar, yang bergerak dari kiri ke kanan dan sebaliknya. Animasi title blog ini terletak di atas header atau judul header.
Animasi title blog ini dibuat hanya dengan menggunakan CSS dan HTML tanpa JavaScript, sehingga tidak memberatkan saat loading blognya dan lulus tes uji PageSpeed Insights.
Cara membuat animasi title blog pada Template Plus UI dan Modie UI sebagai berikut.
Kode Script CSS dan HTML Animasi Title
- Pertama-tama Login ke Dashboard Blogger Anda.
- Pilih Tema.
- Klik icon panah ke bawah di sebelah tombol 'Sesuaikan'
- Klik Edit HTML, Anda akan diarahkan ke halaman pengeditan.
- Cari kode ]]></b:skin> kemudian salin script CSS dibawah ini, kemudian tempelkan di atas kode ]]></b:skin>
- Kemudian cari kode nama
header title, atau cari kode script seperti berikut ini. - Terakhir - Pratinjau dan Simpan.
/* 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}}
<b:tag class='headTtl' expr:name='!data:view.isHomepage ? "a" : "span"'>Ganti dengan kode script di bawah ini,
<b:tag class='headTtl' expr:name='!data:view.isHomepage ? "a" : "span"' id='titleanimation'>
B. Demo
B. Demo Animasi Title Blog
Demo tampilan animasi title blog dengan menggunakan kode script CSS dan HTML disini.
Demikian cara membuat widget animasi Title Blog CSS tanpa JavaSript di Blogger, semoga bermanfaat.