Thursday, September 24, 2020
Home Blogging Tips & Tweaks Simple Animated Email Subscription Widget for Blogger

Simple Animated Email Subscription Widget for Blogger

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.

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular

List of All JavaScript Arithmetic Operators With Examples

JavaScript offers several operators to help us work with numbers. All these operators are binary operators, which means they operate on two operands. The operands...

How to Find a Website’s RSS Feed’s URL

Having access to the RSS feed of a website gives you the opportunity to stay up-to-date on everything that website publishes. Whether that’s a...

Laravel: String data, right truncated: 1406 Data too long for column (SOLVED)

I was working on a project today when i ran into the error message "String data, right truncated: 1406 Data too long for column...

How to Enable or Disable Chrome’s Autofill on Android Devices

Storing your login details and other information in Chrome and/or your Google Account isn’t as secure as using an encrypted password manager, but it’s...

Recent Comments