Membuat Subscribe Via Email Valid CSS3 dan HTML5

Membuat Subscribe Via Email Valid CSS3 dan HTML5 – Subsribe via email atau yang lebih dikenal dengan berlangganan via email adalah salah satu widget yang berfungsi untuk mengirimkan update artikel ke email (pelanggan yang telah terdaftar) secara otomatis. Keuntungan yang diperoleh oleh pengunjung yang telah mendaftarkan email validnya ke kolom subscribe ialah, pelanggan/pengunjung tidak perlu mondar-mandir blogwalking ke daftar blog/website yang ingin dikunjunginya jika hanya untuk melihat update artikel dari blog tersebut. Cukup membuka email yang telah didaftarkan dan lihat update artikel disitu.

Bagi blogger sendiri, widget berlanggan via email ini dimaksudkan untuk menambah jumlah pengunjung ke blognya. Namun sebelum menggunakan widget ini, yang harus dilakukan terlebih dahulu ialah mendaftarkan blog ke feedburner (gratis).

Selain itu, widget ini juga mampu meningkatkan trafik suatu blog. Pengunjung mungkin tidak akan selalu mengingat blog kita, tetapi dengan memasang widget subscribe via email ini setidaknya bagi mereka yang telah mendaftarkan emailnya akan mendapatkan pemberitahuan lewat email bahwa blog kita terdapat artikel baru untuk disimak. Dengan demikian, kita telah mendapatkan pelanggan tetap dan bisa saja pelanggan tersebut akan mempromosikan blog kita lewat artike-artikel bermutu yang disajikan.

Bagi yang berminat, silahkan ikuti langkah-langkah Membuat Subscribe/Berlangganan Via Email berikut.
Langkah 1 : Copy kode 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/AVvXsEgwgjW4X6ScPEqKO-ZHvqjjuOMp6nZTdMK2q696AH6M35SzGaSobn5Mzx5f23IR6cwKMSZefpkdyMnX4fP81N4VvP8scMfQXNB2bPn03Qe9-wFwEz3DB7y1GOGkIUxZaqa2IifJUOOy8n4m/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 <i>bungfrangki.com</i> secara gratis.</p>
<div class="subscribe-form">
<form action="http://feedburner.google.com/fb/a/mailverify?uri=bungfrangkicom" class="subscribe-form" method="post" onsubmit="window.open
('http://feedburner.google.com/fb/a/mailverify?uri=bungfrangkicom', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input name="uri" type="hidden" value="bungfrangkicom" /><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.

Langkah 3 : Save Template

Sekian artikel ini, semoga berhasil.