Simple Responsive Subscription Box

Simple Responsive Subscription Box - In this article I write, I will share tips on how to install a simple responsive subscription box widget in blog sidebar.

Of course you all already know what the function of that subscription box, Yes, with this subscription box will make it easier for visitors to follow our blog via email, so the latest post our blog will automatically sent Google (Feedburner) to email inbox. From the email that the link is clicked and open the latest post page.

How to install a Simple Responsive Subscription Box

If you are interested to install this simple responsive subscription box, can directly follow some steps below.

1. Layout > Add a Gadget > select HTML/JavaScript
2. Fill in the title, eg Subscription Form
3. Then copy the code below, then paste it in HTML/JavaScript

<style>
#subscribe{position:relative;border:1px solid #ddd;margin:5px auto}
#subscribe-form{height:30px;-moz-border-radius:3px;-khtml-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;background:#fff;overflow:hidden}
#subscribe-text{color:#ccc;border-width:0}
#subscribe input[type="text"]{width:100%;padding:7px 0 7px 7px;outline:0}
#subscribe-button{position:absolute;top:0;right:0;height:30px;margin:0;text-align:center;line-height:0;border-width:0;background:whitesmoke;cursor:pointer;font-size:12px;font-weight:bold}
</style>
<div id='subscribe'>
<form action='http://feedburner.google.com/fb/a/mailverify' id='subscribe-form' method='get' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=FEED-ID&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
  <input name='uri' type='hidden' value='FEED-ID'/>
  <input name='loc' type='hidden' value='en_US'/>
  <input id='subscribe-text' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Enter your email..&quot;;}' onfocus='if (this.value == &quot;Enter your email...&quot;) {this.value = &quot;&quot;}' type='text' value='Enter your email..'/>
  <button id='subscribe-button' type='submit'>SUBMIT</button>
</form>
</div>

4. Replace FEED-ID with your Blog Feedburner code.

5. Then Save, and see the result.

So how to install Subscribe Form Simple Responsive. Hopefully with a short enough article this can be useful and useful, and good luck.

Share :