Customize Your Blogger Header With Css

Hey friends today I am going to teach you how to customize your blog header with css,I am sure that this is only the tutorial which will help you because no one ever think to customize blog header but I think to make blogger header more attractive.

Demo 

This tutorial is divided into two part one is non hover and another is hover.

By Hover Part-If you will choose hover part then your blogger header will start moving when some mouse over it or in simple language you can call that it will make your blog header animated.

By Non-Hover Part-Nothing changes accept mouse over effect.If you will choose this then your blogger header will not get animation effect.but it will save your blog loading time.

Non-Hover
Lets make your blogger header look more beautiful for this you need to add following code in your blog css box.

#header {
width:1000px;
height:120px;
background-color: #FFFFFF;

/*First Stitch*/
 
   border: 2px dashed #FF0000;
   border-radius: 1px;

/*Second Stitch*/
   outline: 2px dashed #000000;
   outline-offset: -8px;

   -moz-border-radius 1px;
   -webkit-border-radius: 10px;
   -moz-box-shadow: 0 0 0 4px #282247, 2px 1px 4px 4px rgba(10,10,0,.5);
   -webkit-box-shadow: 0 0 0 4px #ff0030, 2px 1px 4px 4px rgba(10,10,0,.5);
   box-shadow: 0 0 0 0px #47403a, 2px 1px 6px 4px rgba(10,10,0,.5);
}

Hover

Add below code in your blog css to make your blog header hover effect.

.header:hover

{

color: white;

border: 1px solid gainsboro;

border: 1px solid rgba(0, 0, 0, 0.1);

text-transform:uppercase;

padding:10px;

width:60000px;

text-align:center;

text-shadow:10px 10px white;

font-size:180px;

cursor:pointer;

-webkit-transition:all 0.8s;

-ms-transition:all 0.8s;

-moz-transition:all 0.8s;

-o-transition:all 0.8s;

transition:all 0.8s;

height: 100%;

background-color: #6188F5;

background-repeat: repeat-x;

background-position: 8px 0px;

background-size: 400px 200px;

background-image: -webkit-linear-gradient(315deg,transparent,transparent 33%,rgba(0, 0, 0, 0.12) 33%,rgba(0, 0, 0, 0.12) 66%,transparent 66%,transparent);

background-image: -moz-linear-gradient(315deg,transparent,transparent 33%,rgba(0, 0, 0, 0.12) 33%,rgba(0, 0, 0, 0.12) 66%,transparent 66%,transparent);

background-image: -o-linear-gradient(315deg,transparent,transparent 33%,rgba(0, 0, 0, 0.12) 33%,rgba(0, 0, 0, 0.12) 66%,transparent 66%,transparent);

background-image: linear-gradient(315deg,transparent,transparent 33%,rgba(0, 0, 0, 0.12) 33%,rgba(0, 0, 0, 0.12) 66%,transparent 66%,transparent);

-webkit-animation: pb 0.8s linear 0 infinite;

-ms-animation: pb 0.8s linear 0 infinite;

-o-animation: pb 0.8s linear 0 infinite;

-moz-animation: pb 0.8s linear 0 infinite;

}

@-webkit-keyframes pb { 0% { background-position:8px 0px; } 100% { background-position:120px 0; } }

@-ms-keyframes pb { 0% { background-position:10px 0px; } 100% { background-position:-100px 0; } }

@-moz-keyframes pb { 0% { background-position:10px 0px; } 100% { background-position:-100px 0; } }

@-o-keyframes pb { 0% { background-position:10px 0px; } 100% { background-position:-100px 0; } }

#header {

width:1000px;

height:120px;

background-color: #FFFFFF;

/*First Stitch*/

   

   border: 2px dashed #FF0000;

   border-radius: 1px;

/*Second Stitch*/

   outline: 2px dashed #000000;

   outline-offset: -8px;

   -moz-border-radius 1px;

   -webkit-border-radius: 10px;

   -moz-box-shadow: 0 0 0 4px #282247, 2px 1px 4px 4px rgba(10,10,0,.5);

   -webkit-box-shadow: 0 0 0 4px #ff0030, 2px 1px 4px 4px rgba(10,10,0,.5);

   box-shadow: 0 0 0 0px #47403a, 2px 1px 6px 4px rgba(10,10,0,.5);

}

How to Add Css Code To Blogger-

1. Go to blogger dashboard.
2. Now click on template tab.
3. Click on customize button and there you will find Add css option paste the below css code there.

If you wan't to customize it then read below-

• If you want to customize header background color then Replace #FFFFFF  it with your favorite color code
• If you want to change first stitch color then replace #FF0000 it with your favorite color code
• If you want to customize second stitch color then replace #000000 it with your favorite color code

That's all now just save it and preview your website if you are facing any problem then feel free to comment below.