How To Add Newsletter Widget For Blogger

Today, I am going to share a New Plugin that will help your to send post updates to your regular viewers.

Newsletter is the most advanced newsletter plugin. It manages everything from user subscriptions to email automatons. Newsletter is one of the way to get regular viewers. And It also help us to inform your latest post.

Features

• No Limit's.
• Automated Newsletters.
• Analyze.
• Customizable Themes.

Steps To Add Newsletter Widget to your Blogger

1. Go To Blogger, click Layout.
2. Click on 'Add a Gadget Link' .
3. Select 'HTML/JavaScript' from the list.
4. Copy and Paste the code into HTML/JavaScript widget.

Style 1

<div class="td-newsletter td-content-horiz-center td-fix-index">
   <div class="td-fix-index">
      <div class="td-image-wrap"><img src="https://demo.tagdiv.com/newspaper_crypto/wp-content/uploads/tdn_pic_2.png"></div>
      <div class="td-info-wrap">
            <h3 class="td-title">Subscribe to our newsletter</h3>
            <p class="td-descr">To be updated with all the latest news, offers and special announcements.</p>
         <form class="td-form" action="http://feedburner.google.com/fb/a/mailverify?uri=EasilyLearn" method="post" target="_blank">
            <div class="td-input-wrap"><input type="email" name="email" placeholder="Your email address"></div>
            <div class="td-btn-wrap"><button type="submit" name="subscribe">Subscribe</button></div>
         </form>
      </div>
   </div>
</div>
<style>
@import url('https://fonts.googleapis.com/css?family=Roboto');
.td-content-horiz-center {
  text-align: center;
}
@media (max-width: 1018px) and (min-width: 768px) {
.td-newsletter {
    border: 1px solid #eee;
}
}
.td-newsletter {
  border: 1px solid #eee;
}
.td-fix-index {
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
}
.td-image-wrap {
  background-color: #fff7c1;
  text-align: center;
  line-height: 0;
}
.td-info-wrap {
  padding: 30px 20px 38px;
}
.td-title {
  font-size: 22px!important;
  line-height: 2;
  font-weight: 900;
  margin-top: 0;
  margin-bottom: 13px;
  font-family: roboto,sans-serif;
  color: #111;
}
.td-descr {
  font-size: 14px;
  line-height: 1.5;
  color: #666;
  margin-top: 0;
  margin-bottom: 21px;
  font-family: Verdana,Geneva,sans-serif;
}
.td-newsletter .td-form {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.td-newsletter .td-input-wrap {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
}
.td-newsletter input {
  border-top-left-radius: 50px;
  border-bottom-left-radius: 50px;
  border-right: 0;
  padding-left: 12px;
  padding-right: 12px;
  height: 42px;
  font-size: 12px;
  -webkit-transition: all .2s ease-in-out;
  -moz-transition: all .2s ease-in-out;
  -o-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
  line-height: 21px;
  color: #444;
  border: 1px solid #e1e1e1;
  width: 100%;
  max-width: 100%;
  padding: 3px 9px;
  font: inherit;
  margin: 0;
}
.td-btn-wrap {
  min-width: 100px;
}
.td-newsletter button {
  border-top-right-radius: 50px;
  border-bottom-right-radius: 50px;
  background-color: #f3b700;
  -webkit-appearance: none;
  outline: 0;
  width: 100%;
  height: 42px;
  padding: 0 18px;
  color: #fff;
  border: 0;
  font-size: 12px;
  -webkit-transition: all .2s ease-in-out;
  -moz-transition: all .2s ease-in-out;
  -o-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
  overflow: visible;
  align-items: flex-start;
  text-align: center;
}</style>

Style 2

<div class="tdn-content-horiz-left td-fix-index td-newsletter">
   <div class="td-fix-index">
      <h3 class="td-title">Subscribe to our newsletter</h3>
      <p class="td-descr">To be updated with all the latest news, offers and special announcements.</p>
      <form class="td-form" action="http://feedburner.google.com/fb/a/mailverify?uri=EasilyLearn" method="post" target="_blank">
         <div class="td-input-wrap"><input type="email" name="email" placeholder="Your email address"></div>
         <div class="td-btn-wrap"><button type="submit" name="subscribe">Subscribe</button></div>
      </form>
   </div>
</div>
<style>
@import url('https://fonts.googleapis.com/css?family=Roboto');
.td-fix-index {
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
}
.td-title {
    margin-top: 0;
    margin-bottom: 13px;
    font-weight: 600;
    font-size: 22px;
    line-height: 30px;
    font-family: roboto,sans-serif;
    color: #111;
    margin: 6px 0;
}
.td-descr {
    font-size: 13px;
    line-height: 19px;
    color: #666;
    margin-top: 0;
    margin-bottom: 21px;
    font-family: Verdana,Geneva,sans-serif;
}
.td-newsletter .td-form {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.td-newsletter .td-input-wrap {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
}
.td-newsletter input {
    border-right: 0;
    padding-left: 12px;
    padding-right: 12px;
    height: 42px;
    font-size: 12px;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
    line-height: 21px;
    color: #444;
    border: 1px solid #e1e1e1;
    width: 100%;
    max-width: 100%;
    font: inherit;
    margin: 0;
    padding: 3px 9px;
}
.td-btn-wrap {
  min-width: 100px;
}
.td-newsletter button {
    font-size: 12px;
    -webkit-appearance: none;
    outline: 0;
    width: 100%;
    height: 42px;
    padding: 0 18px;
    background-color: #4db2ec;
    color: #fff;
    border: 0;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    text-transform: none;
    cursor: pointer;
    font: inherit;
    margin: 0;
    overflow: visible;
    transition: all .2s ease-in-out;
}
</style>

Style 3

<div class="tdn-content-horiz-left td-fix-index td-newsletter">
   <div class="td-fix-index">
      <h3 class="td-title">Subscribe to our newsletter</h3>
      <p class="td-descr">To be updated with all the latest news, offers and special announcements.</p>
      <form class="td-form" action="http://feedburner.google.com/fb/a/mailverify?uri=EasilyLearn" method="post" target="_blank">
         <div class="td-input-wrap"><input type="email" name="email" placeholder="Your email address"></div>
         <div class="td-btn-wrap"><button type="submit" name="subscribe">Subscribe</button></div>
      </form>
   </div>
</div>
<style>
@import url('https://fonts.googleapis.com/css?family=Roboto');
.td-newsletter {
    background-color: #f7f7f7!important;
    padding-top: 20px!important;
    padding-right: 20px!important;
    padding-bottom: 25px!important;
    padding-left: 20px!important;
    border-color: #eaeaea!important;
    border-style: solid!important;
    border-width: 0!important;
    position: relative;
}
.td-fix-index {
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
}
.td-title {
    margin-top: 0;
    margin-bottom: 13px;
    font-weight: 600;
    font-size: 22px;
    line-height: 30px;
    font-family: roboto,sans-serif;
    color: #111;
    margin: 6px 0;
}
.td-descr {
    font-size: 13px;
    line-height: 19px;
    color: #666;
    margin-top: 0;
    margin-bottom: 21px;
    font-family: Verdana,Geneva,sans-serif;
}
.td-newsletter .td-form {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}
.td-newsletter .td-input-wrap {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  margin-bottom: 13px;
}
.td-newsletter input {
    padding-left: 12px;
    padding-right: 12px;
    height: 42px;
    font-size: 12px;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
    line-height: 21px;
    color: #444;
    border: 1px solid #e1e1e1;
    width: 100%;
    max-width: 100%;
    font: inherit;
    margin: 0;
    padding: 3px 9px;
}
.td-btn-wrap {
  min-width: 100px;
}
.td-newsletter button {
    font-size: 12px;
    -webkit-appearance: none;
    outline: 0;
    width: 100%;
    height: 42px;
    padding: 0 18px;
    background-color: #dd3737;
    color: #fff;
    border: 0;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    text-transform: none;
    cursor: pointer;
    font: inherit;
    margin: 0;
    overflow: visible;
    transition: all .2s ease-in-out;
}
</style>

Style 4

<div class="td-fix-index td-newsletter">
   <div class="td-fix-index">
      <div class="td-image-wrap">
        <img src="https://demo.tagdiv.com/newspaper_crypto/wp-content/uploads/tdn_pic_1.png"/>
      </div>
      <h3 class="td-title">Subscribe to our newsletter</h3>
      <p class="td-descr">To be updated with all the latest news, offers and special announcements.</p>
      <form class="td-form" action="http://feedburner.google.com/fb/a/mailverify?uri=EasilyLearn" method="post" target="_blank">
         <div class="td-input-wrap"><input type="email" name="email" placeholder="Your email address"></div>
         <div class="td-btn-wrap"><button type="submit" name="subscribe">Subscribe</button></div>
      </form>
   </div>
</div>
<style>
@import url('https://fonts.googleapis.com/css?family=Roboto');
.td-fix-index {
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
}
.td-image-wrap {
    background-color: #c3ecff;
    margin-bottom: 23px;
    text-align: center;
    line-height: 0;
}
.td-title {
    font-size: 36px;
    line-height: 1.2;
    font-weight: 300;
    text-transform: uppercase;
    margin-top: 0;
    margin-bottom: 13px;
    font-family: roboto,sans-serif;
    color: #111;
    margin: 6px 0;
}
.td-descr {
    font-size: 15px;
    line-height: 1.4;
    color: #666;
    margin-top: 0;
    margin-bottom: 21px;
    font-family: Verdana,Geneva,sans-serif;
}
.td-newsletter .td-form {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.td-newsletter .td-input-wrap {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
}
.td-newsletter input {
    text-transform: uppercase;
    border-right: 0;
    padding-left: 12px;
    padding-right: 12px;
    height: 42px;
    font-size: 12px;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
    line-height: 21px;
    color: #444;
    border: 1px solid #e1e1e1;
    width: 100%;
    max-width: 100%;
    font: inherit;
    margin: 0;
    padding: 3px 9px;
}
.td-btn-wrap {
  min-width: 100px;
}
.td-newsletter button {
    text-transform: uppercase;
    outline: 0;
    width: 100%;
    height: 42px;
    padding: 0 18px;
    background-color: #4db2ec;
    color: #fff;
    border: 0;
-webkit-appearance: button;
    cursor: pointer;
    font-size: 12px;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
    font: inherit;
    margin: 0;
    font-family: roboto,sans-serif;
}
</style>

Style 6

<div class="td-fix-index td-newsletter">
   <div class="td-fix-index td-info-wrap">
      <h3 class="td-title">Subscribe to our newsletter</h3>
      <p class="td-descr">To be updated with all the latest news, offers and special announcements.</p>
      <form class="td-form" action="http://feedburner.google.com/fb/a/mailverify?uri=EasilyLearn" method="post" target="_blank">
         <div class="td-input-wrap"><input type="email" name="email" placeholder="Your email address"></div>
         <div class="td-btn-wrap"><button type="submit" name="subscribe">Subscribe</button></div>
      </form>
   </div>
</div>
<style>
@import url('https://fonts.googleapis.com/css?family=Roboto');
.td-newsletter {
    border-style: dashed!important;
    border: 1px solid #eee;
    border-width: 2px 2px 2px 2px!important;
}
.td-fix-index {
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
}
.td-info-wrap {
    padding: 30px 20px 38px;
}
.td-title {
    font-size: 20px;
    line-height: 1.2;
    font-weight: 600;
    text-transform: uppercase;
    margin-top: 0;
    margin-bottom: 13px;
    font-family: roboto,sans-serif;
    color: #111;
    margin: 6px 0;
}
.td-descr {
    font-size: 13px;
    line-height: 19px;
    color: #666;
    margin-top: 0;
    margin-bottom: 21px;
    font-family: Verdana,Geneva,sans-serif;
}
.td-newsletter .td-form {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.td-newsletter .td-input-wrap {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
}
.td-newsletter input {
    text-transform: uppercase;
    border-right: 0;
    padding-left: 12px;
    padding-right: 12px;
    height: 42px;
    font-size: 12px;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
    line-height: 21px;
    color: #444;
    border: 1px solid #e1e1e1;
    width: 100%;
    max-width: 100%;
    font: inherit;
    margin: 0;
    padding: 3px 9px;
}
.td-btn-wrap {
  min-width: 100px;
}
.td-newsletter button {
    text-transform: uppercase;
    outline: 0;
    width: 100%;
    height: 42px;
    padding: 0 18px;
    background-color: #5ec43c;
    color: #fff;
    border: 0;
   -webkit-appearance: button;
    cursor: pointer;
    font-size: 12px;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
    font: inherit;
    margin: 0;
}
</style>

Style 7

<div class="td-fix-index td-newsletter">
   <div class="td-fix-index td-info-wrap">
      <h3 class="td-title">Subscribe to our newsletter</h3>
      <p class="td-descr">To be updated with all the latest news, offers and special announcements.</p>
      <form class="td-form" action="http://feedburner.google.com/fb/a/mailverify?uri=EasilyLearn" method="post" target="_blank">
         <div class="td-input-wrap"><input type="email" name="email" placeholder="Your email address"></div>
         <div class="td-btn-wrap"><button type="submit" name="subscribe">Subscribe</button></div>
      </form>
   </div>
</div>
<style>
@import url('https://fonts.googleapis.com/css?family=Roboto');
.td-newsletter {
padding-top: 10px!important;
    padding-right: 10px!important;
    background-color: #222;
    padding-bottom: 10px!important;
    padding-left: 10px!important;
}
.td-fix-index {
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
}
.td-info-wrap {
    padding: 30px 20px 38px;
}
.td-title {
    font-size: 32px;
    line-height: 1.1;
    font-weight: 900;
    text-transform: uppercase;
    margin-top: 0;
    margin-bottom: 13px;
    font-family: Open\ Sans;
    color: #fff;
    margin: 6px 0;
}
.td-descr {
    font-size: 15px;
    line-height: 1.4;
    color: #9e9e9e;
    margin-top: 0;
    margin-bottom: 21px;
    font-family: Verdana,Geneva,sans-serif;
}
.td-newsletter .td-form {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}
.td-newsletter .td-input-wrap {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  margin-bottom: 13px;
}
.td-newsletter input {
    text-transform: uppercase;
    font-family: Open\ Sans;
    font-weight: 700;
    font-size: 13px;
    background-color: #333;
    border-color: #4a4a4a;
    color: #fff;
    height: 42px;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
    padding-left: 12px;
    padding-right: 12px;
    line-height: 21px;
    border: 1px solid #e1e1e1;
    width: 100%;
    max-width: 100%;
    padding: 3px 9px;
    font: inherit;
    margin: 0;
    overflow: visible;
}
.td-btn-wrap {
  min-width: 100px;
}
.td-newsletter button {
font-family: Open\ sans-serif;
    font-size: 13px!important;
    font-weight: 700;
    text-transform: uppercase;
    background-color: #00649e;
    outline: 0;
    width: 100%;
    height: 42px;
    padding: 0 18px;
    color: #fff;
    border: 0;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
    -webkit-appearance: button;
    cursor: pointer;
    font: inherit;
    margin: 0;
    overflow: visible;
}
</style>

Save the widget.

That’s it! you are done.
So above is all about Newsletter Widget. With the above method, you can easily get more subscribers very easily. So I Hope you like this, do share with others too. Leave a comment below if you have any related queries with this.

03:20