Membuat Widget Email Subscribe Dengan Style Flat

Membuat Widget Email Subscribe Dengan Style Flat - Widget ini merupakan widget yang sangat penting dan ga mau dilewatkan oleh para blogger untuk membuat tampilan blog terlihat SEO. Widget ini berfungsi untuk mendapatkan berbagai artikel gratis yang diposting oleh blog-blog yang dimana anda juga mensubmit email anda. contoh hasilnya seperti dibawah ini :

Langkah-langkahnya sebagai berikut :

1. Pada Dasbor > Tataletak > Add Gadget/Widget > Pilih Text/Javascript
2. Lalu copy semua script berikut dan pastekan :

<style scoped="scoped" type="text/css">

#SUBSCRIBE-LTB { width:280px; border:1px solid #aaa; border-radius:3px; padding: 0; } .SUBSCRIBE-LTB-wrapper { background: #98cdca; color:#fff; font-size:14px; line-height:20px; text-align:inherit; text-transform:uppercase; padding:1px 20px 10px; } .SUBSCRIBE-LTB-form { clear:both; display:block; margin:10px 0; } form.SUBSCRIBE-LTB-form { clear:both; display:block; width:auto; margin:10px 0 0; } .SUBSCRIBE-LTB-email-field { -moz-border-radius:4px; -webkit-border-radius:4px; background:#fff ; border:1px solid #ccc; border-radius:4px; color:#444; width:68%; margin:0 0 15px; padding:10px 40px; } .SUBSCRIBE-LTB-email-button { background:#3A4146; border:1px solid #444749; box-shadow:0 1px 0 rgba(255,255,255,0.3) inset, 0 1px 0 transparent; color:#fff; cursor:pointer; font-family:verdana; font-weight:700; text-shadow:1px 1px 0 rgba(0,0,0,.4); text-transform:uppercase; width:100%; padding:10px; } .SUBSCRIBE-LTB-email-button:hover,.SUBSCRIBE-LTB-email-button:focus { background:#444749; } .SUBSCRIBE-LTB-email-button:active { -moz-box-shadow:0 1px 4px rgba(0,0,0,0.5) inset; -webkit-box-shadow:0 1px 4px rgba(0,0,0,0.5) inset; box-shadow:0 1px 4px rgba(0,0,0,0.5) inset; outline:0; } iframe,object,embed,.yt-border iframe,.yt-border object,.yt-border embed,table { width:100%; } embed { border-radius:3px; -moz-box-shadow:0 2px 4px rgba(0,0,0,0.2); -webkit-box-shadow:0 2px 4px rgba(0,0,0,0.2); background:#FFF; border:1px solid #ddd; box-shadow:0 2px 4px rgba(0,0,0,0.2); margin:0; padding:4px; } #footer-section { border-top:1px solid #98cdca; box-shadow:inset 0 4px 6px -3px #98cdca; font-family:cambria; font-size:14px; height:100px; text-align:center; width:100%; margin:10px -30px 5px; padding:0 30px; }

</style>

<div id="SUBSCRIBE-LTB"> <div class="SUBSCRIBE-LTB-wrapper"><font face="verdana"><p><b>Silahkan Isikan Email Anda Disini, Anda Akan Mendapatkan berbagai Artikel Menarik Gratis perharinya !!!!</b> </p></font> <div class="SUBSCRIBE-LTB-form"><form action="https://feedburner.google.com/fb/a/mailverify?uri=JoeErickBlog" class="SUBSCRIBE-LTB-form" method="post" onsubmit="window.open('https://feedburner.google.com/fb/a/mailverify?uri=JoeErickBlog', 'popupwindow', 'scrollbars=yes,width=520,height=520');return true" target="popupwindow"><input name="uri" type="hidden" value="JoeErickBlog" /> <input name="loc" type="hidden" value="en_US" /><input class="SUBSCRIBE-LTB-email-field" name="email" autocomplete="off" placeholder=" Ketik Email Anda Disini ... "/> <input class="SUBSCRIBE-LTB-email-button" title="" type="submit" value="Submit" /></form> </div></div></div>

*Keterangan :
- Kode warna biru ganti dengan Kata-kata anda sendiri.
- Ganti kode berwarna merah dengan kode ID pada Feedburner sobat

3. Kemudian Save Template.

Selesai sudah tutorialnya.
Semoga sukses dan selamat mencoba gan :)

Share this post