Cara merubah tampilan form emil subcribe di blog - by s2c3rr

Salah satu tips memanjakan pengunjung blog yaitu dengan cara memasang form email subcribe yang berfungsi agar pengunjung tidak perlu repot bolak balik datang ke blogcukup dengan cara mendaftarkan email sobat di blog yang akan di jadikan sumber informasi. form subcribe ini bisa kita buat sendiri atau yang paling populer saat ini yaitu from email subcribe dari feedburner.artikel ini terinspirasi dari blog http://www.hermanblog.com.

Sebagai contoh yaitu gambar di bawah ini:

sobat bisa mengganti icon ataupun kata-kata tersebut dengan yang anda inginkan.

Untuk membuat form tersebut sobat harus menyiapkan bahan-bahan yang di perlukan seperti icon dan feedcount.

1. Untuk icon sobat bisa download di sini.

2. Id feedburner sobat seperti Contoh, http://feeds.feedburner.com/idanda. Tulisan yang dicetak tebal adalah id feedburner anda.

cara mengetahui ID feedburner sobat yaitu:

Login ke akun feedburner anda kemudian arahkan kursor mouse anda pada logo feed yang terletak disamping judul feed seperti yang dilingkari garis merah pada gambar dibawah. Kemudian perhatikan url dipojok kiri bawah. Tulisan yang berada dipaling belakang itulah id feedburner anda.

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



Setelah menyiapkan bahan-bahan yang diperlukan. Selanjutnya pasang kode form tersebut di blog anda.caranya  Ikuti langkah-langkah berikut:

1. LOGIN Blogger.com dengan account sobat
2. Pilih menu RANCANGAN atu DESIGN
3. Pilih submenu ELEMEN LAMAN kemudian pilih TAMBAH GADGET.
4. Copykan kode di bawah ini kedalam isi content

<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/AVvXsEjYoYsCbt9FqH6OBSSpme9EwlaRh8KmV5h2ffIqVi8jrs_fj5AS0SvRpp2DwIGn4ZQ-XTmsuCsXxXmBD-8pHdWd8Bk6EW6_oeWtlKIZkHy2A2LB0uwV64f77ojdvhj6qTtgqRTtjk8bNPgl/") no-repeat top 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/Sahrul"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8exIWD-nSl1BK6AzlEV9tMPaPd_1i62IQLB0eBKRm4iqaELLG9Z_jcac6rVMd6asaEyWx5YRlT1GyGxDChCgadC7eViI6gFXxOJ60RgUNJfK2Lc0bJ7Ab6fPPlpXP1kd4vHxw_Y3OMiHr/s800/005.png" /></a> <a href="http://feeds.feedburner.com/Sahrul">GET UPDATE VIA RSS</a></div>

<div style="font-weight:bold; padding:10px 10px;">GET UPDATE VIAEMAIL</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=Sahrul', '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="sahrul" 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/Sahrul"><img src="http://feeds.feedburner.com/~fc/Sahrul?bg=ff7c00&amp;fg=444444&amp;anim=0" width="88" height="26" style="border:0" alt="" /></a></div>
</div></div>

Keterangan warna
Biru: keterangan dari kode html tersebut
Hijau: posisi gambar background. Anda bisa mengganti posisinya dengan paduan berikut

Top right: Kanan atas
Top left: Kiri atas
Bottom right: Kanan bawah
Bottom left: Kiri bawah

Merah: alamat url gambar background
Merah bold: id feedburner. Ganti dengan id milik anda
Ungu: alamat url gambar icon rss
Hitam bold: kalimat dalam form. Ganti jika anda ingin menggunakan kata-kata lain
Orange: nama tombol
Orange bold: warna feedcount

5. Jika sudah selesai semua, pilih Simpan. Selesai dah

Share this: