How to Add Animated Logo in Blogger?

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.

I am a passionate writer. Read more.

6 comments

  1. Thank you so much sir this is very helpful for me tq ❤️
    1. Glad to hear that 🙂
  2. Thanks for sharing this awesome Tutorial it's really of great help💪
    1. Glad to hear that ❤️
  3. how to change colour of animation
    1. Um, this animation dosen't have any colour, you can try playing with the css codes to change the colour. If unable then tell me i'll definitely help you,
Don't spam links or promote stuff in the comments. It's annoying and lowers the conversation quality. Contribute respectfully and helpfully instead.