Membuat Widget Subscribe Via Email Valid HTML5

Pada kesempatan kali ini saya akan membantu Anda untuk membuat widget subscribe via email yang valid HTML5, lalu buat sih vallid HTML5?, menurut saya fungsi valid HTML5 ini adalah untuk meminimalkan kesalahan pada tool validasi.w3.org dan Chkme.com

Membuat Widget Subscribe Via Email ini sangat sederhana sekali, silahkan ikuti tutorial di bawah ini:

1. Login akun blogger.com Anda
2. Klik Tatak Letak  Add Gadget lalu pilih HTML/JavaScript masukkan kode di bawah ini;

<div id="subscribe-css">
<div class="subscribe-wrapper">
<p>
Ikuti Blog ini dengan memasukan Email Anda dibawah ini! Terima Kasih</p>
<div class="subscribe-form">
<form action="http://feedburner.google.com/fb/a/mailverify?uri=BlogAlvinWarasi" class="subscribe-form" method="post" onsubmit="window.open
('http://feedburner.google.com/fb/a/mailverify?uri=BlogAlvinWarasi', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input name="uri" type="hidden" value="BlogAlvinWarasi" /><input name="loc" type="hidden" value="en_US" /><input class="subscribe-css-email-field" name="email" autocomplete="off" placeholder="Enter your email address "/><input class="subscribe-css-button" title="" type="submit" value="Subscribe Now !" /></form>
</div>
</div>
</div>

Ganti tulisan yang warna merah dengan akun feedburner blog Anda lalu save.

3. Langkah selanjutnya tinggal diberi sentuhan CSS biar menarik dan enak dipandang oleh para pengunjung blog Anda. Caranya klik Template  Edit HTML cari kode ]]></b:skin> letakkan kode di bawah ini tepat di atas kode ]]></b:skin>.

#subscribe-css { 
border-radius: 4px; 
padding : 1px; 
background :#1abc9c;
} 
.subscribe-wrapper { 
color : #fff; 
background : #1abc9c; 
font : 13px; 
font-family : 'Oswald', Tahoma, Sans-serif; 
line-height : 20px; 
padding : 1px 20px 10px; 
text-align : center; border-radius : 3px;
} 
.subscribe-form { 
background : #1abc9c; 
clear : both; display : block; 
margin : 10px 0; 
overflow : hidden;
}
form.subscribe-form {
clear : both; 
display : block; 
margin : 10px 0 0; 
width : auto; 
overflow : hidden;
}
.subscribe-css-email-field {
background : url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEmpDkb6USngT8FmT7CYUCHb8RCPb7YE7YJzie-J_WqCU0iJMxZkhhK8Im4uuYOGxVVGMqIG6eE2WZRxCSnxK_qIP5oPLslcWsYQTTvjNnUntUhUUPxsWfKCAYfWUglpeqGDHCuWhoFdaV/s1600/sprites.png) 1px -27px no-repeat #eee; 
color : #444; 
margin : 0 0 15px; 
padding : 12px 40px; 
width : 100%; 
border : none; 
} 
.subscribe-css-button { 
background : #16a085; 
color : #fff; 
cursor : pointer; 
font-weight : 700; 
padding : 10px; 
text-transform : none; 
width : 100%; 
border : none; 
font-size : 16px; 
transition : all 0.3s ease-in; 
} 
.subscribe-css-button:hover { 
transition : all 0.3s ease-in; 
background : rgba(0, 0, 0,0.2);
}

Dan sebelum Anda Save hapus terlebih dahulu kode <b:include name='quickedit'/> baru save, dan lihat hasilnya....pasti keren...hehehe..

Untuk demonya bisa Anda lihat Subscribe Via Email di blog ini, selamat mencoba semoga membantu artikel yang saya share ini :)

Advertise

Contact Me

300x250

Advertise

Contact Me

300x250