Thursday 22 November 2012

Beautiful Email Subscription Forms For Blogger

Email subscription is a very popular way to subscribe any blog/website and get updates directly in the mailbox,that's why you may always notice that number of feeds subscribers is always more that any other social social network subscribers.Today I am going to share some beautiful email subscription forms.

How To Add Email Subscription Forms To Blogger

  1. First select your form
  2. Copy the code of that form
  3. Replace my username with yours
  4. Go to Blogger Dashboard > Layout
  5. Click on Add a Gadget
  6. Select HTML/JavaScript
  7. Paste code and save it.
Email Form Style 1



<style type="text/css">
#helperblogger-emailbox {
    background: urlundefinedhttps://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-hgUDsxYBsnnIXZ5G1wqJzgVGrPruGhH1wRmImlFkF34aihtaY2jCf-G4_IEmN3z8unwJZcAQhzOLBCAgNMjD8enq9SgYpA3mhyu2H1e_QW5rAtZ1Y2fAhxkj1DHwA_nmWSTTFQL6Klo/s1600/helperblogger.com-blue.png)no-repeat scroll center center transparent;
    height: 143px;
    width: 368px;
}
 
form#helperblogger-emailform {
    display: block;
    margin: 0;
    padding-left: 42px;
    padding-top: 67px;
}
 
form#helperblogger-emailform #s {
    background: transparent;
    border: none;
    color: #444242;
    font-family: georgia;
    font-size: 15px;
    font-style: italic;
    height: 30px;
    margin-top: -2px;
    padding-left: 2px;
    vertical-align: top;
    width: 227px;
}
 
form#helperblogger-emailform #sbutton {
    background: transparent;
    border: none;
    cursor: pointer;
    height: 30px;
    padding-right: 45px;
}</style>
 
<div id="helperblogger-emailbox">
    <form id="helperblogger-emailform" action="http://feedburner.google.com/fb/a/mailverify"
    method="post" target="popupwindow" onsubmit="window.openundefined'http://feedburner.google.com/fb/a/mailverify?uri=DanishMir', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
        <input type="hidden" value="DanishMir" name="uri" />
        <input type="text" id="s" name="email" value="Enter Your E-Mail Here"
        onfocus='if undefinedthis.value == "Enter Your E-Mail Here") {this.value = ""}'
        onblur='if undefinedthis.value == "") {this.value = "Enter Your E-Mail Here";}'
        />
        <input type="hidden" name="loc" value="en_US" />
        <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton"
        />
    </form>
</div>

Email Form Style 2



<style type="text/css">
#helperblogger-emailbox {
    background: urlundefinedhttps://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg33ppYBdFwFtv-n8jAD0UWR6ifi0tY544Y2iWDf-RpsXTZlOTGFdYpxVuXA7gL7poEqiOdQ7ZkzfYI1KOSWQQP-lpDFUnpxulRg_NtrRoaaouEcfJ6_TgX0mPQ1mtTdGTMngeRs7gB86Q/s1600/helperblogger.com-silver.png)no-repeat scroll center center transparent;
    height: 143px;
    width: 368px;
}
 
form#helperblogger-emailform {
    display: block;
    margin: 0;
    padding-left: 42px;
    padding-top: 67px;
}
 
form#helperblogger-emailform #s {
    background: transparent;
    border: none;
    color: #444242;
    font-family: georgia;
    font-size: 15px;
    font-style: italic;
    height: 30px;
    margin-top: -2px;
    padding-left: 2px;
    vertical-align: top;
    width: 227px;
}
 
form#helperblogger-emailform #sbutton {
    background: transparent;
    border: none;
    cursor: pointer;
    height: 30px;
    padding-right: 45px;
}</style>
 
<div id="helperblogger-emailbox">
    <form id="helperblogger-emailform" action="http://feedburner.google.com/fb/a/mailverify"
    method="post" target="popupwindow" onsubmit="window.openundefined'http://feedburner.google.com/fb/a/mailverify?uri=DanishMir', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
        <input type="hidden" value="DanishMir" name="uri" />
        <input type="text" id="s" name="email" value="Enter Your E-Mail Here"
        onfocus='if undefinedthis.value == "Enter Your E-Mail Here") {this.value = ""}'
        onblur='if undefinedthis.value == "") {this.value = "Enter Your E-Mail Here";}'
        />
        <input type="hidden" name="loc" value="en_US" />
        <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton"
        />
    </form>
</div>

Email Form Style 3



<style type="text/css">
#helperblogger-emailbox {
    background: urlundefinedhttps://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEja1MfRPjJOcq3Rt5zJVdz_9CNbaeId5ICBQybt_mQQcPJe2rO25rQnHXwKBS0PcmxyEyIqfJIqHSyUdMKse5kSg0YM4yFlcEQjxxf3qPtduqrkvrcERttwTZF-MynztROpIIB-Fay-GZQ/s1600/helperblogger.com-red.png)no-repeat scroll center center transparent;
    height: 143px;
    width: 368px;
}
 
form#helperblogger-emailform {
    display: block;
    margin: 0;
    padding-left: 42px;
    padding-top: 67px;
}
 
form#helperblogger-emailform #s {
    background: transparent;
    border: none;
    color: #444242;
    font-family: georgia;
    font-size: 15px;
    font-style: italic;
    height: 30px;
    margin-top: -2px;
    padding-left: 2px;
    vertical-align: top;
    width: 227px;
}
 
form#helperblogger-emailform #sbutton {
    background: transparent;
    border: none;
    cursor: pointer;
    height: 30px;
    padding-right: 45px;
}</style>
 
<div id="helperblogger-emailbox">
    <form id="helperblogger-emailform" action="http://feedburner.google.com/fb/a/mailverify"
    method="post" target="popupwindow" onsubmit="window.openundefined'http://feedburner.google.com/fb/a/mailverify?uri=DanishMir', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
        <input type="hidden" value="DanishMir" name="uri" />
        <input type="text" id="s" name="email" value="Enter Your E-Mail Here"
        onfocus='if undefinedthis.value == "Enter Your E-Mail Here") {this.value = ""}'
        onblur='if undefinedthis.value == "") {this.value = "Enter Your E-Mail Here";}'
        />
        <input type="hidden" name="loc" value="en_US" />
        <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton"
        />
    </form>
</div>
Replace DanishMir with your feedburner username in line number 39 and 40 with your feedburner username in line number 39 and 40

No comments:

Post a Comment