How to add Animated Logo in Blogger

Hello Blogmate's How are you ? I hope you are doing great. Most of you somehow will have noticed on many of blogs they have Animated logos like vertical solid lines moving around the text.

So today we are going to learn in this blog How to add Animated Logo in Blogger .

Using the below steps you can make a text or image animate using a few lines of CSS Codes.

How to add Animated Logo in Blogger?

I will guide you to add Animated Logo in Blogger. Ok, let’s begin!

Step 1. At first, you need to go to the Blogger dashboard i.e. Blogger.com.

Step 2. Go to the Themes Section and Click Edit HTML Button.

Step 3. Copy the code given below as per your need.

For Logo Animations

/* Animation Code */
#header {
	position: relative;
		display: inline-block;
		}
#header:before,
#header:after {
	content: "";
		position: absolute;
			top: 50%;
				width: 3%;
					height: 100%;
						transform: translateY(-50%);
							background: rgba(255, 255, 255, .75);
								z-index: 999999999;
								}
#header:before {
	left: 155%;
		animation: light-left 1.8s infinite alternate linear
		}
#header: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
																		}
																		}

For Text Animation

/* Animation Code */

#header h1 a,
#header h2 a,
#header h1,
#header h2 {
	position: relative;
	display: inline-block
}

#header h1 a:before,
#header h2 a:before,
#header h1:before,
#header h2:before,
#header h1 a:after,
#header h2 a:after,
#header h1:after,
#header h2:after {
	content: "";
	position: absolute;
	top: 50%;
	width: 3%;
	height: 100%;
	transform: translate(-50%);
	background: rgba(255, 255, 255, .75);
	z-index: 999999999
}

#header h1 a:before,
#header h2 a:before,
#header h1:before,
#header h2:before {
	left: 155%;
	animation: light-left 1.8s infinite alternate linear
}

#header h1 a:after,
#header h2 a:after,
#header h1:after,
#header h2: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
	}
}

Step 4. After copying the code, you need to paste the code in the ]]></b:skin> tag.

Step 5. Click Save!

Conclusion

So today we have discussed about How to add Animated Logo in Blogger and other blogging platforms. I hope you like this post kindly do give a comment below. If you are having problem in implementing this kindly contact me. Do visit regularly for getting more updates like this.