Email Subscription Form Box Blogger

Sebagaimana yang saya janjikan kemarin-kemarin bahwa saya akan datang dengan membawa widget baru yakni email subscription box a, atau formulir kotak berlangganan. Ya, desain formulir ini dibanggun atas ketidakcocokan pribadi terhadap style subscription form yang telah ada, sehingga mendorong untuk memiliki style yang secara rasa pas.

Selain itu, widget ini bertujuan untuk menambah kekayaan variasi style dan desain widget-widget pada blogger, mendampingi desain-desain hebat yang telah ada.

Desain ini tentu saja kaya dan unik. Dengan thumbnail situs dikanan, disamping teks, disertai button atau tombol berlangganan berwarna gradien oranye denga hover biru, memiliki sisi estetika tersendiri. Juga, bisa jadi, desainnya yang cool dan eye-catching ini bisa menarik mata para blogger widget lover untuk memandanginya. Tapi yang lebih penting, semoga desainnya dapat berperan untuk menarik pengunjung supaya berlangganan.

Ingat kan bahwa masing-masing memiliki jiwa sendiri? Nah, kalu jiwamu sesuai dengan desain ini, langsung saja seret kodenya ke template kamu. Simak langkahnya dibawah ini:

• Pertama buka template → edit html
• Temukan ]]></b:skin>
• Diatasanya ]]></b:skin>, masukan kode dibawah ini:

<style>
.ltr-langgan{
background:url(none) no-repeat top right;
width:300px;
padding:0px 0px 0 0px;
float:left;
font-family: &#39;Arimo&#39;
font-size:11px;
margin:0 0 10px 10px;
color:#4c4c4c;
}

.ltr-langganmail-bt{
background-image: linear-gradient(#f54906, #dd3e00);
box-shadow: 0 1px 0 hsla(0,0%,100%,.2) inset,
              0 0 0 1px hsla(0,0%,100%,.1) inset,
              0 1px 0 hsla(210,54%,20%,.03);
cursor:pointer;
color:#fff;
border:none;
padding:7px 6px;
text-shadow:0 -1px 1px rgba(0,0,0,0.25);
border-radius:3px;
font-family: &#39;Oswald&#39;;
font-size: 12px;
font-wight: bold;
}
.ltr-langganmail-bt:hover{
background-image: linear-gradient(#08f096, #02ca7c);}
.siniteks{
padding:8px 7px;
margin:6px 2px 6px 2px;
background:#f9f9f9;
border:1px solid #ccc;
resize:none;
font-size:13px; 
width:170px;
color:#666;
border-radius: 3px;
}

</style>

• Simplan templatemu!
• Kemudian langsung masuk ke layout → add new gadget →html/javascript
• Pastekan kode berikut didalamnya:

<div class='ltr-langgan'>
<table><tr>
<td>Ingin berlangganan? Daftarkan emailmu disini! Gratis!</td><td><img src='http://gambarmu.png' style='border:none;'/></td>
</tr></table>
<form action='http://feedburner.google.com/fb/a/mailverify' id='feedform' method='post' onsubmit='window.open(&apos;https://feedburner.google.com/fb/a/mailverify?uri=Latuary&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
<input class='siniteks' gtbfieldid='3' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Ketik email njenengan disini&quot;;}' onfocus='if (this.value == &quot;Ketik email njenengan disini&quot;) {this.value = &quot;&quot;;}' type='text' value='Ketik email njenengan disini'/>
<input name='uri' type='hidden' value='Latuary'/><input name='loc' type='hidden' value='en_US'/>
<input class='ltr-langganmail-bt' type='submit' value='Berlangganan!'/>
</form>
<center><span style='padding: 0px 0px 0px 7px;'>Privasi aman, bebas spam!</span></center>
  </div>

• Simpan dan lihat templatemu apakah kodenya bekerja.

Kustomisasi:

1. Ganti Arimo dengan font kesayanganmu.
2. Sesuaikan ukuran font (11px) dan  warnanya (#4c4c4c).
3. Pilih warna buttonnya (#f54906 dan #dd3e00) sebelum di-hover.
4. Ganti warnanya setelah dihover (#08f096 dan #02ca7c).
5. Jika ingin shape yang berbentuk kotak pada tombol atau area submit emailnya, buang border-radius:3px;, atau ganti sesuai preferensimu.
6. Ganti http://gambarmu.png dengan Url gambar kamu.
7. Ganti teks 'Ingin berlang ...' dan 'Ketik email ...' dengan teks yang kamu sukai.
8. Jika ingin menambahkan chicklet feedburner/feed count (jumlah orang yang berlangganan), cukup tambahkan kode yang dicetak tebal warna hijau dibawah ini setelah 'aftarkan emailmu disini! Gratis!' dan sebelum</td> yang pertama

... u disini! Gratis! <a href="http://feeds.feedburner.com/Latuary"><img src="http://feeds.feedburner.com/~fc/namafeedmu?bg=000000&amp;fg=ffffff&amp;anim=1&amp;label=listeners" height="26" width="88" style="border:0" alt="" /></a> </td> ...

       9. All is done!

 Happy blogging dan salam!