Membuat Form Berlangganan Artikel Via E-mail

Membuat Form Berlangganan Artikel Via E-mail

Kalian pasti sudah tahu apa itu form berlangganan artikel via Email atau biasa disebut juga Form Email Subscribe, ya form berlangganan artikel via Email biasanya menjadi salah satu cara untuk mempromosikan web/blog, dengan memasang nantinya bisa mempermudah pengunjung blog kita untuk mendapatkan pemberitahuan melalui email saat kita mempsting tulisan terbaru di blog kita.

Untuk membuat form berlangganan artikel via Email ini sebenarnya sangatlah mudah, kalian cukup masuk ke akun blogger, lalu masuk pada bagian layout / tata letak, lanjutkan ke tambahkan gadget, lalu pilih Ikuti lewat Email namun hasilnya biasa dan cenderng kurang menarik, maka dari itu agar tampilannya lebih menarik lagi saya akan bagikan cara mengkostumnya.

1. Setalah masuk ke blogger sialahkan edit Tema.
2. Masukkan kode di bawah ini di atas kode ]]></b:skin
#subscribe-css { 
border-radius: 4px; 
padding : 1px; 
background :#01a7de;
} 
.subscribe-wrapper { 
color : #fff; 
background : #01a7de; 
font : 13px; 
font-family : 'Oswald', Tahoma, Sans-serif; 
line-height : 20px; 
padding : 1px 20px 10px; 
text-align : center; border-radius : 3px;
} 
.subscribe-form { 
background : #01a7de; 
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(http://1.bp.blogspot.com/-JMYdQsIa9WQ/UDZqxqqrTEI/AAAAAAAAFho/AocEv70U8K8/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 : #ff0000; 
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);
}
3. Lalu klik  Save Tema, kemudian masuk pada bagian Tata Letak.
4. Tambahkan Gatget, pilih HTML/JavaScript
5. Lalu masukkan kode berikut.

<center><div id="subscribe-css"><div class="subscribe-wrapper"><strong><p>Subscribe to Our News Letters</p></strong><div class="subscribe-form"><form action="http://feedburner.google.com/fb/a/mailverify?uri=Inisial-BT" class="subscribe-form" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=Inisial-BT', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow"><input name="uri" type="hidden" value="Inisial-BT" /><input name="loc" type="hidden" value="en_US" /><input class="subscribe-css-email-field" name="email" autocomplete="off" placeholder="Enter Your E-mail Address "/><input class="subscribe-css-button" title="" type="submit" value="Subscribe Now !" /></form></div></div></div></center>

6. Ganti Inisial-BT dengan URL feedburner milik kalian, jika belum punya silahkan mendaftar terlebih dahulu.
7. Klik simpan maka hasilnya akan seperti dibawah ini.


Ok baiklah, itu saja dulu yang bisa saya bagikan pada kesempatan postingan ini, selamat mencoba dan semoga bermanfaat.

BACA JUGA POSTINGAN LAINNYA:


KOMENTAR DAN POSTINGAN LAINNYA