Tuesday, 20 November 2012

How to have a rounded corner header in new blogger?

phil collins | 11/20/2012 |
I have searched so many blog to have a rounded corner header in my new blogger blog but i found many complicated steps to do and all of them was for the old blogger version.after a long research i found a new css code which directly fits in the edit html section and you have a nice round corner header in just two steps.







now i am going to show you how to have rounded corner header in easy steps..

Step 1: go to your dashboard >Template>Edit Html

now press ctrl+f and search for 

.header-outer{

Step 2: Just below the

background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px;

paste this code: 


                                   _background-image: none;
                                   -webkit-border-radius: 20px;
                                    -moz-border-radius: 20px;
                                     border-radius: 20px;

here is the complete css - /* Header
----------------------------------------------- */
.header-outer {
  background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px;
  _background-image: none;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}

and i this will work for sure. dont forget to comment if this works for you.

1 comment:

  1. Excellent that worked, when you paste the code however the '}' isn't shown so make sure its there otherwise this code won't work as its not closed off. View http://www.mr-itsupport.com and see my blog and how it looks with this code.

    ReplyDelete