Home blogger 3 Stylish Mail Subscription widget for blogger

3 Stylish Mail Subscription widget for blogger

April 12, 2020
Read
Blogger has an email subscription widget out of the box which can do its job but can't appeal users like a custom stylish email subscription widget for blogger.
Mail subscription/ list building is an important part of gaining loyal readers. So, it is very very important to implement a custom subscription widget and gain more subscribers.

Fortunately, adding one is very easy. You just have to copy the corresponding code accordingly to have your own custom stylish email subscription widget for blogger.

Why use a custom mail subscription widget?

  1.  Customizable by editing the code.
  2. Ability to have various other features besides email subscription
  3. Modern and eye-catchy
  4. better visibility and chance to get more subscriptions

Anyway, I have 3 awesome custom email subscription widget ready to be inserted in your blog.

Custom Mail Widget 1:

email subscription widget for blogger


Code:

<style type="text/css">
.swsbscbox{
    background:white;height:100%;
    padding:10px 5px 5px 5px;
    border:5px solid transparent;
    font-family: roboto;text-align:center;
    color:white;font-size:22px;}
.swsbsblbox{
    background:-webkit-gradient(linear,left top, left bottom,from(#0783c3),to(#024365));
    background:-o-linear-gradient(#0783c3,#024365);
    background:linear-gradient(#0783c3,#024365);
    height:40%; border-radius:8px !important;}
.title{
   color:white;font-weight:bold;
   font-size:32px;padding-top:10px;
}
.swsbscbox .boxinput{
    position: relative; top:-20px;
    background: white;color: #000;
    border: none; padding: 13px 0 13px 0;
    font-family: roboto; margin-bottom: 10px;
    outline: none;-webkit-transition: .3s;
    -o-transition: .3s;transition: .3s;
     width: 86%;text-align: center;
    border-radius: 4px;-webkit-box-shadow: 0 2px 3px 0 rgba(60,64,67,0.302), 0 1px 3px 1px rgba(60,64,67,0.149);
            box-shadow: 0 2px 3px 0 rgba(60,64,67,0.302), 0 1px 3px 1px rgba(60,64,67,0.149);}
.icon{
    -webkit-transition:-webkit-transform .5s ease-in;
    transition:-webkit-transform .5s ease-in;
    -o-transition:transform .5s ease-in;
    transition:transform .5s ease-in;
    transition:transform .5s ease-in, -webkit-transform .5s ease-in;}
.icon:hover{
    -webkit-transform:rotate(360deg);
        -ms-transform:rotate(360deg);
            transform:rotate(360deg);}
.subs-button{
    cursor: pointer;font-weight: 700;
    padding: 3% 10%;text-transform: none;
    font-size: 13px;border: 2px solid #024365;
    border-radius:8px;margin: 20px auto 0;
    text-align: center;outline: none;
    background: white;color: black;
    -webkit-box-shadow: 0 1px 2px 0 rgba(60,64,67,0.302), 0 1px 3px 1px rgba(60,64,67,0.149);
            box-shadow: 0 1px 2px 0 rgba(60,64,67,0.302), 0 1px 3px 1px rgba(60,64,67,0.149);
    -webkit-transition:background .5s ease-out;
    -o-transition:background .5s ease-out;
    transition:background .5s ease-out;}
.subs-button:hover{
    background:#024365; color: white;}
.subs-fb{
      padding:0px 15px 0px 15px;
      width:60px; height:60px;
      -webkit-transition:-webkit-transform .5s linear;
      transition:-webkit-transform .5s linear;
      -o-transition:transform .5s linear;
      transition:transform .5s linear;
      transition:transform .5s linear, -webkit-transform .5s linear;}
.subs-fb:hover{
    -webkit-transform:rotate(360deg);
        -ms-transform:rotate(360deg);
            transform:rotate(360deg);}
.subs-twt{
    -webkit-transition:-webkit-transform .5s linear;
    transition:-webkit-transform .5s linear;
    -o-transition:transform .5s linear;
    transition:transform .5s linear;
    transition:transform .5s linear, -webkit-transform .5s linear;
     width:60px; height:60px;
    padding:0px 15px 0px 15px;
}
.subs-twt:hover{
    -webkit-transform:rotate(360deg);
        -ms-transform:rotate(360deg);
            transform:rotate(360deg);
}
.social-main{
    width: 100%;display: table;
    table-layout: fixed; border-collapse: collapse;}
.fb-likes{
    border-right: 30px solid transparent;
    text-align: right;}
.twt-follow{
    border-left: 30px solid transparent;
    text-align: left;}
.fb-likes,.twt-follow{
     display: table-cell;
    word-wrap: break-word;}
</style>
<div class="swsbscbox">
<center>
</center>
<div class="swsbsblbox">
<div class="title">Newsletter</div><br><br>
<span class="substxt">Subscribe for new post notifications</span><br><br></div>
<center>
<form action="https://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('https://feedburner.google.com/fb/a/mailverify?uri=[BLOG URL]', 'popupwindow', 'scrollbars=yes,width=550,height=520'); return true" target="popupwindow"><input class="boxinput" name="EMAIL" placeholder="Your Email Address" type="email" required="">
<input class="subs-button" type="submit" value="Submit"><input name="uri" type="hidden" value="[BLOG URL]">
<input name="loc" type="hidden" value="en_US"></form><br>
<div class="subs-social">
    <img class="subs-fb" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_d1Eb6uDfnPM6ug9EhSOZo8WKvFmVdfLbtJG5WzyJks5mXppEZweJ9jUSkqrseQxWHmO82PieknRRN8utdtxz1erMbh5WjJ7fn6Tg7aoF7FZLAWGQfhPfzaVrnhPsmdEJ2gwCpSumF6M/s1600/fb.png">
<img class="subs-twt" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5h4nOjUH_rWyT4yyM2iXeR8By1Dh37YcAVO5FtQJq2yzjAKfoBgwZDoLiW5py6AOxtx9HxvaSiwXLwbxXFJcv9ME9On7fsNe60CXPvF2XAdoiejax6lw-s_eBvJ0Oo4_umT_h9NMXb2I/s1600/twt.png"></div>
</center>
<ul class='social-main'>
    <li class='fb-likes'>
     <div id="fb-root">
     </div>
     <script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.4";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
     </script>
     <div class="fb-like" data-href="[FACEBOOK PAGE URL]" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false">
     </div>
    </li>
    <li class='twt-follow'>
     <a href="[TWITTER URL]" class="twitter-follow-button" data-show-count="true" data-show-screen-name="false" data-dnt="true">Follow @[TWITTER USERNAME]</a>
     <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');
     </script>
    </li>
 </ul>
     </div>

Email subscription widget for blogger no 2:

email subscription widget for blogger no 2
Code:
<style type="text/css">
.sbscbox{
    background:-webkit-gradient(linear,left top, left bottom,from(#bdc2c6),to(#7b7f82));
    background:-o-linear-gradient(#bdc2c6,#7b7f82);
    background:linear-gradient(#bdc2c6,#7b7f82);
    padding:10px 5px 10px 5px;
    height:100%; color:black;
    border:5px solid transparent;
    border-radius:8px !important;
    text-align:center;font-size:22px;}
.title{
   color:#1f2023;font-weight:bold;
   font-size:32px;}
.sbscbox .swsinput{
    border: none;
    padding: 13px 0 13px 0;
    background: #33485d;
    color: #fff;width: 86%;
    text-align: center;
    font-family: roboto;
    margin-bottom: 10px;
    outline: none;-webkit-transition: .3s;-o-transition: .3s;transition: .3s;
    border-radius: 4px;
    -webkit-box-shadow: 0 2px 3px 0 rgba(60,64,67,0.302), 0 1px 3px 1px rgba(60,64,67,0.149);
            box-shadow: 0 2px 3px 0 rgba(60,64,67,0.302), 0 1px 3px 1px rgba(60,64,67,0.149);}
.swsinput::-webkit-input-placeholder{
    color:white;}
.swsinput::-moz-placeholder{
    color:white;}
.swsinput:-ms-input-placeholder{
    color:white;}
.swsinput::-ms-input-placeholder{
    color:white;}
.swsinput::placeholder{
    color:white;}
.icon{
    -webkit-transition:-webkit-transform .5s ease-in;
    transition:-webkit-transform .5s ease-in;
    -o-transition:transform .5s ease-in;
    transition:transform .5s ease-in;
    transition:transform .5s ease-in, -webkit-transform .5s ease-in;
}
.icon:hover{
    -webkit-transform:rotate(360deg);
        -ms-transform:rotate(360deg);
            transform:rotate(360deg);}
.subs-button{
    cursor: pointer;font-weight: 700;
    padding: 15px 45px;text-transform: none;
    font-size: 13px;border: none;
    border-radius:8px;-webkit-transition: all .3s;-o-transition: all .3s;transition: all .3s;
    margin: 20px auto 0;text-align: center;
    outline: none;background: #d03e31;
    color: #fff;
    -webkit-box-shadow: 0 1px 2px 0 rgba(60,64,67,0.302), 0 1px 3px 1px rgba(60,64,67,0.149);
            box-shadow: 0 1px 2px 0 rgba(60,64,67,0.302), 0 1px 3px 1px rgba(60,64,67,0.149);
    -webkit-transition:background .5s ease-out;
    -o-transition:background .5s ease-out;
    transition:background .5s ease-out;}
</style>
<div class="sbscbox">
<center>
</center>
<span class="title">Newsletter</span><br><br>
<span class="small">Subscribe for new post notifications</span><br><br>
<center>
<form action="https://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('https://feedburner.google.com/fb/a/mailverify?uri=[BLOG URL]', 'popupwindow', 'scrollbars=yes,width=500,height=500'); return true" target="popupwindow"><input class="swsinput" name="EMAIL" placeholder="Your Email Address" type="email" required="">
<input class="subs-button" type="submit" value="Submit"><input name="uri" type="hidden" value="[BLOG URL]">
<input name="loc" type="hidden" value="en_US"></form><br>
</center></div>

Email subscription widget for blogger 3:


Code:

<style type="text/css">
.sbscbox{
    background:white;
    padding:10px 5px 10px 5px;
    height:100%;
    border:5px dashed transparent;
    border-radius:8px !important;
    text-align:center;color:#8e8e8e;
    font-size:22px;}
.title{
   color:#1f2023;font-weight:bold;}
.sbscbox .swsinput{
    background: #B0C4DE;color: #fff;
    border: none; padding: 13px 0 13px 0;
    font-family: roboto;
    margin-bottom: 10px;
    transition: .3s; width: 86%;
    text-align: center;border-radius: 4px;}
.swsinput:focus{
     outline: none;}
.swsinput::placeholder{
    color:#2f4f4f;}
.icon{
    transition:transform .5s ease-in;}
.icon:hover{
    transform:rotate(360deg);}
.subs-button{
    cursor: pointer; font-weight: 700;
    padding: 15px 45px;text-transform: none;
    font-size: 13px;border: none;
    border-radius:8px;transition: all .3s;
    margin: 20px auto 0;text-align: center;
    outline: none;display: block;
    background: #d03e31; color: #fff;
    box-shadow: 0 1px 2px 0 rgba(60,64,67,0.302), 0 1px 3px 1px rgba(60,64,67,0.149);
    transition:background .5s ease-out;
    width:86%;}
.subs-fb{
      padding:0px 15px 0px 15px;
      transition:transform .5s ease-in;}
.subs-fb:hover{
    transform:rotate(360deg);}
.subs-twt{
    transition:transform .5s ease-in;
    padding:0px 15px 0px 15px;}
.subs-twt:hover{
    transform:rotate(360deg);
}
.social-main{
    width: 100%;display: table;
    table-layout: fixed; border-collapse: collapse;}
.fb-likes{
    border-right: 30px solid transparent;
    text-align: right;}
.twt-follow{
    border-left: 30px solid transparent;
    text-align: left;}
.fb-likes,.twt-follow{
    display: table-cell;
    word-wrap: break-word;
}
</style>
<div class="sbscbox">
<center>
<br><span ><img height="auto" class="icon" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimmUf8kb94u_hlRHAH3a0KQlfDec_z0F_BrIw4wF3dsSCkq42XmpRH56PrWjKbe8-6KIUt6cdOSrBlb9bjOdHvyPa6qd_zaC8iL_uIJp5q_B2R2TaeyfLEla__qWEU8cUYqZ2noBVTjr8/s1600/mail.png" width="150px"></span><br>
</center>
<span class="title">Newsletter</span><br><br>
<span class="small">Join for latest updates!</span><br><br>
<center>
<form action="https://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('https://feedburner.google.com/fb/a/mailverify?uri=[BLOG URI]', 'popupwindow', 'scrollbars=yes,width=500,height=500'); return true" target="popupwindow"><input class="swsinput" name="email" placeholder="Your Email Address" type="email" required="">
<input class="subs-button" type="submit" value="Submit"><input name="uri" type="hidden" value="[BLOG URI]">
<input name="loc" type="hidden" value="en_US"></form><br>
<div class="subs-social">
    <img class="subs-fb" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_d1Eb6uDfnPM6ug9EhSOZo8WKvFmVdfLbtJG5WzyJks5mXppEZweJ9jUSkqrseQxWHmO82PieknRRN8utdtxz1erMbh5WjJ7fn6Tg7aoF7FZLAWGQfhPfzaVrnhPsmdEJ2gwCpSumF6M/s1600/fb.png">
<img class="subs-twt" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5h4nOjUH_rWyT4yyM2iXeR8By1Dh37YcAVO5FtQJq2yzjAKfoBgwZDoLiW5py6AOxtx9HxvaSiwXLwbxXFJcv9ME9On7fsNe60CXPvF2XAdoiejax6lw-s_eBvJ0Oo4_umT_h9NMXb2I/s1600/twt.png"></div>
</center></div>
<ul class='social-main'>
    <li class='fb-likes'>
     <div id="fb-root">
     </div>
     <script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.4";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
     </script>
     <div class="fb-like" data-href="[FACEBOOK PAGE URL]" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false">
     </div>
    </li>
    <li class='twt-follow'>
     <a href="https://twitter.com/[TWITTER URL]" class="twitter-follow-button" data-show-count="true" data-show-screen-name="false" data-dnt="true">Follow @[TWITTER USERNAME]</a>
     <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');
     </script>
    </li>
 </ul>

Steps to setup Custom email subscription widget in Blogger


Setting up a custom subscription widget in a blogger is easy. Just follow these steps:
  1. First of all, choose your desired widget out of the above.
  2. Then copy your chosen widgets code in any text editor.
  3. There we have to edit some values to make the code workable with your blog.
  4. Find and replace these code with :
        [BLOG URL] =  your blog root domain name without .com or .blogspot etc . Ex; suhidsworld 
        [FACEBOOK PAGE URL] = your Facebook page link
        [TWITTER URL] = your twitter profile link
        [TWITTER USERNAME] = twitter username

Note: remove parenthesis [ ] too, those are to make those placeholders easily recognizable.

Now that you have made the code ready to be inserted to finish setup your custom email widget here are the steps to insert in your Blogspot blog.
  1. First go-to blogger dashboard> Layout and then from there click on add widget button form your desired layout position where you want to show your custom email subscription widget.
  2. In the newly opened window, you will have to copy and paste your previously edited subscription widget code.
  3. Hit save and that is all!
I hope following these steps you will be able to have your custom email subscription widget if your theme doesn't have one.
I will add more very soon. Also, I will look to make these already posted ones more beautiful and compatible with browsers. In the meantime, if you have any problem using these widgets or any other queries feel free to comment below.
And don't forget to share if we liked the post.
Tags :
What is your reaction to this post

No comments:

Subscribe to: Post Comments ( Atom )
Powered by Blogger.