×

Owner / Author / Admin / etc

    Rahman NM    

"Pada halaman web ini saya akan membagikan informasi informasi menarik seputar Anime, Manga, Game, Film, dan juga berbagai tips-tips menarik lainnya."

Cara Membuat Efek Animasi Shadow Slash Pada Title / Logo Header Blog

February 13, 2020   • Comment

Pada kesempatan tutorial kali ini saya akan membagikan sebuah tutorial membuat efek animasi shadow slash pada title / logo header blog.

Apa itu efek animasi Shadow Slash ? Shadow slash merupakan sebuah efek animasi bergerak yang disertai dengan dengan bayangan putih pada title atau logo header template blog kamu. Memasang efek animasi shadow slash ini tidak memiliki manfaat khusus, atau menggunakan efek animasi ini hanya untuk mempercantik tampilan blog, agar berbeda seperti tampilan blog biasanya.

Untuk memasang atau membuat efek animasi terhadap title atau logo header blog, cukup mudah karna kamu hanya perlu meletakkan CSS aja dan tidak akan memperlambat kecepatan blog kamu, dan untuk DEMO nya kamu dapat melihat pada title atau logo yang ada diheader blog ini. Yuk langsung aja simak bagaimana cara membuat efek animasinya.

Membuat Efek Animasi Shadow Slash Pada Title / Logo Header Blog

1. Pertama, login dulu ke Blogger,
2. Kemudian, pada dashboard Blogger, pilih TEMAEDIT HTML,
3. Setelah itu, cari kode ini </head>, lalu copy kode CSS dibawah ini dan letakkan tepat diatas kode tersebut,
<style type="text/css">
header #header-inner a{position:relative}
header #header-inner a:before,header #header-inner a:after{content:&quot;&quot;;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}}
</style>
5. Terakhir simpan / save template tersebut, dan lihat hasilnya pada title atau logo header blog template milikmu.

Kesimpulan
Memasang efek animasi pada title atau logo header blog dapat memperindah tampilan blog kamu dan memasang efek animasi ini juga tidak akan memperlambat kecepatan blog kamu karna ini dibuat hanya dengan CSS aja (Cascading Style Sheet).

Akhir Kata
Sekian tutorial membuat efek animasi shadow slash yang dapat saya bagikan, jika ada kekurangan pada efek animasi yang saya bagikan, kamu dapat mengembangkannya menjadi lebih menarik dan berbeda dari yang saya bagikan, dan tunggu saja tutorial blogger menarik lainnya :D

Creativity of codes and exploiting, with code we can do something fun.
Facebook Instagram Twitter
Show Comments!
Hide comments

0 Response to "Cara Membuat Efek Animasi Shadow Slash Pada Title / Logo Header Blog"

Kebijakan berkomentar :

Berkomentarlah dengan tata bahasa yang baik, agar orang tau sebijak apa karakter anda melalui kata-kata,

Silahkan berkomentar apapun selagi masih berhubungan dengan halaman postingan ini,

Dilarang berkomentar menggunakan Link Aktif,

Centang Notife Me agar mendapatkan notifikasi balasan komentar admin melalui Email.

Post a Comment

Iklan Atas Artikel

Iklan Tengah Artikel

Iklan Tengah Artikel 2

Iklan Bawah Artikel

© Copyright 2020 Anirock Site - All Rights Reserved Created With