Flat UI Style Subscribe Widget For Blogger

6/17/2013 CSS , Flat UI , Widgets 0 Comments

Hi guys! We always used to share metro style widgets but this time we have a flat ui widget this means now we have a new label which will be for Flat UI widgets.

Install It Into Blogger

<div class='login-icon'>
<img alt='Welcome to Mail App' src='https://googledrive.com/host/0Bz2zRMjP8YuqaVJhb0k5RkRDMms'/>
</div>
<div class='login-form'>
<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&#39;http://feedburner.google.com/fb/a/mailverify?uri=bloggeraxe&#39;, &#39;popupwindow&#39;, &#39;scrollbars=yes,width=550,height=520&#39;);return true' target='popupwindow'>
<input class='letter_email' name='email' placeholder='Email address' type='text'/>
<input class='buttonsubs' name='submit' type='submit' value='Subscribe'/>
<input name='uri' type='hidden' value='bloggeraxe'/>
<input name='loc' type='hidden' value='en_US'/>
</form>
</div>
  <style>
    .lefthome a:hover{
background:#d57059;
}
.buttonsubs{
margin-top:10px;
font-size:12px;
line-height: 1em;
padding: 1em;
outline: none;
font-weight: bold;
background-color: #F4836A;
border: none;
border-radius: 2px;
color: #fff !important;
cursor: pointer;
display: inline-block;
text-decoration: none;
text-shadow: 0px 1px 1px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 1px 1px rgba(0,0,0,0.2);
-webkit-box-shadow: 0px 1px 1px rgba(0,0,0,0.2);
box-shadow: 0px 1px 1px rgba(0,0,0,0.2);
}
.buttonsubs:hover{
background:#d57059;
}
.subscribemac {
background: url("https://googledrive.com/host/0Bz2zRMjP8YuqNWhIdktOZkZTb2s") 0 0 no-repeat;
background-size: 500px 414px;
color: white;
width:500px;
height:414px;
padding-top:20px
}
.login-form {
background-color: #eceff1;
border-radius: 6px;
padding: 10px;
position: relative;
width:280px;
left:120px;
}
.login-form:before {
content: "";
border-style: solid;
border-width: 12px 12px 12px 0;
border-color: transparent #eceff1 transparent transparent;
height: 0px;
position: absolute;
left: -12px;
top: 40px;
width: 0;
-webkit-transform: rotate(360deg);
}
.login-icon {
position: relative;
width: 96px;
left:10px;
top:80px;
}
.login-icon img{
width:30px;
}
textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input {
border: 2px solid #dce4ec;
color: #34495e;
font-family: "Lato", sans-serif;
font-size: 14px;
padding: 8px 0 9px 10px;
text-indent: 1px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 3px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
width:250px;
}
textarea:focus, input[type="text"]:focus, input[type="password"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="date"]:focus, input[type="month"]:focus, input[type="time"]:focus, input[type="week"]:focus, input[type="number"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="color"]:focus, .uneditable-input:focus {
border-color: #1abc9c;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
<style/>

7. Click Save

And DoNe.