Beautiful Email Subscription Box For Blogger

Get here code or script of a beautiful email subscription box for Blogger. This widget will help to engage more audience through email notification.

Also check: Social Media Icon Buttons For Website & Blog

Code of an email subscription box for Blogger:-

HTML code:

Note: Replace “provishal” with your Feedburner ID name.

<div id='plugsignup'>
<p class='plugtext'><span>Subscribe to our free Newsletter</span></p>
<div class='subscribe-wrapper'>
<div class='subscribe-form'>
    <form action='https://feedburner.google.com/fb/a/mailverify?uri=provishal' class='subscribe-form' method='post' onsubmit='window.open (&apos;https://plugburner.google.com/fb/a/mailverify?uri=provishal&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
<input name='uri' type='hidden' value='provishal'/><input name='loc' type='hidden' value='en_US'/><input autocomplete='off' class='plugsignup-email-field' name='email' placeholder='Enter your Email Here...'/><input class='plugsignup-email-button' title='SIGN UP' type='submit' value='SIGN UP!'/></form>
  </div>
</div>
</div>

CSS Code:

/* Subscribe Box by https://provishal.com/ */
#plugsignup{position:relative;padding:5px 0;background:Blue;overflow:hidden;border-top:4px solid #2AA9E0;}
.subscribe-wrapper{color:#fff;font-size:16px;line-height:normal;margin:0;text-align:center;text-transform:none;font-weight:400;float:right;width:50%}
.subscribe-form{clear:both;display:block;overflow:hidden}
form.subscribe-form{clear:both;display:block;margin:0;width:auto;overflow:hidden}
.plugsignup-email-field{background:#252C33;color:#ccc;margin:10px 0;padding:15px 20px;width:50%;border:0}
.plugsignup-email-button{background:#CA7C00;color:#fff;cursor:pointer;font-weight:700;padding:11px 30px;margin-left:15px;text-transform:none;font-size:16px;border:0;transition:all .6s}
.plugsignup-email-button:hover{background:#00AEEF;}
#plugsignup p.plugtext{margin:16px;text-align:center;color:#FFFFFF;font-size:150%;float:left;font-weight:400;line-height:normal;width:45%}
#plugsignup p.plugtext span {position:relative;overflow:hidden;font-weight:700;transition:all .5s; text-transform:uppercase}
#plugsignup p.plugtext span.plugtext1:before,#plugsignup p.plugtext span.plugtext1:after{display:none}
#plugsignup p.plugtext span:before{content:'';position:absolute;bottom:-2px;left:0;width:0;height:3px;margin:10px 0 0;background:rgba(255,255,255,.1);transition:all .5s}
#plugsignup:hover p.plugtext span:before{width:100%;}
 @media only screen and (max-width:767px){
  #plugsignup p.plugtext{margin:0 0 20px 0;width:100%;}
   .subscribe-wrapper {width:100%;}
}

Result (Output):

Beautiful Email Subscription Box For Blogger

Share this page: