How to Add Title Animation 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

How to Add Title Animation in Blogger Blogge

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.

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 :- After 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 Www.SmartTechMukesh.Com */
#smarttechmukesh{position:relative}#smarttechmukesh:before,#smarttechmukesh:after{content:"";position:absolute;top:50%;width:3%;height:100%;transform:translateY(-50%);background:#6200ee;z-index:1}#smarttechmukesh:before{left:155%;animation:light-left 1.8s infinite alternate linear}#smarttechmukesh: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>

Note :- Change The Marked Color Code According To You Need.

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='smarttechmukesh'>
Step 8 :- Then Don't Forget to Click on Save Theme.

Conclusion :-

In this post I have explained How to Add Title Animation in Blogger Using Html And Css. Hope this tutorial can be useful for you all and thank you for visiting our website.

Refrence :
Www.SmartTechMukesh.Com

Refernce:
www.smarttechmukesh.com

Our All Posts Are Protected By DMCA. So Don't Copy Our Posts And Reproduction In Any Way Is Strictly Prohibited ! Or else Legal Actions Will Be Taken.

Hello Friends, My Name is John M Smith and Welcome To Our Website. My Passion is to Share Knowledge With Everyone. Also I am a Website Designer.

7 comments

  1. Bhai hume kya smart tech mukesh ko chabge karna hoga ya waise rehne dene se koi prh nahi hai
    1. Koi Problem nahi hoga bhai. Ye sirf class hai jo title animation ko style dega.
  2. I have to use this animation on Image! What should I do?
    1. I mean image Header..
    2. Add This id='smarttechmukesh' ' after image code.
  3. how to add small header for fletro pro
  4. its awesome I added on my site <a herf="https://technostone.xyz>Technostone</a>
Leave your opinion or any doubt about this article. Don't try to spam, our team reviews every comment.

Ad Blocker Detected

Please turn off your adBlock because only ads make us excited, Thank you !!!