Cara Membuat Widget Email Subscribe Flat Ui

Sudah lama juga tidak buka email ternyata ada banyak inbox pertanyaan yang masuk melalui contact form dan sudah dibalas sebagian namun bagi yang belum sempat saya balas harap bersabar maklum diselingi kegiatan kerja. 

Ada salah satu dari sobat Blogger yang menanyakan bagaimana Membuat Email Subscribe Widget Flat Ui di blog dan pertanyaan ini sekaligus menjadi sumber bahan saya dalam postingan kali ini yaitu Cara Membuat Widget Email Subscribe Flat Ui. Bagi saya widget yang satu ini paling penting karena sebagai media juga untuk mempromosikan postingan yang ada diblog ini tentunya memudahkan juga bagi pengunjung setia yang ingin terus updated perkembangan dari blog dibalikseo ini. 

Widget ini sangat ampuh juga dalam menjaring pembaca setia pada blog yang akan secara otomatis mendapatkan updated secara gratis dari blog ini yang sudah didaftarkan melalui widget ini. Bagi sobat yang mau mencobanya silahkan copy kode-kodenya dibawah ini.

Langkah Pertama

Silahkan sobat salin kode CSS dibawah ini dan letakkan diatas kode ]]></b:skin> atau </style>

#subscribe-box {width: 300px;height: auto;border-radius: 2px;background-color: #95a5a6;box-shadow: 0px 3px 0px 0px #7f8c8d;padding-bottom:10px}
#subscribe-box .title {padding: 10px 25px;line-height: 30px;font: 26px Oswald;color: #555;text-align: center;background: #ecf0f1;text-transform:uppercase;border-radius:2px 2px 0 0;}
#subscribe-box p {font-family: 'Droid Serif';font-size: 13px;color:#555;line-height: 20px;padding: 10px 20px 0 20px;margin: 0;}
#subscribe-box .emailfield {padding: 0px 20px 10px;}
#subscribe-box .emailfield input {color: #777;padding: 10px;margin-top: 10px;font-size: 15px;font-family: 'Droid Serif';width: 92%;border:0;border-radius: 2px;box-shadow: 0px 3px 0px 0px #bbb;}
#subscribe-box .emailfield input:focus {outline: none;}
#subscribe-box .emailfield .submitbutton {background: #F4836A;color: #fff!important;border:none;outline: none;width: 100%;cursor:pointer;border-radius: 2px;box-shadow: 0px 3px 0px 0px #e23b16;}
#subscribe-box .emailfield .submitbutton:active {padding-top: 11px;padding-bottom: 9px;box-shadow: 0px 1px 0px 0px #3293ba;}
#subscribe-box .emailfield .submitbutton:hover{background: #DD7761;}

Langkah Ke Dua
Silahkan sobat salin kembali kode HTML dibawah ini dan letakkan di gadget sidebar HTML/Javascript pada Tata Letak

<div id='subscribe-box'>
              <div class='title'>
               Subscribe Here
              </div>
                 <p>Sign up here with your email address to receive updates free from this blog in your inbox.</p>
             <div class='emailfield'>
              <form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=dibalikseo&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
               <input type='text' name='name' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Your Name&quot;;}' onfocus='if (this.value == &quot;Your Name&quot;) {this.value = &quot;&quot;;}' value='Your Name'/>
               <input type='text' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Your Email&quot;;}' onfocus='if (this.value == &quot;Your Email&quot;) {this.value = &quot;&quot;;}' value='Your Email'/>
<input name='uri' type='hidden' value='dibalikseo'/>
<input name='loc' type='hidden' value='en_US'/>
                <input class='submitbutton' type='submit' value='Subscribe Now!'/>
              </form>
             </div>
</div>

RESULT

Demo

Perhatikan kode yang ditandai dibalikseo silahkan sobat ganti dengan feedblog pada feedburner sobat punya kemudian SAVE dan selesai. Selamat Mencoba