 |
| Cara Membuat Subscribe Bergaya Dengan HTML di Blog |
Berikut Cara Membuat Subscribe Bergaya Dengan HTML di Blog
Ketika Anda memberikan informasi yang berguna di blog Anda, maka berkali-kali beberapa pembaca akan perlu untuk mendapatkan update terbaru dari blog Anda. Untuk itu, Anda memerlukan Formulir.
Berlangganan Email di blog Anda, sehingga pengunjung yang tertarik dapat dengan mudah mendapatkan update terbaru.
Terkait : Cara Memasang RSS Feed Blogger di Feedburner (LINKNYA DI ARTIKEL 9)
Untuk Menambahkan Email atau Umpan Formulir Berlangganan ke Blog Anda Sangat Mudah.
Adapun Langkah-langkahnya Sebagai Berikut :
1. Login ke Blogger, kemudian pergi ke Layout klik "
Tambah Gadget" link:
2. Dari jendela pop-up, gulir ke bawah dan klik pada "
HTML / JavaScript" gadget:
3. Paste kode berikut dalam kotak kosong:
Klik Untuk Melihat Code
<style>
.hl-email{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5KrI3MjRrA6xl9wlllVUwPjzjp2kE4MI8d_8OQI5d5mJ20CneTrPhDwbW5iuPrqCaPXtXMhXAsxXqo_eulrKlYB_nIdRBr-t5b0pc0U82GpJ3jNBxCF5_3t9XjLt-zZ97NCWZ8-uUSb8/s1600/mail.png) no-repeat 0px 12px ;
width:300px;
padding:10px 0 0 55px;
float:left;
font-size:1.4em;
font-weight:bold;
margin:0 0 10px 0;
color:#686B6C;
}
.hl-emailsubmit{
background:#9B9895;
cursor:pointer;
color:#fff;
border:none;
padding:3px;
text-shadow:0 -1px 1px rgba(0,0,0,0.25);
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
font:12px sans-serif;
}
.hl-emailsubmit:hover{
background:#E98313;
}
.textarea{
padding:2px;
margin:6px 2px 6px 2px;
background:#f9f9f9;
border:1px solid #ccc;
resize:none;
box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1);
-moz-box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1);
-webkit-box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1); font-size:13px;
width:130px;
color:#666;}
</style>
<div class="hl-email">
Subscribe via Email <form action="http://feedburner.google.com/fb/a/mailverify" id="feedform" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=helplogger', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input gtbfieldid="3" class="textarea" name="email" onblur="if (this.value == "") {this.value = "Enter email address here";}" onfocus="if (this.value == "Enter email address here") {this.value = "";}" value="Enter email address here" type="text" />
<input type="hidden" value="helplogger" name="uri"/><input type="hidden" name="loc" value="en_US"/>
<input class="hl-emailsubmit" value="Submit" type="submit" />
</form>
</div>
Penyesuaian :
- Ganti alamat url hijau untuk mengubah icon email
- Untuk mengubah lebar atau text area, menaikkan / menurunkan nilai
130px merah
- Ganti
https://feedburner.google.com/fb/a/mailverify?uri=BantuanBlog dengan link Email Feed Feedburner Anda. Anda bisa mendapatkannya dengan mengunjungi akun feedburner Anda kemudian arahkan ke "
Publikasikan" dan kemudian "
Langganan Email".
- Ganti BantuanBlog dengan judul feed Anda. Tampaknya pada akhir link feed Anda. Dalam kasus saya itu adalah
https://feedburner.google.com/fb/a/mailverify?uri=BantuanBlog
4. Sekarang Simpan widget dan periksa blog Anda.
Itu dia !
Jangan lupa saya tunggu anda dikomentar :)
EmoticonEmoticon