Blogger Responsive Subscribe Widget above Footer

Today we will see a new type of subscription widget which i will not call it actually a widget as it is directly injected in the HTML of blogger. This is a nice looking and responsive widget. As most of bloggers prefer responsive widgets we are sharing this to you. This widget uses Feedburner for subscription.

Installing Responsive Subscribe Widget above Footer

1. 1. Go To Blogger > Template
   2. Click on “Edit HTML”
   3. Add Script inside of Header tag i.e. before ‘</head>’

      <link href='//netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.min.css' rel='stylesheet'/>

   4. Next Search for

      ]]></b:skin>

   5. Paste the following code above it.

      /*** Tech Kshetra subscribe footer CSS Starts - www.www.techkshetra.com ***/ 
      #subscribe-footer .container{width:1100px;margin:0 auto}
      #subscribe-footer{width:100%;height:100px;background:#3498db}
      #subscribe-footer i{font-size:90px;margin-top:5px;float:left;margin-right:20px;color:#2980b9}
      #subscribe-footer i:hover{
      color:white;
      -webkit-transition: all .8s;
      -moz-transition: all .8s;
      -ms-transition: all .8s;
      -o-transition: all .8s;
      transition: all .8s;
      }
      #subscribe-footer .left{float:left;text-align:left;width:50%}
      #subscribe-footer h3{color:#fff;margin-bottom:2px;font-weight:600}
      #subscribe-footer p{margin:0;line-height:20px;color:#fff;font-weight:300}
      #subscribe-footer form{float:right;margin:28px}
      #subscribe-footer form .inptfld{font-family:Open Sans;outline:none;border:none;font-size:15px;padding:10px;border-radius:3px;width:250px}
      #subscribe-footer form .subscribe-footerbtn{font-famiy:open sans;outline:none;border:none;padding:10px;border-radius:3px;color:#fff;background:#34495e;cursor:pointer;margin-left:10px}
      #subscribe-footer form .subscribe-footerbtn:hover{
      background:#233140;
      -webkit-transition: all .6s;
      -moz-transition: all .6s;
      -ms-transition: all .6s;
      -o-transition: all .6s;
      transition: all .6s;
      }
      /*** Tech Kshetra subscribe footer CSS Ends - www.www.techkshetra.com ***/
      /*** Tech Kshetra subscribe footer responsive Design Starts - www.www.techkshetra.com ***/
      @media screen and (max-width : 1200px) {
      #subscribe-footer .container {width: 1050px; }
      }
      @media screen and (max-width : 1100px) {
      #subscribe-footer .left {width: 52%;}
      #subscribe-footer .container {width: 950px;}
      }
      @media screen and (max-width : 1000px) {
      #subscribe-footer .left {width:55%;}
      #subscribe-footer form .inptfld {width:168px;}
      #subscribe-footer .container{width: 850px;}
      }
      @media screen and (max-width : 900px) {
      #subscribe-footer .left {width:12%;}
      #subscribe-footer p, #subscribe-footer h3 {display:none;}
      #subscribe-footer form .inptfld {width: 458px;}
      #subscribe-footer .container {width: 750px;}
      }
      @media screen and (max-width : 800px) {
      #subscribe-footer form .inptfld {width: 368px;}
      #subscribe-footer .container{width:650px}
      }
      @media screen and (max-width : 700px) {
      #subscribe-footer form .inptfld {width: 268px;}
      #subscribe-footer .container {width: 550px;}
      }
      @media screen and (max-width : 600px) {
      #subscribe-footer form .inptfld {width: 168px;}
      #subscribe-footer .container {width: 450px;}
      }
      @media screen and (max-width : 500px) {
      #subscribe-footer form .inptfld {width: 145px;}
      #subscribe-footer i {display:none!important;}
      #subscribe-footer .container {width: 350px;}
      }
      @media screen and (max-width : 400px) {
      #subscribe-footer {display:none!important;}
      #subscribe-footer .container {width: 250px;}
      }
      /*** Tech Kshetra subscribe footer responsive Design Ends - www.www.techkshetra.com ***/

1. 1. Changes to be made.

      Change the width of the container according to your blog ‘Content-wrapper’ mine is 1100px.

      #subscribe-footer .container{width:1100px;margin:0 auto}

      Change ‘1100px‘ to whatever your need ‘XXXX px‘. (Don’t forget to add ‘px’ at last’)

   2. Now Search for

      <div id='footer'>

      or whatever tag used for footer in your blogger template. (This can vary depending on your template mine is given above.)

1. And Paste the following code above it.

   <div id='subscribe-footer'>
   <div class='container'>
   <div class='left'>
   <i class='icon-envelope-alt'></i>
   <h3>Subscribe to our newsletter!</h3>
   <p>Love to read our articles? Sign up now to get fresh content about blogger, SEO, make money, templates directly to your inbox.</p>
   </div>
   <div id='right'>
   <form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&#39;http://feedburner.google.com/fb/a/mailverify?uri=Techkshetra &#39;, &#39;popupwindow&#39;, &#39;scrollbars=yes,width=550,height=520&#39;);return true' target='popupwindow'>
   <input class='inptfld' name='email' placeholder=' Your Email' style='font-family:Open Sans' type='text'/>
   <input name='uri' type='hidden' value='Techkshetra'/>
   <input name='loc' type='hidden' value='en_US'/>
   <input class='subscribe-footerbtn' type='submit' value='Subscribe Now!'/>
   </form>
   </div>
   </div>
   </div>

2. Changes to be made.

   • ‘Subscribe to our newsletter!’ – Change to what you want to show in headings of widget. Refer the image of the post to see what changes to be made.
   • ‘Love to read our articles? Sign up now to get fresh content about blogger, SEO, make money, templates directly to your inbox.’ – Change to what you want to show in Content of widget. Refer the image of the post to see what changes to be made.
   • Replace Techkshetra with your feedburner FEED TITLE. You get these values by going to your Feedburner account -> Publicize -> Email Subscriptions.
3. Thats it! You have installed the widget :)

Got any Questions?

This is a pretty easy installation, hope you have installed it correctly without any problems. If you found any errors while installing or found errors in codes feel free to drop it in comments section or mail us at info@www.techkshetra.com , we will reply to you as soon as possible. Enjoy :) And do share with your friends.