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 aku balas harap bersabar maklum diselingi aktivitas kerja. 

Ada salah satu dari sahabat Blogger yang menanyakan bagaimana Membuat Email Subscribe Widget Flat Ui di blog dan pertanyaan ini sekaligus menjadi sumber materi aku dalam postingan kali ini yaitu Cara Membuat Widget Email Subscribe Flat Ui. Bagi aku widget yang satu ini paling penting alasannya yaitu 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 menerima updated secara gratis dari blog ini yang sudah didaftarkan melalui widget ini. Bagi sahabat yang mau mencobanya silahkan copy kode-kodenya dibawah ini.

Langkah Pertama

Silahkan sahabat salin isyarat CSS dibawah ini dan letakkan diatas isyarat ]]></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 sahabat salin kembali isyarat 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 isyarat yang ditandai dibalikseo silahkan sahabat ganti dengan feedblog pada feedburner sahabat punya kemudian SAVE dan selesai. Selamat Mencoba