Metro Style Official Blogger Contact Form

7/01/2013 , , 0 Comments

Hi guys today i have an awesome CSS which will convert the blogger official contact  form to metro style as you can see on      ⇜ the image left side.
















Before starting this tutorial make sure that the Contact Form Widget Is Already Installed In Your Blog.

Install It Into Blogger

1. Log Into Blogger Dashboard
2. Navigate To Template
3. Click Edit HTML
4. Search for ]]></b:skin>
5. Above it paste the following css

/* Contact Form Container */
.contact-form-widget {
width: 250px;
max-width: 100%;
margin: 0 auto;
padding: 10px;
background: #5F8CB0;
color: #fff;
border: 1px solid #5F8CB0;
border-radius: 1px;
}
/* Fields and submit button */
.contact-form-name, .contact-form-email, .contact-form-email-message {
width: 100%;
max-width: 100%;
margin-bottom: 10px;
}
/* Submit button style */
.contact-form-button-submit {
height: 40px;
color: #5F8CB0;
background: url('http://img405.imageshack.us/img405/3646/na37.png') #fff 10px center no-repeat;
padding-left: 44px;
}
 You can change the colors very easily (If need help comment down)

6. Click Save Template

and DoNe.

Mack See

Some say he’s half man half fish, others say he’s more of a seventy/thirty split. Either way he’s a fishy bastard.

0 comments:

Subscribe to: Post Comments (Atom)