17 October 2017

Simple Animated Email Subscription Widget for Blogger


subscription box

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;

                                                                 VIEW DEMO
  • 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>
#easytins-sub-box {
  padding: 0;
  padding-bottom: 5px;
  font-family: inherit;
  display: block;
  margin: 0;
  border-radius: 1px;
  border: 5px solid #FFD439;
    text-align: center;
}
#easytins-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;
}
#easytins-sub-box .rssform {
  padding: 0;
  margin: 0 auto;
  display: block;
}
#easytins-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;
}
#easytins-sub-box .rssform .button:hover {
 opacity: 0.7;
    -moz-opacity: 0.7;
    -webkit-opacity: 0.7;
}
#easytins-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;
}
#easytins-sub-box form {
  margin-bottom: 10px !important;
}
</style>
<div id="easytins-sub-box">
        
                 <p>Subscribe To Get All The Latest Updates!</p>
 <img src="https://3.bp.blogspot.com/-z8MtenWhQv0/WeJCBIeL7AI/AAAAAAAAD8o/7Vbf5lHJFeQ2g23B3YELAVt5jU2EE9LjgCLcBGAs/s1600/easytins-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=easytins', '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="easytins" 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:

In order for subscribers ti receive updates from you and not from EasyTins, change the text easytins as highlighted in RED 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 EasyTins.

Share:

0 comments:

Post a Comment

IMPORTANT INFORMATION

Please do bear in mind that any Comment left on this Blog that is in no way related to the post under which it is being left, will not be accepted and so won’t be published. For any such unrelated question and enquiries, please use the Contact Us section to get in touch with us and we promise to get back to you 30 minutes after we get your message.

Popular Posts

Like us on Facebook
Follow us on Twitter
Recommend us on Google Plus
Subscribe me on RSS