6/12/14 Simple Flat UI Subscribe Email | SAMSURY SITES

samsury-sites.blogspot.com/2014/06/simple-flat-ui-subscribe-email.html 1/3

SAMSURY SITES Tutorial Blog

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 serta konsep warna Flat yang lagi ngetren saat ini.

DEMO

VIEW CODE

Komponen dasarnya :

CSS

HOME BUTTON CSS3 FLAT UI METRO UI STYLE Simple Flat UI Subscribe Email

6/12/14 Simple Flat UI Subscribe Email | SAMSURY SITES

samsury-sites.blogspot.com/2014/06/simple-flat-ui-subscribe-email.html 2/3

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;

}

HTML

<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

Older Post

6/12/14 Simple Flat UI Subscribe Email | SAMSURY SITES

samsury-sites.blogspot.com/2014/06/simple-flat-ui-subscribe-email.html 3/3

Sign out

Notify me

Enter your comment...

Comment as: Virlyz Nyzam (Google)

Publish

Preview

BY SAMSURY SITES