Home / Template Customization / How To Customize Your Blog Header with CSS

How To Customize Your Blog Header with CSS

Posted by Unknown Sabtu, 21 Desember 2013 0 komentar

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 paste it there.
Click on apply to blog on the top.
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.

If you have problems while doing the tutorial ask us we are ready to help you.
Recommended:

TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul: How To Customize Your Blog Header with CSS
Ditulis oleh Unknown
Rating Blog 5 dari 5

Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip, baik itu sebagian atau keseluruhan dari isi artikel ini harap menyertakan link dofollow ke https://topandroidnexus7.blogspot.com/2013/12/how-to-customize-your-blog-header-with.html. Terima kasih sudah singgah membaca artikel ini.