Thursday, June 12, 2014

Simple Flat UI Subscribe Email

simple flat ui subscribe email


Simple Flat UI Subscribe Email - Mungkin bisa dikatakan kelanjutan artikel sebelumnya tentang modifikasi contact form dengan gaya ui style dan tentunya masih menggunakan gaya flat ui yang di kombinasikan dengan menu ui awesome dan template flat ui portfolio design. Dan semuanya itu untuk membuat blog/web kita menjadi lebih indah dengan widget unik blogger serta konsep warna Flat yang lagi ngetren saat ini.


Komponen dasarnya :

     #vn-emailsubsocial {background:#34495e;
      width: 300px;
      height: 330px;
      border: 1px solid #ddd;
        border-radius: 5px 5px 0px 0px;
     }
     #vn-emailsubsocial .heading {
padding: 15px 25px;
line-height: 35px;
font-size: 26px;
font-weight: 600;
font-family: open sans;
color: #fff;
text-align: center;
background:#22313F;
     }
   #vn-emailsubsocial p {background:#34495e;
    font-family: open sans;
    font-size: 13px;
    color: #fff;
    line-height: 25px;
    padding: 10px 20px 0 20px;
    margin: 0;
   }
   #vn-emailsubsocial .emailsub {
    padding: 0px 20px 10px 20px;
   }
   #vn-emailsubsocial .emailsub input {
    color: rgb(170, 170, 170);
    padding: 10px;
    margin-top: 10px;
    font-size: 15px;
    font-family: open sans;
    width: 92%;
    border: 1px solid #ccc;
    border-bottom: 2px solid #ccc;
    border-radius: 5px;
    transition:border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
   }
   #vn-emailsubsocial .emailsub input:focus {
    border-color:#F4836A;
    outline: none;
    box-shadow: 0 0 2px 1px #F4836A;
   }
   #vn-emailsubsocial .emailsub .button {
    background: #F4836A;
    color: white!important;
    border:none;
    outline: none;
    border-bottom: 3px solid #B3614E;
    transition:background .4s linear;
    width: 90%;
    margin-right: 5%;
    margin-left: 5%;
    font-weight: 600;
    cursor:pointer;
   }
   #vn-emailsubsocial .emailsub .button:hover{
    background: #DD7761;
   }


<div id="vn-emailsubsocial">
<div class="heading">
Sign Up Here
              </div>
Isikan pesan yang ingin anda sampaikan disini<br />
<div class="emailsub">
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=SamsurySites', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input name="name" placeholder="Your Name" type="text" />
               <input name="email" placeholder="Your Email" type="text" />
               <input name="uri" type="hidden" value="BloggerYard" />
               <input name="loc" type="hidden" value="en_US" />
                        <input class="button" type="submit" value="Sign Up Now!" />
              </form>
</div>
</div>

Ganti tulisan SamsurySites dengan nama feed rss blog anda

Demikian sedikit tips blog ui style kali ini semoga bermanfaat, baca juga Simple Tooltip Dropdown Menu CSS3