Modifikasi Form Feedburner

Kemarin saya telah menuliskan tutorial tentang modifikasi email subscriber.

Sama dengan form feedburner. Widget ini diperuntukkan bagi yang ingin memperoleh konten gratis langsung dikirimkan via email..



Modifikasi form feedburner kali ini simpel:

1. Login blogger

2. Layout > add gadget >html/javascript

3. Masukkan kode css dan html berikut

<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/AVvXsEjTSSsWQPdS_hE3vVQb_qehHkvMXBuwtfPu9750zw5kbTIkCo9oxNVy20_7WppA4L6gvaH0aWxXZhJvQOf2GPrcsVuVqBzgiaJ1bd5ptGvEjKwqB9IGFlAxSl4s2weFg30T68URB0bUDh8/s1600/images.png") no-repeat bottom right;

}

.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/mig33eagle"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYeP_NZneY16p3woDhi2VoS7VVHz-5Ebiszk_o-vwDnhJi7YIHq9ALlLXgWhP6Hs2rFPCxI0dyYf8hvr7JNWzrGo1v1ms5UD9KEh3739HkuoysC-66p3ngU3v7reip0vn1RyjE6uSOZ6lu/s800/005.png" /></a> <a href="http://feeds.feedburner.com/mig33eagle">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 anda!</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=mig33eagle', '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 anda disini...&quot;;}" onfocus="if (this.value == &quot;Ketik email anda disini...&quot;) {this.value = &quot;&quot;}" type="text" value="Ketik email anda disini..." /> <input type="hidden" value="mig33eagle" name="uri" /><input type="hidden" name="loc" value="en_US" /><input class="button" type="submit" value="GO" /></div></form>

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

</div></div>

mig33eagle berwarna cyan diatas adalah nama akun feedburner, ganti saja dengan nama akunfeedburner anda.

4. Simpan dan selesai.



Hasil dari kode css dan html di atas: