Cara Modifikasi Email Subscribe Form

Cara Modifikasi Email Subscribe Form - Setelah dipostingan sebelumnya gang tutorial mengulas Pengertian Permalink Blog yang sempat ditanyakan oleh komentator blog ini, maka sekarang akan mengulas pertanyaan dari salah satu anggota dari blogger madura. Apa gerangan pertanyaannya? "untuk modifikasi email berlanggan gimana?". Jika sobat merasa kebingungan cara membuatnya, silahkan baca cara membuat berlangganan lewat email. OK. biar tidak banyak cinclong cara edit atau modifikasi form berlangganan email, silahkan ikuti langkahnya.

Untuk screenshot hasil memodifikasi email subscribe form, akan menghasilkan seperti dibawah ini :

Form berlangganan email tersebut nanti bisa sobat modif dengan mengganti gambar, teks, dan tata letaknya sesuai keinginan. Ok mari kita mulai...

Peralatan modifikasi email subscribe form

1.Gambar latar belakang dan icon RSS yang berukuran 16x16 pixel. Jika belum punya sobat bisa nanya ke si mbah google atau gunakan saja icon pack yang sudah disiapkan dibawah ini untuk download icon pack-nya.

Fresh, Free and Gorgeous RSS/Feed Icons

Free web 2.0 RSS icons

15 Free RSS Icons

Setelah mendownload icon gambar yang di inginkan. Upload icon tersebut ke situs image hosting yang sering sobat gunakan. Saya sendiri menguploadnya di Picasa web album. Setelah itu, copy url gambarnya. Contoh : https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLZxa_ic9VFsK1XFGfWY041nylTC2MRyT2zzlvV6wteD9tngFH1z6UBxlzxHywFJlV3-bTGR8Hi_AH5g9XCRtPGhQ6YHlDfZdkCcZsRIRtPTEcTrKaEYh2o82BRFmyx2SOq1Zhkt4TdFQa/

2. Id feedburner sobat. Contoh, http://feeds.feedburner.com/idsobat. Tulisan yang dicetak tebal itulah id feedburner sobat.

Bagaimana cara mengetahui id feedburner saya?

Caranya sangat mudah, login ke akun feedburner sobat kemudian arahkan kursor mouse sobat pada logo subscribe feed yang terletak disamping judul feed seperti pada gambar dibawah. Kemudian perhatikan url dipojok kiri bawah. Tulisan yang berada dipaling belakang itulah id feedburner sobat.

3. Aktivasi feed count
Feed count adalah sebuah widget mungil yang menampilkan jumlah subscriber atau feed reader sobat dalam bentuk angka. Untuk dapat menikmati fitur feed count ini sobat harus mengaktifkannya terlebih dahulu. Caranya, buka id feedburner sobat lalu pilh tab Publicize. Pada bagian Service pilih Feed count, kemudian klik tombolActive. Selesai.

Setelah menyiapkan bahan-bahan yang diperlukan. Selanjutnya pasang kode form tersebut di blog sobat.

Langkah-langkah Modifikasi Email Subscribe Form:

1. Buka Blogger. Masuk ke menu Design -> Page Elements
2. Klik Add a Gadget lalu pilih HTML/Javascript
3. Copy kode dibawah kedalam kotak

<style>
.form {
border:1px solid #ccc; /* warna garis pinggir form */ 
background: #ffffff; /* warna background form */ 
padding:3px; /* spasi form */ 
width:380px; /* panjang form */ 
height:180px; /* tinggi form */ 
}

.rss {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLZxa_ic9VFsK1XFGfWY041nylTC2MRyT2zzlvV6wteD9tngFH1z6UBxlzxHywFJlV3-bTGR8Hi_AH5g9XCRtPGhQ6YHlDfZdkCcZsRIRtPTEcTrKaEYh2o82BRFmyx2SOq1Zhkt4TdFQa/") no-repeat top right; /* silahkan ganti denan gambar dan posisinya kesukaan sobat */ 
}

.button {
background: #006699; /* warna tombol subscribe */ 
color: #FFFFFF; /* warna font subscribe */ 
font-size: 11px; /* ukuran font subscribe */ 
font-family: Arial, Tahoma, Verdana; /* font subscribe */ 
margin-left: 5px; /* margin kiri tombol subscribe */ 
border: 1px solid #234B69; /* warna garis pinggir tombol subscribe */ 
padding:3px 5px 3px 5px; /* jarak antara font dengan garis pinggir tombol subscribe */ 
font-weight: bold;
}
</style>

<div class="form">
<div class="rss">
<div style="font-weight:bold; color:#333333; font-size:15px; padding:10px 5px 5px 10px;"><a href="http://feeds.feedburner.com/gangtutorial"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-tQ8Vg7fYlMlPRFXUf_PCH4CNpFIVH_p4JMpbOO4Sh15vuP1f__h6HSzZlYMq3FiWXh6ShgfyHC1xFyyT_wcFS2JJ8LFhwFBE1K-B3klpnUWaScVb0u4rEJeXZ91NtnIvLbgOsks0Qgst/s800/005.png" /></a> <a href="http://feeds.feedburner.com/gangtutorial">GET UPDATE VIA RSS</a></div>

<div style="font-weight:bold; padding:10px 10px;">GET UPDATE VIA EMAIL</div>

<div style="padding-left:10px">Dapatkan kiriman artikel terbaru langsung ke email sobat!</div>

<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=gangtutorial', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><div style="padding-left:10px; padding-bottom:10px; padding-top:10px"><input type="text" style="width:160px; height:18px" name="email" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Ketik email sobat disini...&quot;;}" onfocus="if (this.value == &quot;Ketik email sobat disini...&quot;) {this.value = &quot;&quot;}" type="text" value="Ketik email sobat disini..." /> <input type="hidden" value="gangtutorial" name="uri" /><input type="hidden" name="loc" value="en_US" /><input class="button" type="submit" value="SUBCRIBE" /></div></form>

<div style="padding-left:10px"><a href="http://feeds.feedburner.com/gangtutorial"><img src="http://feeds.feedburner.com/~fc/gangtutorial?bg=ff7c00&amp;fg=444444&amp;anim=0" width="88" height="26" style="border:0" alt="" /></a></div>
</div></div>

Keterangan :
gangtutorial : Ganti dengan id milik sobat

Kata Dapatkan : kalimat dalam form. Ganti jika sobat ingin menggunakan kata-kata lain
Subscribe : nama tombol
ff7c00 : warna feed counter

4. Jika sudah, klik Save. Selesai

OK, rasanya sudah sedikit capek, akhiri dulu  Cara Modifikasi Email Subscribe Form. Semoga bermanfaat dan selamat mencoba