Cara Membuat Subscribe Box Dengan CSS - Email Subscribe atau Berlangganan Email adalah sebuah layanan yang berfungsi untuk mengirimkan update artikel secara otomatis langsung ke email pengunjung, jadi nantinya pengunjung yang sudah mendaftar dan mengkonfirmasi langgananya, mereka akan langsung mendapatkan update yang terkirim secara otomatis ketika ada artikel terbaru di blog kita, jadi kita tidak perlu melakukanya secara manual, selain itu, tidak ada batas kuota langgananya, dan gratis tentunya!
Apa peranan email subscribe ini dalam meningkatkan trafik blog? Ya, layanan berlangganan via email ini dapat memberitahu para pengunjung terdaftar bahwa sudah ada artikel terbaru yang dapat mereka simak di blog kita, selain itu, email subscribe ini juga dapat mengingatkan jika suatu saat ada para pengunjung yang sudah lama tak berkunjung dan lupa akan blog kita. Memang untuk mendapatkan pelangganya tidaklah mudah, tapi setidaknya kita bisa mencoba terlebih dahulu dengan memasang widget ini, oleh karena itu, bangunlah konten yang bermanfaat, agar para pengunjung tertarik untuk berlangganan.
Berlangganan Email sering juga disebut sebagai newsletter, layanan ini merupakan salah satu teknik yang biasa dilakukan oleh blogger dalam mendongkrak kunjungan ke blog mereka, karena dengan memanfaatkan fungsi newsletter ini, itu artinya kita sudah masuk ke dalam bagian email marketer, yakni orang-orang yang menggunakan email sebagai sarana promosi (bukan spam). Untuk memaksimalkan sektor email marketing ini, terlebih dahulu anda harus mendaftarkan blog anda di feedburner, tentunya untuk menggunakan layanan gratis ini.
berikut LANGKAH LANGKAHNYA
- Login ke Blogger
- pilih menu "Tata Letak"
- Pilih "Tambahkan Gadget" >> "HTML/JavaScript", dan Paste-kan kode berikut :
<div class="widget-content">
<div id="subscribe-css">
<div class="subscribe-wrapper">
Ikuti Blog ini dengan memasukan Email Anda dibawah ini! Terima Kasih<br />
<div class="subscribe-form">
<form action="http://feedburner.google.com/fb/a/mailverify?uri=KenamaBlog" class="subscribe-form" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=KenamaBlog', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input name="uri" type="hidden" value="KenamaBlog" /><input name="loc" type="hidden" value="en_US" /><input autocomplete="off" class="subscribe-css-email-field" name="email" placeholder="Enter your email address " /><input class="subscribe-css-button" title="" type="submit" value="SUBSCRIBE NOW !" /></form>
</div>
</div>
</div>
</div>
Ganti
KenamaBlog Dengan ID Feedburner Sobat
4. Klik Simpan
5.
Masuk ke Template > Edit HTML. Cari kode ]]></b:skin> atau </style>, agar lebih cepat, gunakan fasilitas Find ( CTRL+F 
lalu pastekan script dibawah ini tepat diatas kode ]]></b:skin> atau </style>.
.subscribe-wrapper { color : #fff; background: none repeat scroll 0% 0% #FF6C60; font-family: "Oswald",Tahoma,Sans-serif; line-height : 20px; padding : 1px 20px 10px; text-align : center; } .subscribe-form { background : #FF6C60; 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/AVvXsEjunk7BR-_ysGvbtPmDBLCqqN6WHKj5Dc8TT2ztMQU1N0WEYanvlF-MTT-DWk-OUH4qxxI5Weik84rfL08e15Y1ipWwDsjwvdQhEkQjKEk_ZXlG5bHqLJz4iYUhuFf_0L-J64P6l7F8geTZ/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: none repeat scroll 0% 0% rgba(0, 0, 0, 0.1); color : #fff; cursor : pointer; font-weight : 700; padding : 7px; 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: none repeat scroll 0% 0% rgba(0, 0, 0, 0.2); }
6. Simpan template Dan lihat hasilnya
