How to Add Animated Logo in Blogger?

Do you want to add Animated Logo in Blogger? Follow the below steps carefully to add Animated Logo in Blogger, and enjoy a creative logo in your blogger website.

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 friends, how did you guys like this post on How to add Animated Logo in Blogger? Now you must understood How to add Animated Logo in Blogger.

Tell us how you felt about this article on How to add Animated Logo in Blogger? by writing a comment so that we too can have a chance to learn and improve something from your ideas.