Modifikasi Form Subscribe Supaya Elegan

Modifikasi Form Subscribe Supaya Elegan - Merubah atau mopdifikasi formulir berlangganan (subscribe) feeds menggunakan CSS supaya tampilan formulir berlanggan feeds bisa lebih baik, formulir ini bertujuan untuk mengirimkan posting terbaru kedalam email kepada yang sudah masuk daftar berlanggan sebuah feeds blog.

Secara default bila kita sudah mendaftarkan blog kita pada feedburner google, jika akan menampilkan formulir berlangganan akan diberikan scrips subscribe yang bisa kita tampilkan pada blog untuk mempermudah pengunjung untuk berlangganan posting yang dikirimkan melalui email, namun jika kita tidak cocok dengan tampilan yang diberikan, kita bisa modifikasi tampilan formulir berlangganan tersebut dengan menggunakan CSS.

Menambahkan CSS dalam formulir tersebut akan memberikan tanmpilan yang berbeda dengan tampilan subscribe default, untuk itu penggunaan atau penambahan CSS dalam script formulir berlanggan tersebut bis kita sesuaikan tampilannya dengan desain template, baik itu menggunakan tambahan gambar ataupun hanya menggunakan warna.

Salah satu formulir subscribe yang sudah admin modifikasi adalah sebagai berikut seperti dalam demo dibawah ini, sesuai atau tidaknya dengan template yang dipergunakan bisa kita modifikasi lagi untuk memperbaiki tampilan formulir subscribe tersebut.

• Demo

HTML

<div class='feeds'>
<p>UpDate Posting Melalui Email</p>
<form action='http://feedburner.google.com/fb/a/mailverify' class='subscribe' method='post' onsubmit='window.open (&apos;http://feedburner.google.com/fb/a/mailverify?uri=Dezige&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
  <input name='uri' type='hidden' value='Dezige'/>
  <input name='loc' type='hidden' value='en_US'/>
  <input autocomplete='off' class='subscribe-field' name='email' placeholder='Masukan Email Anda'/>
  <input class='subscribe-button' title='' type='submit' value='Subscribe'/>
</form>
</div>

CSS

.feeds {
  margin:0 auto;
  width:300px;
  background:#D97726;
  border-radius:2px;
  padding:10px;
}
.feeds p {
  color:#ebebeb;
  font:normal 16px Arial, Helvetica, sans-serif;
  Text-align:center;
}
.subscribe {
  display:block;
  margin:10px 0;
  overflow:hidden;
}
.subscribe-field {
  color:#444;
  margin-bottom:12px;
  padding:12px;
  width:100%;
  border:none;
  background:#EDBE97;
  box-shadow:0px 1px 0px rgba(255, 255, 255, 0.5),inset 0px 1px 3px rgba(113, 62, 20, 0.7);
  border-radius:2px;
}
.subscribe-button {
  border:none;
  background:#AA4F0E;
  color:#ccc;
  cursor:pointer;
  font-weight:700;
  padding:10px;
  width:100%;
  border:none;
  font:bold 16px Arial, Helvetica, sans-serif;
  border-radius:2px;
 box-shadow: 0px -1px 1px #F2995A, 0px 2px 1px #76370A, inset 0 2px 60px rgba(0, 0, 0, 0.3);
}
.subscribe-button:active {
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.3);
}

Dalam demo hanya menggunakan CSS diatas dalam segi tampilannya, yang menekankan warna yang didukung dengan properti box-shadow untuk menjadikan tampilan formulir berlangganan feeds tersebut menjadi lebih baik.

Kita bisa modifikasi ulang, baik merubah warna dasar ataupun denga menambahkan gambar feeds untuk kesesuaian yang kita inginan, untuk itu kembali pada diri kita sendiri untuk menyesuaikan denga template yang dipergunakan.

semoga salah satu cotoh modifikasi form subscribe tersebut bisa menjadikan tampilan blog kalian menjadi lebih baik, dan pengunjung bisa berlangganan utuk hadirna posting-posting baru melalui email.

semoga bermanfaat.