Tutorial Membuat Widget Simple Flat UI Subscribe Email

Flat UI Design ini sedang trend di kalangan blogger.Flat UI Design membuat blog/web kita menjadi lebih indah dengan widget ini.Widget ini tidak memberatkan loading blog kok,paling hanya 0,0003%.Mari simak tutorialnya berikut ini :

DEMO

• Login ID/Akun Blogger Anda
• Baca Basmallah XD
• Dashboard >> Template >> Edit HTML.
• Cari ]]></b:skin> (CTRL+F) Dan copy-pastekan code dibawah ini di atas code tadi.

#vn-emailsubsocial {background:#34495e;      width: 300px;      height: 330px;      border: 1px solid #ddd;        border-radius: 5px 5px 0px 0px;     }     #vn-emailsubsocial .heading {padding: 15px 25px;line-height: 35px;font-size: 26px;font-weight: 600;font-family: open sans;color: #fff;text-align: center;background:#22313F;     }   #vn-emailsubsocial p {background:#34495e;    font-family: open sans;    font-size: 13px;    color: #fff;    line-height: 25px;    padding: 10px 20px 0 20px;    margin: 0;   }   #vn-emailsubsocial .emailsub {    padding: 0px 20px 10px 20px;   }   #vn-emailsubsocial .emailsub input {    color: rgb(170, 170, 170);    padding: 10px;    margin-top: 10px;    font-size: 15px;    font-family: open sans;    width: 92%;    border: 1px solid #ccc;    border-bottom: 2px solid #ccc;    border-radius: 5px;    transition:border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;   }   #vn-emailsubsocial .emailsub input:focus {    border-color:#F4836A;    outline: none;    box-shadow: 0 0 2px 1px #F4836A;   }   #vn-emailsubsocial .emailsub .button {    background: #F4836A;    color: white!important;    border:none;    outline: none;    border-bottom: 3px solid #B3614E;    transition:background .4s linear;    width: 90%;    margin-right: 5%;    margin-left: 5%;    font-weight: 600;    cursor:pointer;   }   #vn-emailsubsocial .emailsub .button:hover{    background: #DD7761;   }

• Jika sudah selesai.
• Beralih ke Tata Letak >> Add Gadget >> Pilih HTML/Javascript.
• Dan Copy-pastekan code dibawah ini tepat di gadget HTML/Javascript tadi. 

<div id="vn-emailsubsocial"><div class="heading">Sign Up Here              </div>TULISKAN PESAN ANDA DISINI<br /><div class="emailsub"><form action="http://feedburner.google.com/fb/a/mailverify method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=T-fvnBlogspot', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow"><input name="name" placeholder="Your Name" type="text" />               <input name="email" placeholder="Your Email" type="text" />               <input name="uri" type="hidden" value="BloggerYard" />               <input name="loc" type="hidden" value="en_US" />                        <input class="button" type="submit" value="Subcribe Now!" />              </form></div></div> 

KETERANGAN :

• Warna Orange adalah Pesan Yang Ingin sobat sampaikan.Tapi admin sarankan untuk menghapus pesan tersebut.Alasannya?? Sobat bisa tahu sendiri.
• Sedangkan Warna BIRU adalah Nama feed rss blog anda.

Nantikan post FLAT UI berikutnya ya sobat,Allahamdulilah masih sempet buat post ini sesudah pulang kampung :D.