Simple Animated Email Subscription Widget for Blogger

0
68
Subscribe by Educative Helper

Looking for an eye catching email subscription form that immediately makes users want to subscribe to your blog updates? Here is a script that does just that but you need to keep in mind that the fact that you have an awesome looking subscription form added to your blog that catches the attention of your blog visitors, doesn’t really guarantee that each and every one of them will subscribe. In order to win over subscribers, your articles and posts must be interesting and useful to such subscriber.

So if you believe you already have interested posts on your blog and want to draw attention to your email subscription form, simply follow the steps below;

<style>

#educativehelper-sub-box {

padding: 0;

padding-bottom: 5px;

font-family: inherit;

display: block;

margin: 0;

border-radius: 1px;

border: 5px solid #FFD439;

text-align: center;

}

#educativehelper-sub-box p {

font-size: 15px;

color: #000;

line-height: 27px;

padding: 5px 10px 5px;

text-align: center;

width: 80%;

margin: 5px auto 20px;

border-bottom: 2px solid #ebebeb;

border-radius: 20px;

}

#educativehelper-sub-box .rssform {

padding: 0;

margin: 0 auto;

display: block;

}

#educativehelper-sub-box .rssform input {

padding: 8px;

margin: 20px auto 15px;

font-size: 13px;

color: #000;

text-align: center;

display: block;

font-family: inherit;

font-weight: normal;

width: 90%;

height: 38px;

text-transform: uppercase;

outline: none !important;

border: 1px solid #ebebeb;

border-radius: 1px;

background-color: #FCFCFC;

box-sizing: border-box !important;

}

#educativehelper-sub-box .rssform .button:hover {

opacity: 0.7;

-moz-opacity: 0.7;

-webkit-opacity: 0.7;

}

#educativehelper-sub-box .rssform .button {

background: #222;

color: white!important;

margin-top: 15px;

outline: none !important;

transition: all .3s ease-in-out;

padding: 5px 2px !important;

float: none;

text-transform: uppercase;

font-size: 18px;

font-weight: normal;

cursor: pointer;

}

#educativehelper-sub-box form {

margin-bottom: 10px !important;

}

</style>

<div id=”educativehelper-sub-box”>

<p><strong>Get All The Latest Updates</strong></p>

<img src=”ttps://www.educativehelper.com/wp-content/uploads/2019/03/educativehelper-down.gif” alt=”email updates”/>

<div class=”rssform”>

<form action=”http://feedburner.google.com/fb/a/mailverify” method=”post” target=”popupwindow” onsubmit=”window.open(‘http://feedburner.google.com/fb/a/mailverify?uri=EDUCATIVEHELPER’, ‘popupwindow’, ‘scrollbars=yes,width=550,height=520’);return true”>

<input type=”text” name=”email” placeholder=”Enter your email address…” vk_14173=”subscribed” vk_1e723=”subscribed” />

<input type=”hidden” value=”educativehelper” name=”uri” />

<input type=”hidden” name=”loc” value=”en_US” />

<input value=”Join Now” class=”button” type=”submit” />

</form>

</div> </div>

  • Finally click on Save and you are done.

Changes to make:

For subscribers to receive updates from you and not from Educative Helper, change the text EDUCATIVEHELPER as highlighted in CAPITAL LETTER in the above code snippet to your blog’s name.  By doing so, when users subscribe for updates via the subscription box, they shall be getting updates from your blog instead of from Educative Helper.

LEAVE A REPLY

Please enter your comment!
Please enter your name here