.png)
- Recommended : Add Colorful Scroll bar in Blogger Blog
Today I'm teach you how you can make your blogger blog background animated with colors this background are automatically changed colors in all time when someone visit your blog then he/she said like this "Humm nice customization" because this background are very beautiful it include only colors not images then also look great and colorful.
Browsers Support
This CSS Background support only some browsers which are use in daily life and used by some professional bloggers see below for which browser support and properly work with this CSS color changing background.
- Internet Explorer 10 OR Above
- Google Chrome 4.0 OR Above
- Mozilla Firefox 16.0 OR Above
- Apple Safari 4.0 OR Above
- Opera 15.0 OR Above
How This Made and Work?
This CSS Color changing background built with CSS3 @keyframes and I will made this background with this CSS3 language called @Keyframes. Before begin the tutorial I would like to explain something me tell you about this CSS3 language.
The @keyframe rule is doesn't supported in Internet Explorer 9 or earlier version. because this plugin require same thing as Youtube. With the help@keyframes you can easily create and customized animation for your blogger blog or other websites. During the working of creating animations, you can change the set of Cascading Style Sheet many and any times.
The first thing you will noticed about CSS3 animation code is keyframes . According to the this rule, this specialized CSS @ rule is followed by identifiers sames as C, C++ language some identifiers are used in make program from C++ or C languages. and it also another part of the CSS
I will made this plugin from most popular websites which provide CSS, HTML, JavaScript, Jquery and much more! this is W3Schools so all credits of codding goes to them and this background edited by Prajjwal so all credits of editing goes to them.
How To Install CSS Color Changing Background In Blogger Blogs?
Well, after something about tell you now let's time to ready to add this animated color changing background in blogger blog. It is so simple to install this animation background in blogger blog. Just follow below steps.
Don't forget before editing in template make sure you've a complete backup of your blogger template.
Happy Blogging!
The @keyframe rule is doesn't supported in Internet Explorer 9 or earlier version. because this plugin require same thing as Youtube. With the help
I will made this plugin from most popular websites which provide CSS, HTML, JavaScript, Jquery and much more! this is W3Schools so all credits of codding goes to them and this background edited by Prajjwal so all credits of editing goes to them.
How To Install CSS Color Changing Background In Blogger Blogs?
Well, after something about tell you now let's time to ready to add this animated color changing background in blogger blog. It is so simple to install this animation background in blogger blog. Just follow below steps.
Don't forget before editing in template make sure you've a complete backup of your blogger template.
- Go To Blogger Dashboard>>Template>>Edit HTML
- Find your previous blogger background Using (Ctrl+F)
Note:- Tip find this <body> tag after found body tag you can background property and you will need to removes its under code or remove background property with the values only, not a Selector.
- After removing the property with values
- Find again this below code
]]></b:skin>
- Paste the following code above/before the ]]></b:skin>
body {
animation: colorBackground 20s infinite; /* Chrome, Firefox 16+, IE 10+, Opera 12.10+ */
-webkit-animation: colorBackground 20s infinite; /* Chrome, Safari 5+ */
-moz-animation: colorBackground 20s infinite; /* Firefox 5-15 */
-o-animation: colorBackground 20s infinite; /* Opera 12.00 */
}
@keyframes colorBackground {
0% { background-color: #fbcf61; color: #fbcf61; }
20% { background-color: #6bd57e; color: #6bd57e; }
40% { background-color: #ff6f6f; color: #ff6f6f; }
60% { background-color: #57cff4; color: #57cff4; }
80% { background-color: #0ed4c8; color: #0ed4c8; }
100% { background-color: #fbcf61; color: #fbcf61; }
}
@-webkit-keyframes colorBackground {
0% { background-color: #fbcf61; color: #fbcf61; }
20% { background-color: #6bd57e; color: #6bd57e; }
40% { background-color: #ff6f6f; color: #ff6f6f; }
60% { background-color: #57cff4; color: #57cff4; }
80% { background-color: #0ed4c8; color: #0ed4c8; }
100% { background-color: #fbcf61; color: #fbcf61; }
}
@-moz-keyframes colorBackground {
0% { background-color: #fbcf61; color: #fbcf61; }
20% { background-color: #6bd57e; color: #6bd57e; }
40% { background-color: #ff6f6f; color: #ff6f6f; }
60% { background-color: #57cff4; color: #57cff4; }
80% { background-color: #0ed4c8; color: #0ed4c8; }
100% { background-color: #fbcf61; color: #fbcf61; }
}
@-o-keyframes colorBackground {
0% { background-color: #fbcf61; color: #fbcf61; }
20% { background-color: #6bd57e; color: #6bd57e; }
40% { background-color: #ff6f6f; color: #ff6f6f; }
60% { background-color: #57cff4; color: #57cff4; }
80% { background-color: #0ed4c8; color: #0ed4c8; }
100% { background-color: #fbcf61; color: #fbcf61; }
}
- Now Click on Save Template.
- CONGRATULATIONS! you've successfully added this animated background in blogger blog.
Last Words
I hope you're successfully add this animated color changing background on your blogger blog if you're facing problem or getting error during this process please leave comments for your problems solutions and don't forget o like our Facebook page and also share this post with your friends on social networking sites.Happy Blogging!
No Comment
Comment Policy
We’re eager to see your comment. However, Please Keep in mind that all comments are moderated manually by our human reviewers according to our comment policy, and all the links are nofollow. Using Keywords in the name field area is forbidden. Let’s enjoy a personal and evocative conversation.