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 :)
Blogger
Google+
Facebook
Twitter