√ How to Change Blog Header Color to Gradient

How to change the blog header color to 2 colors

Changing the color of the blog header certainly has its own uniqueness, such as to make the blog look cooler so that blog visitors are happier with the appearance of your blog.

Actually, if you want to change the color of the blog header, it's very easy, just adjust it in the theme settings. Because almost all templates provide this feature so that a blogger can more easily change the header color or other colors.

However, if you want to change it to 2 or more colors or what is commonly called a gradient, of course not all templates provide this feature, because now almost all places can be used to change colors with only 1 particular color.

So what if you want to change the header color to a gradient? the method is very easy, namely by adding the CSS gradient code in your template, then you can change the color of the header & footer to gradient.

How to Change Blog Header Color to Gradient

As I explained above, to change the color of the template or header theme to a gradient, you must use the CSS code below. Follow the instructions below to apply the CSS code.

Open blogger dashboard
Go to the Theme, then Select Edit HTML
Look for the code </head>
Copy the CSS code below, then save it before the code </head>

CSS Code

<style>#header-container, #header-content, .headIn, .navIn{background:
linear-gradient(-90deg, #7ec4cf, #ff99bb 100%);</style>

Then save the theme & see the result.

Change the color code #7ec4cf, #ff99bb using your own color code.

NOTE: Each header code of each template is different. Usually someone uses the code #header-container, #header-inner, #header-content, #header, .headIn, and others.

How to find out the header code in the template?

It's very easy, you just use the Page Inspection method on your blog, then you can see the header code in your template. If indeed the CSS code above works well, you don't need to change the header code.

Using 3 Colors

If you want to use 3 or more colors, you can simply add the color code you want. For example as below.

<style>#header-container, #header-content, .headIn, .navIn{background:
linear-gradient(-90deg, #f8de7e, #7ec4cf, #ff99bb 100%);</style>

Change the color of the Footer, Sidebar & other parts of the template.

If you want to change the color of the footer or sidebar or any part you want to give color to your blog, it's very easy. You just need to add the footer or sidebar code. For example by adding the code #footer, #footer-widget, #footer-container.

<style>#header-container, .headIn, .navIn, #footer, #footer-widget, #footer-container{background:
linear-gradient(-90deg, #7ec4cf, #ff99bb 100%);</style>

Using the method of changing header & footer colors on a blog is just an easy method, but you have to know your template code. Because in general, every template creation sometimes has a different code, so the code in the header or footer must also be adjusted to your own template code. But indeed most of them only use #header code or #header-container only. likewise with footers.

CSS Not working

There are several types of templates that do not work using the CSS code above. That's because the template code is different from other templates. If so, you can use the CSS gradient below.

#header-content, #header-container, .headIn, .navIn, #footer-content, .navmenu, #navmenu-wrap-sticky, .iconsearch-label, #footer-outer, #navmenu-wrap, #header-wrap, .menu-sticky, .label-size, #goTop, .profile-link, .popular-posts-wrap, .FollowByEmail, #navmenu-sidebar-closebtn{background: linear-gradient(-90deg, #ff0000, #260062 74%);}

Replace all #header-content, #header-container, .headIn, .navIn, #footer-content, .navmenu, #navmenu-wrap-sticky, .iconsearch-label, #footer-outer, #navmenu-wrap, #header-wrap, .menu-sticky, .label-size, #goTop, .profile-link, .popular-posts-wrap, .FollowByEmail, #navmenu-sidebar-closebtn code with your template code. But if it's already working properly, you don't need to change it. But if you want to color only certain parts, remove some of the code and use it according to your taste.

Change the Color of the Blog Header & Footer To Animated Gradient (Gradation)

If you want it to be more interesting, you can use the gradient animation method. So, the color will change automatically every 10 seconds. If you want to use this method, read the article below because I have written it separately.