How to Add Dynamic Animation Header in Blogger?
Hello Everyone, on this occasion I will share a tutorial on how to add title animation in blogger. You can easily apply this title animation on your blogger website.
This Animated title animation is created with the help of html and css. It does not use JavaScript. If you want to apply this title animation on your blog then read full post and follow given steps.
Don't forget to back up your template before changing or adding this animation or anything to your blogger. So that if anything goes wrong with your template, you can use your back up template.
Change The Color Code According To You Need.
How to Add Title Animation in Blogger :-
Step 1 :- First Go To Blogger.Com.
Step 2 :- After Login Your Account.
Step 3 :- Then click on Theme Menu.
Step 4 :- Then Click on Edit Html.
Step 5:- Then paste the given Css code above the </head> tag.
<style type='text/css'>
/* Title Animation Css Code By Scripthelper360.blogspot.com */
#scripthelper360{position:relative}#scripthelper360:before,#scripthelper360:after{content:"";position:absolute;top:50%;width:3%;height:100%;transform:translateY(-50%);background:#33cc33;z-index:1}#scripthelper360:before{left:155%;animation:light-left 1.8s infinite alternate linear}#scripthelper360: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>
Step 6 :- Then Find The Html Code given Below.
<div class='headerInner'>
Step 7 :- Then Replace it With New Html Code Given Below.
<div class='headerInner' id='scripthelper360'>
Step 8 :- Then Don't Forget to click on Save Theme.
Thank You
Post a Comment