How to Add Title Animation in Blogger

Hello Blogger user, in this tutorial I will share with you all How to Add Title Animation in Blogger. Installing a Title Animation on your website will look more professional, plus it can also serve as an assessment of the views.

Source Code Credits

How to Add Title Animation in Blogger

Adding Title Animation in iMagz Theme 

Adding CSS!

1. Go to blogger
2. Go to Theme option
3. Click on Edit HTML
4. Now copy the code and paste the code above the ]]></b: skin>

/* Header Animation */ 
.twdTrans{position:relative} 
.twdTrans:before,.twdTrans:after{content:'';position:absolute;top:50%;width:3px;height:100%;transform:translateY(-50%);background:var(--linkBg);z-index:1} 
.twdTrans:before{left:155%;animation:light-left 1.8s infinite alternate linear} 
.twdTrans: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}}

Adding HTML

1. Now, find the following HTML:

<div class='headInnr'>

1. And replace the above HTML with:

<div class='headInnr twdTrans'>

Adding Title Animation in Median UI or Fletro Pro Theme 

Adding CSS!

1. Go to blogger
2. Go to Theme option
3. Click on Edit HTML
4. Now copy the code and paste the code above the ]]></b: skin>

/* Header Animation */ 
.twdTrans{position:relative} 
.twdTrans:before,.twdTrans:after{content:'';position:absolute;top:50%;width:3px;height:100%;transform:translateY(-50%);background:var(--linkBg);z-index:1} 
.twdTrans:before{left:155%;animation:light-left 1.8s infinite alternate linear} 
.twdTrans: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}}

Adding HTML

1. Now, find the following HTML:

<div class='headInnr'>

1. And replace the above HTML with:

<div class='headInnr twdTrans'>

Rate this article