How To Customize Your Blog Header with CSS
Customize Your Blog Header with CSS:- Header is the Top Part of Blogger Template,it is the Part which represent Blog Logo,description and title etc.Actually this part bring beauty to your Blog Template,making it awesome and stunning can add 5 star to your Blog Beauty,So time to Customize this Par.Here we have a trick,i.e using CSS we can change its style.When One Hover mouse it will Expand and will bubble up.Let's see How to Do this.
How To Customize Your Blog Header with CSS
- Go To Blogger Dashboard
- Click On Template
- Then Click On Customize
- There Click On Advance
- and Now Click On Add CSS
- There Copy the Below Script and throw it there THen Click On Apply To Blog
- That's it!
.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);}
Customization:- If you want to change the Color of Border and Expanding Border change the Above mentioned red colors with your Desired Color Code.
