Global design subscribes box kali ini akan menampilkan image logo gmail didalam area input text. Kotak dan tombol dibuat murni menggunakan CSS diberi sentuhan atribut CSS3 b-)
Demo Simple Subscribes Box Full Gaya
Code CSS
Bagaimana sobat sabit sekalian, tertarik menanamkan kotak langganan via email tersebut ke dalam blog kalian! Sikat ramuan berikut.textemail {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjm3wXFOXP1cWYm2WWBQ4tpiX1dMUuPFarjAfNcpiGtGBegf1C0STasFbgEW8aQ0BkYL6OTOqOJOhfs9ebHGd_MopFs3_YNT3Pu8AZMYTPm8fMsyfbBmjZiROxqa-WwYLn0OUBwdAUQCxqG/s1600/gmail.png") no-repeat scroll 5px center transparent;
border: 1px solid #DDD;
border-radius: 5px;
color: #555;
font-weight: bold;
padding: 10px 5px 10px 35px;
font-style: italic;
width:235px;
box-shadow: 1px 1px 5px #CCC inset;
}
.button_ {
background-color:#f4f4f4;
border-radius: 5px;
border: 1px solid #DDD;
color: #555;
cursor: pointer;
font-weight: bold;
padding: 9px 10px;
text-decoration: none;
box-shadow: 0px 0px 5px #CCC inset;
}
Markup HTML
<form target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=beben-koben', 'popupwindow', 'scrollbars=no,width=540,height=530,top=0,left=0');return true" method="post" class="emailform" action="http://feedburner.google.com/fb/a/mailverify">
<input type="hidden" value="beben-koben" name="uri" />
<input type="text" placeholder="Enter your email..." name="email" class="textemail" />
<input type="submit" value="Subscribe" title="" class="button_" />
</form>
Gantikan tulisan warna Happy subscribes box \m/
Tidak ada komentar:
Posting Komentar