Cara Membuat Widget Berlangganan via Email Valid HTML5

Berlangganan via email atau bisa juga disebut subscribe 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 emailnya ke kolom subscribe ialah pelanggan tidak perlu repot-repot mengecek 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 langsung dari email. 

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), tutorialnya bisa anda cari Google.

Selain itu, widget ini juga mampu meningkatkan trafik suatu blog. Pengunjung mungkin tidak akan selalu mengingat nama/url 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 disimaknya. Dengan demikian, kita telah mendapatkan pelanggan tetap dan bisa saja pelanggan tersebut akan mempromosikan blog kita lewat artike-artikel bermutu yang telah kita sajikan.

Silahkan ikuti 3 langkah Membuat Widget Berlangganan Via Email berikut ini.

Langkah 1 :

Salin 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/AVvXsEg5CZ_1deyxiDFarSSwF0T4zCa3dYStq2zN-REaOYQBSt1UHooGWXaNrQHQeKnV8VXUG0DnEu7XS5stCynsHfDzXS2__dHBxEhYONUdnhYOPSoqW1L7XLgKj3-P2t2Nw1S8j2pBYp5FTE8p/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}

 Note :

Untuk Warna Background ataupun Ukuran Font silahkan Sesuaikan Sendiri Sesuai Selera Masing-Masing.

Langkah 2 :

Masuk ke Tata letak >> Tambahkan Gadget >> HTML/JavaScript. Lalu Salin kode di bawah ini dan tempel ke HTML/JavaScript tadi.

<div id="subscribe-css">
<div class="subscribe-wrapper">
<p>Dapatkan Artikel Terbaru dan Terhangat dari <b>CaraLagi.Blogspot.Com</b> Melalui Email Anda secara Gratis!</p>
<div class="subscribe-form">
<form action="http://feedburner.google.com/fb/a/mailverify?uri=caralagi" class="subscribe-form" method="post" onsubmit="window.open
('http://feedburner.google.com/fb/a/mailverify?uri=caralagi', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input name="uri" type="hidden" value="caralagi" /><input name="loc" type="hidden" value="en_US" /><input class="subscribe-css-email-field" name="email" autocomplete="off" placeholder="Masukkan Alamat Email Anda"/><input class="subscribe-css-email-button" title="Berlangganan Sekarang Juga" type="submit" value="Berlangganan !" /></form>
</div>
</div>
</div>

Note :

• Ganti tulisan yang berwarna Biru dengan Nama/URL blog anda.
• Ganti kode yang berwarna Merah dengan ID Feedburner blog anda. 

Langkah 3 :

Save Template.

Tutorial Membuat Widget Berlangganan Via Email telah Selesai, Kemudian bisa Anda Lihat Hasilnya. Dan untuk Demo dari Widget ini Sendiri Bisa Anda Lihat Langsung di Sidebar Blog CaraLagi ini. Semoga Bermanfaat!

(Sumber : bungfrangki.com)

Share on Google Plus

About Michael Vahlepi

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.