Awesome Subscribe Box For Blogger

Published by M. Limon About Saturday, February 23, 2019

Hello Everybody ! Welcome To EasyTrks. Today I will Share a Awesome Subscribe Box Widget For Blogger. So Let's Start.  

If You want to see the demo watch it Live from below.

DEMO

So Let's Get To Work .

• First Go To Blogger.
• Template 
• Edit Html
• Add The CSS code Before </head>.

#subscribe-wrap{
background-image: url("https://www.oodlesthemes.com/wp-content/uploads/2017/10/OO0122373-Blue-abstract-background-design-copy-copy-590x300.jpg");
background-position:center;background-attachment:fixed;margin:auto;padding:0 20px;overflow:hidden;z-index:2
}
#subscribe-box{max-width:440px;margin:auto;padding:20px;overflow:hidden}#subscribe-box h4{color:#fff;margin-bottom:20px;text-align:center}
#subscribe-box .emailfield{margin:auto}
#subscribe-box .emailfield form{position:relative;text-align:center}#subscribe-box .emailfield form:before{position:absolute;font-family:fontawesome;content:'\f0e0';color:#f1c40f;left:18.7%;top:21%;z-index:2;font-weight:normal}#subscribe-box .emailfield input{background:#fff;position:relative;display:inline-block;padding:12px 12px 12px 42px;color:#555;border:0;font-size:14px;margin-bottom:16px;width:45%;border-radius:3px}#subscribe-box .emailfield input:focus,#subscribe-box .emailfield input:hover{background:#fff;color:#222;outline:none;border:0}#subscribe-box .emailfield .submitbutton{background-color:rgba(99,110,114,.9);color:#fff;margin:0 0 0 10px;padding:12px;width:20%;letter-spacing:.5px;cursor:pointer;font-weight:500;box-shadow:0 1px rgba(0,0,0,.1);border-radius:3px;transition:all .3s}#subscribe-box .emailfield .submitbutton:active,#subscribe-box .emailfield .submitbutton:hover,#subscribe-box .emailfield .submitbutton:focus{background-color:rgba(244,67,54,.9);color:#fff}
@media screen and (max-width:800px){
#subscribe-wrap{padding:20px 0 40px 0}#subscribe-box {padding:0;width:90%}#subscribe-box .emailfield input {width:100%;border-radius:0;margin:auto}#subscribe-box .emailfield .submitbutton{margin:20px 0 0 0;width:100%;border-radius:0}#subscribe-box .emailfield {overflow:hidden;}#subscribe-box .emailfield form:before{left:2.7%;top:12%}}
@media screen and (max-width:480px){
#subscribe-box .emailfield form:before{left:4.7%;top:14%}
}

After That You Just Need To Add Another Code Where You Want The Subscribe Box.

<div id='subscribe-wrap'>
<div id='subscribe-box'>
<h4>Get notify via email</h4>
<div class='emailfield'>
<form action='https://feedburner.google.com/fb/a/mailverify' expr:onsubmit='&quot;window.open(\&quot;https://feedburner.google.com/fb/a/mailverify?uri=&quot; + data:feedPath + &quot;\&quot;, \&quot;popupwindow\&quot;, \&quot;scrollbars=yes,width=550,height=520\&quot;); return true&quot;' method='post' target='popupwindow'>
<input name='email' placeholder='Email Address' type='text'/>
<input name='uri' type='hidden' value='EasyTrks'/>
<input name='loc' type='hidden' value='en_US'/>
<input class='submitbutton' type='submit' value='Submit'/>
</form>
</div>
</div>
</div>

That's It.

Change EasyTrks with your Blog Name.

If You Face Any Kind Of Problem Installing The Widget Don't Forget To Comment. I'm Always With You. I Will Do My Best To Help You.

Regards EasyTrks.