HOT!Buy Ready-Made Authority WebsitesClick Here

Making Blogger Professional, Important Updates !!

Hello SoraBloggingTips Readers, If you are reading this, then we would like to appreciate your efforts for being supportive. We know its har...

How to Add Email Subscription Widget In Blogger


Email Subscription widget helps to improve blog followers and loyal readers, So today we will help you with this tutorial which is about, How to Add Email Subscription Widget In Blogger, This is a simple and elegant looking newsletter widget and has simple styling to match any design.
Lets move further and see How to Add Email Subscription Widget In Blogger. You can check a live preview of the Author Box widget by clicking the button below.

Adding The Widget 

The First thing you need to do is to login into your Blogger account and go to >> Layout >> Click add a gadget any where into your layout >> Add HTML/JAVASCRIPT widget and paste the below code in the blank space.
<style>
#soratemplates-sbox-v2 {
  padding: 0;
  padding-bottom: 5px;
  font-family: inherit;
  display: block;
  margin: 0;
  border-radius: 1px;
  border: 5px solid #FFD439;
}
#soratemplates-sbox-v2 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;
}
#soratemplates-sbox-v2 .rssform {
  padding: 0;
  margin: 0 auto;
  display: block;
}
#soratemplates-sbox-v2 .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;
}
#soratemplates-sbox-v2 .rssform .button:hover {
 opacity: 0.7;
    -moz-opacity: 0.7;
    -webkit-opacity: 0.7;
}
#soratemplates-sbox-v2 .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;
}
#soratemplates-sbox-v2 form {
  margin-bottom: 10px !important;
}
</style>
<div id="soratemplates-sbox-v2">
         
                 <p>Get All The Latest Updates Delivered Straight Into Your Inbox For Free!</p>
   <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=soratemplates', '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="soratemplates" name="uri">
            <input type="hidden" name="loc" value="en_US">
            <input value="Join Now" class="button" type="submit">
            </form>
            </div>
   

            </div>
Change the highlighted red text with your feedburner id. 

Conclusion

Congrats !! You have made it. now you have learned that How to Add Email Subscription Widget In Blogger. Visit your blog and check the awesome widget live in action, hope you liked this tutorial, if you enjoyed then please share it with your friends, we are working hard to develop more such awesome widgets please stay tuned with Us. अलविदा !! (Goodbye in Hindi).
How to Add Email Subscription Widget In Blogger How to Add Email Subscription Widget In Blogger Reviewed by SoraBloggingTips on January 03, 2017 Rating: 5

13 comments:

  1. Can you please give me subscription box of mailchamp like this

    ReplyDelete
  2. Do i have to edit it after paste the codes to my blog?

    ReplyDelete
  3. Helo, it goes fir soratemplates subscription instead of my blog

    ReplyDelete
  4. Phase how can I no my Feed burner id

    ReplyDelete
  5. WHILE TYPING email in the "type you email box" its coming all in capital letters

    ReplyDelete
    Replies
    1. it doesn't matter, its just for styling purpose.

      Delete
  6. How To Change The Border Yellow Color

    ReplyDelete
    Replies
    1. Replace the color code in this line.

      border: 5px solid #FFD439;

      Delete
  7. I have read all the comments and suggestions posted by the visitors for this article are very fine,We will wait for your next article so only.Thanks! entrar no hotmail

    ReplyDelete

Note : -We have stopped giving support to free version users, please read this article Making Blogger Professional, Important Updates !!. If You Are Facing Any Problem While Setting Up The Free Theme, Then We Recommend You To Read Our FAQ(Frequently Asked Question) Page.