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.
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 Bloggerclick 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://lh3.googleusercontent.com/-7yyarwXztJE/WvAqv7MlfiI/AAAAAAAAE00/ved3KvWMbZMyYkUcypnNo7DWWy5PXGc7gCLcBGAs/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;
}
.td-newsletter button:hover{background-color:#444}
</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;
}
.td-newsletter button:hover{background-color:#f9bf61}
</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;
}
.td-newsletter button:hover{background-color: #222;}
</style>

Style 4


<div class="td-fix-index td-newsletter">
   <div class="td-fix-index">
      <div class="td-image-wrap">
        <img src="https://lh3.googleusercontent.com/-BYPMMXks708/WvAqvzFpsZI/AAAAAAAAE0w/eqPTTM2DE7AZaogiayTHKoefBnhoMtatgCLcBGAs/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;
}
.td-newsletter button:hover{background-color:#dd3737}
</style>

Style 5


<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;
}
.td-newsletter button:hover{background-color:#46a327}
</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 {
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;
}
.td-newsletter button:hover{background-color:#f3b700}
</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.
Next
This is the most recent post.
Previous
Older Post
Axact

Axact

Vestibulum bibendum felis sit amet dolor auctor molestie. In dignissim eget nibh id dapibus. Fusce et suscipit orci. Aliquam sit amet urna lorem. Duis eu imperdiet nunc, non imperdiet libero.

Post A Comment:

0 comments: