Membuat Subscribe Blog Valid HTML5 & CSS3

Subscribe blog atau Berlangganan blog adalah Berlangganan artikel terbaru dari suatu blog kepada email yang di daftarkan atau lebih simpelnya pengunjung dapat melihat artikel yang di update langsung di kirim ke email si pengunjung yang berlangganan via email blog. Bagi suatu blog subscribe via email sangatlah penting karena bisa menambah visitor atau pengunjung blog dan secara otomatis meningkatkan traffic blog tersebut.
Pertanyaannya, bagaimana membuat Subscribe via Email , disini saya akan berbagi cara membuat subscribe blog yang sudah valid HTML5 dan juga valid CSS3. Widget ini saya dapat dari blognya Bung Frangky. Bagi anda yang ingin memasang widget ini di blog kalian, tahap pertama kalian harus terlebih dahulu daftar di FEEDBURNER (Gratis). Jika anda sudah daftar atau sudah mempunyai alamat feedburner silahkan simak tahapan selanjutnya untuk membuat widget subscribe blog valid html5 dan valid css.

Screenshot Subscribe via Email

Ikuti langkah-langkah berikut untuk memasang widget subscribe blog:

Langkah 1 : Copy kode CSS di bawah ini dan letakkan di atas ]]></b:skin> atau </style>

 /* Subscribe By Email */

#subscribe-css{padding:3px 0;background:#f26f65}
.subscribe-wrapper{color:#fff;font-size:14px;line-height:20px;padding:1px
 20px 10px;text-align:center;text-transform:none;font-weight:500}
.subscribe-form{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:#eee 
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3AmdhoOqh3slnCWhRYYUcBUhynO50vI1oVG_vne0U7h5DQzfkGfXuFzxV3rZ7n_ijIo68jSfQrpx6kZXvm9zRXnkVAIltgO4DC5UQfVaLxeZPBmW8RcJZu9nLCiixwK5dTE7GkLAnJYaN/s1600/sprites.png)
 no-repeat 1px -27px;color:#444;margin:0 0 15px;padding:12px 
40px;width:100%;border:none}
.subscribe-css-email-button{background:#febdaf;color:#fff;cursor:pointer;font-weight:700;padding:10px;text-transform:none;width:100%;border:none;font-size:16px}
.subscribe-css-email-button:hover{transition:all .3s ease-in;background:#d12300;border:none}

Langkah 2 : Masuk ke Tata letak >> Tambahkan Gadget >> HTML/JavaScript. Lalu copy kode di bawah ini dan paste ke HTML/JavaScript.

 <div id="subscribe-css">

<div class="subscribe-wrapper">
<p>

Dengan memasukkan email pada kolom di bawah ini, anda akan mendapatkan update artikel dari <b>BloggersOne</b> secara gratis.</p>

<div class="subscribe-form">
<form action="http://feedburner.google.com/fb/a/mailverify?uri=BloggersOne" class="subscribe-form" method="post" onsubmit="window.open
('http://feedburner.google.com/fb/a/mailverify?uri=BloggersOne', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input name="uri" type="hidden" value="BloggersOne"
 /><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-email-button" title="" type="submit" 
value="Subscribe Now !" /></form>
</div>
</div>
</div> 

Perhatian:
→ Ganti tulisan yang berwarna biru dengan nama blog anda.
→ Ganti kode yang berwarna merah dengan ID Feedburner anda.

Selesai.

Terima kasih telah membaca dan mengunjungi bloggersOne. Semoga artikel yang saya bagikan bisa bermanfaat bagi kalian semua.

Source: http://www.bungfrangki.com/2014/01/membuat-widget-berlangganan-email-valid-css3.html

Share on: