Tutorial Blog kali ini akan membagikan script Subscribe via Email  alias Berlangganan via Email yang Keren dan Elegan. Untuk membuat widget subscribe sebenarnya sangat mudah, karena pada blogger sudah ada fitur bawaan untuk subscribe via email namun kurang variasi model. Jadi menambah kemolekan blog Sobat, ambpun membagikan tutrial ini.
Kami sangat menganjurkan blog kita menggunakan Widget Subscribe karena sangat penting dan bermanfaat untuk membantu pengunjung agar bisa mendapatkan informasi terbaru dari kita tanpa harus mencari blog melalui Searchengine, karena persaingan searchengine itu sangat berat.

Kami akan membagikan beberapa model Widget keren dan cantik untuk berlangganan di email. Kotak ini coco diletakan di sidebar kanan blog Sobat. Jika ada yang memasukkan emailnya, nanti pelanggan tersebut akan menerima permintaan konfirmasi dari FeedBurner (milik Google). Setelah dikonfirmasi, maka update atau posting terbaru dari blog Sobat akan diterima di inbox email pelanggan Sobat tanpa harus membuka blognya kembali.

<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,400,300,600,700' rel='stylesheet' type='text/css'/> <div id='byard-emailsubsocial'> <div class='heading'> Sign Up in Seconds </div> <p>Sign up with your email address to receive hot updates straight in your inbox.</p> <div class='emailsub'> <form action='http://feedburner.google.com/fb/a/mailverify' method='post'target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=Ambopun', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"> <input type='text' name='name' placeholder='Your Name' /> <input type='text' name='email' placeholder='Your Email' /> <input type="hidden" value="Ambopun" name="uri"/> <input type="hidden" name="loc" value="en_US"/> <input value="Sign Up Now!" class="button" type="submit" /> </form> </div> <p id='credits'>Powered By : <a href='http://www.seocips.com'>Seocips</a></p> </div> <style type='text/css'> #byard-emailsubsocial { width: 300px; height: 330px; border: 1px solid #ddd; border-radius: 5px 5px 0px 0px; } #byard-emailsubsocial .heading { padding: 15px 25px; line-height: 35px; font-size: 26px; font-weight: 600; font-family: open sans; color: rgb(170, 170, 170); text-align: center; text-shadow: 0px 1px rgba(255, 255, 255, 0.75); background: none repeat scroll 0% 0% rgb(247, 247, 247); } #byard-emailsubsocial p { font-family: open sans; font-size: 13px; color: rgb(170, 170, 170); line-height: 25px; padding: 10px 20px 0 20px; margin: 0; } #byard-emailsubsocial .emailsub { padding: 0px 20px 10px 20px; } #byard-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; } #byard-emailsubsocial .emailsub input:focus { border-color:#F4836A; outline: none; box-shadow: 0 0 2px 1px #F4836A; } #byard-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; } #byard-emailsubsocial .emailsub .button:hover{ background: #DD7761; } #credits { margin: 0 auto!important; margin-top: -10px!important; width: 160px; } </style>

<center><style type='text/css'> #subscribe-box {width: 300px;height: auto;border-radius: 2px;background-color: #38424B;padding-bottom:10px} #subscribe-box .title {padding: 10px 25px;line-height: 30px;font: 26px Oswald;color: #ffffff;text-align: center;border-bottom: 1px solid #BBB;text-transform:uppercase;border-radius:2px 2px 0 0;} #subscribe-box p {font-family: &#39;Droid Serif&#39;;font-size: 13px;color:#fff;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: &#39;Droid Serif&#39;;width: 92%;border:0;border-radius: 2px;} #subscribe-box .emailfield input:focus {outline: none;} #subscribe-box .emailfield .submitbutton {background: #2BA6E1;color: #fff!important;border:none;outline: none;cursor:pointer;} #subscribe-box .emailfield .submitbutton:active {padding-top: 11px;padding-bottom: 9px;box-shadow: 0px 1px 0px 0px #3293ba;} #subscribe-box .emailfield .submitbutton:hover{background: #00686C;} </style> <div id='subscribe-box'> <div class='title'> Informasi Gratis </div> <p>Dapatkan Informasi Terbaru Gratis Yang Kami Kirim Ke E-Mail Anda.</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=Ambopun&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='Ambopun'/> <input name='loc' type='hidden' value='en_US'/> <input class='submitbutton' type='submit' value='Subscribe Now!'/> </form> </div> </div></center>

<center> <form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=Ambopun', 'popupwindow', 'scrollbars=yes,width=70%,height=520');return true" class="login"> <h1>SUBSCRIBE TODAY</h1> <img src="http://png.findicons.com/files/icons/2198/dark_glass/128/mail_appt.png" alt="Smiley face" align="LEFT" height="48" width="48" /> <center><font size="3" color="white"><span style="line-height:25px">&nbsp;Sign up and receive our free Newsletter &nbsp;</span></font></center><br/> <input type="hidden" value="Ambopun" name="uri" /> <input type="email" name="email" class="login-input" placeholder="Email Address" autofocus /> <input type="hidden" name="loc" value="en_US" /> <input type="submit" value="Subscribe" class="login-submit" /> </form> </center> <style> a.tt{ position:relative; z-index:24; color:#3CA3FF; font-weight:bold; text-decoration:none; } a.tt span{ display: none; } a.tt:hover{ z-index:25; color: #aaaaff; background:;} a.tt:hover span.tooltip{ display:block; position:absolute; top:0px; left:0; padding: 15px 0 0 0; width:200px; color: #993300; text-align: center; filter: alpha(opacity:90); KHTMLOpacity: 0.90; MozOpacity: 0.90; opacity: 0.90; } a.tt:hover span.top{ display: block; padding: 30px 8px 0; background: url(bubble.gif) no-repeat; } a.tt:hover span.middle{ /* different middle bg for stretch */ display: block; padding: 0 8px; } a.tt:hover span.bottom{ display: block; padding:3px 8px 10px; color: #548912; } ::-moz-focus-inner { padding: 0; border: 0; } :-moz-placeholder { color: #bcc0c8 !important; } ::-webkit-input-placeholder { color: #bcc0c8; } :-ms-input-placeholder { color: #bcc0c8 !important; } .input { font: 12px/20px "Lucida Grande", Verdana, sans-serif; color: #404040; background: #ebc9a2; } .input { font-family: inherit; font-size: 12px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .login { padding: 18px 20px; width: 80%; background: #3f65b7; background-clip: padding-box; border: 1px solid #172b4e; border-bottom-color: #142647; border-radius: 5px; background-image: -webkit-radial-gradient(cover, #437dd6, #3960a6); background-image: -moz-radial-gradient(cover, #437dd6, #3960a6); background-image: -o-radial-gradient(cover, #437dd6, #3960a6); background-image: radial-gradient(cover, #437dd6, #3960a6); -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.3), inset 0 0 1px 1px rgba(255, 255, 255, 0.1), 0 2px 10px rgba(0, 0, 0, 0.5); box-shadow: inset 0 1px rgba(255, 255, 255, 0.3), inset 0 0 1px 1px rgba(255, 255, 255, 0.1), 0 2px 10px rgba(0, 0, 0, 0.5); } .login > h1 { margin-bottom: 20px; font-size: 24px; font-weight: bold; text-align: center; color: #fff; text-shadow: 0px 1px 0px #999, 0px 2px 0px #888, 0px 3px 0px #777, 0px 4px 0px #666, 0px 5px 0px #555, 0px 6px 0px #444, 0px 7px 0px #333, 0px 8px 7px #001135; } .login-input { display: block; width: 90%; height: 37px; margin-bottom: 20px; padding: 0 9px; color: white; text-shadow: 0 1px black; background: #2b3e5d; border: 1px solid #15243b; border-top-color: #0d1827; border-radius: 4px; background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.2) 20%, rgba(0, 0, 0, 0)); background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.2) 20%, rgba(0, 0, 0, 0)); background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.2) 20%, rgba(0, 0, 0, 0)); background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.2) 20%, rgba(0, 0, 0, 0)); -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.2); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.2); } .login-input:focus { outline: 0; background-color: #32486d; -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3), 0 0 4px 1px rgba(255, 255, 255, 0.6); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3), 0 0 4px 1px rgba(255, 255, 255, 0.6); } .lt-ie9 .login-input { line-height: 35px; } .login-submit { display: block; width: 100%; height: 37px; margin-bottom: 15px; font-size: 14px; line-height: 10px; font-weight: bold; color: #294779; text-align: center; text-shadow: 0 1px rgba(255, 255, 255, 0.3); background: #adcbfa; background-clip: padding-box; border: 1px solid #284473; border-bottom-color: #223b66; border-radius: 4px; cursor: pointer; background-image: -webkit-linear-gradient(top, #d0e1fe, #96b8ed); background-image: -moz-linear-gradient(top, #d0e1fe, #96b8ed); background-image: -o-linear-gradient(top, #d0e1fe, #96b8ed); background-image: linear-gradient(to bottom, #d0e1fe, #96b8ed); -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), inset 0 0 7px rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.15); box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), inset 0 0 7px rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.15); } .login-submit:active { background: #a4c2f3; -webkit-box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.4), 0 1px rgba(255, 255, 255, 0.1); box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.4), 0 1px rgba(255, 255, 255, 0.1); } .login-help { text-align: center; } .login-help > a { font-size: 11px; color: #d4deef; text-decoration: none; text-shadow: 0 -1px rgba(0, 0, 0, 0.4); } .login-help > a:hover { text-decoration: underline; }

<style> .hl-email{ background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgI0RrnpwKPRqVnMy4PrsRPd2O7OixmwkI1P4LEKkT_zcECfhaMK3ivK8KFm1_aHvUIRq1_XGjWISOK7zLwlB6rwSKcu-TUrPwLeQVq6fc_AGJ2aPlOtAjXNDN5xolI3-Rau7NjtQzms9w/s1600/mail.png) no-repeat 0px 12px ; width:300px; padding:10px 0 0 55px; float:left; font-size:1.4em; font-weight:bold; margin:0 0 10px 0; color:#686B6C; } .hl-emailsubmit{ background:#9B9895; cursor:pointer; color:#fff; border:none; padding:3px; text-shadow:0 -1px 1px rgba(0,0,0,0.25); -moz-border-radius:6px; -webkit-border-radius:6px; border-radius:6px; font:12px sans-serif; } .hl-emailsubmit:hover{ background:#E98313; } .textarea{ padding:2px; margin:6px 2px 6px 2px; background:#f9f9f9; border:1px solid #ccc; resize:none; box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1); -moz-box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1); -webkit-box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1); font-size:13px; width:180px; color:#666;} </style> <div class="hl-email"> Subscribe via Email <form action="http://feedburner.google.com/fb/a/mailverify" id="feedform" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=Ambopun', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"> <input gtbfieldid="3" class="textarea" name="email" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Enter email address here&quot;;}" onfocus="if (this.value == &quot;Enter email address here&quot;) {this.value = &quot;&quot;;}" value="Enter email address here" type="text" /> <input type="hidden" value="Ambopun" name="uri"/><input type="hidden" name="loc" value="en_US"/> <input class="hl-emailsubmit" value="Submit" type="submit" /> </form> </div>

DEMO     |     DOWNLOAD