Simple Animated Email Subscription Widget for Blogger

0
117
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 interesting posts on your blog and want to draw attention to your email subscription form, simply follow the steps below;

  • Login to your Blogger dashboard.
  • Locate and click on Layout >>> Add a Gadget.
  • Locate and select HTML/JavaScript from the list of options for gadgets. Copy the code snippet below and paste into the box provided for HTML/JavaScript code.
<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="https://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> <script language="javascript">

document.write(unescape('%3C%61%20%68%72%65%66%3D%22%68%74%74%70%73%3A%2F%2F%77%77%77%2E%65%64%75%63%61%74%69%76%65%68%65%6C%70%65%72%2E%63%6F%6D%2F%32%30%31%39%2F%30%33%2F%31%30%2F%73%69%6D%70%6C%65%2D%61%6E%69%6D%61%74%65%64%2D%65%6D%61%69%6C%2D%73%75%62%73%63%72%69%70%74%69%6F%6E%2D%77%69%64%67%65%74%2D%66%6F%72%2D%62%6C%6F%67%67%65%72%2F%22%3E%47%65%74%20%54%68%69%73%20%57%69%64%67%65%74%3C%2F%61%3E'));

</script>       </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.

I do hope this was helpful. Please do share with friends and family using the share buttons below.