Home
Blogger

Add CSS Powered Animated Color Changing Background In Blogger

Add CSS Powered Animated Color Changing Background In Blogger

Most of the Blogger template we use separate background for make little unique. Some Blogger use relevant background for matching their template. Like tech base, tutorial based background. But using background your site will delay to load. If you use image with higher resolution then it will also take extra time to load full template. But by using CSS background we can make our site faster and beautiful. 

 Recommended: 

However I have already shared CSS patter for using instead background image.  But this is the little bit different. To create animation I will use 4 keyframes thus it can change one by one. In output we will see like animation. I mean random color changing in template background.


Before proceed you have to change your previous background. If you use any image then you should remove that first. Removing image background is very easy. For example purpose you can get the background image from below script. Here the bold color code and image can be directly delete.

body{background:#D8D8D8 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtmpuWj-lsNGYXgue-msQk3kIPbpoinvxGzEmDA8Wtp1Ys91jb153AnI-Pii3-VVPIw_4M2pSxu_wYdx4fifRh7Ic7RLvkNFV4aLV3y4HVUXlqORR_RVjxHvrXfd4SbIEPQqSEyNCNehY/s1600/bg.png) repeat fixed top center;margin:0;padding:0;color:#333333;font:x-small Georgia Serif;font-size/* */:/**/small;font-size:/**/small;text-align:center;}

This is just illustration in your template it may be different. But also remove background:#D8D8D8 color also if you have already added. After removing current background color and image Just follow the below steps to add this amazing effect on your Blogger template.




Step 1 Log in to your Blogger Account and Go to your Blogger Dashboard

Step 2 Click on Now click on -> Template -> Edit HTML->

Step 3 Now find the </b:skin> by pressing Ctrl+F (Windows) or CMD+F (Mac)


Step 4 Copy and Paste below code above/before </b:skin>

 
body {
animation: colorBackground 22s infinite; 
-webkit-animation: colorBackground 22s infinite; 
-moz-animation: colorBackground 22s infinite; 
-o-animation: colorBackground 22s infinite; 
}

@keyframes colorBackground {
0% { background-color: #B461FB; color: #B461FB; }
20% { background-color: #74E588; color: #74E588; }
40% { background-color: #F98585; color: #F98585; }
60% { background-color: #50BFE1; color: #50BFE1; }
80% { background-color: #4256EF; color: #4256EF; }
100% { background-color: #B461FB; color: #B461FB; }
}
@-webkit-keyframes colorBackground {
0% {background-color: #B461FB; color: #B461FB;}
20% {background-color: #74E588; color: #74E588;}
40% {background-color: #F98585; color: #F98585;}
60% {background-color: #50BFE1; color: #50BFE1;}
80% {background-color: #4256EF; color: #4256EF;}
100% {background-color: #B461FB; color: #B461FB;}
}
@-moz-keyframes colorBackground {
0% {background-color: #B461FB; color: #B461FB;}
20% {background-color: #74E588; color: #74E588;}
40% {background-color: #F98585; color: #F98585;}
60% {background-color: #50BFE1; color: #50BFE1;}
80% {background-color: #4256EF; color: #4256EF;}
100% {background-color: #B461FB; color: #B461FB;}
}
@-o-keyframes colorBackground {
0% {background-color: #B461FB; color: #B461FB;}
20% {background-color: #74E588; color: #74E588;}
40% {background-color: #F98585; color: #F98585;}
60% {background-color: #50BFE1; color: #50BFE1;}
80% {background-color: #4256EF; color: #4256EF;}
100% {background-color: #B461FB; color: #B461FB;}
}

Customization

  • To change the loading delay alter 22s with 30s or more, More seconds means it will take more time to load next background color.
  • To change the background colors just alter the color code. You can get color code from our Color Picker.

Step 5 hit the Save template button.


And check your Blogger template to see the effect. There are different colors are changing behind your Blogger template.  It seems to you just like a rainbow at the back. I hope you and your visitors will love it. And for more tutorials stay tune. 

2 comments

  1. Helpful as always. Every post you write produce a massive value to your readers that is the only reason it is so popular and has great authority.click here to find out more
    primary school web design uk
    • Thanks for your comment. Wish you best of luck. :up
Go Up