How To Add Newsletter Email Subscription Box In Blogger

In The Blogging World,  The Most Important Need Of Every Blog Owner Is It's Traffic Because Without Traffic, Your Blog Is Nothing And Cannot Do Anything. There Are Thousands Of Things To Boost Up Your Traffic On Your Blog. But Today, I Will Give Your My First Widget, Which Is Email Subscription Widget Which Is Used To Subscribe To Feedburner, There Is Many Widgets With Many Styles Which Can Be Used For Blog Owner To Use, And When The Visitor Click On "Sign Up", It Will Go To Subscribe Feed. Email Subscribers Play Important Role For A Blog. They Help Your Blog In Getting High Number Of Page Views. Not Only In Traffic, It Will Also Help You In Getting Approvals From Advertising Websites e.g. Google Adsense, Buysellads etc. It Means That It Also Check The Subscribers Of Your Feed. So, This Is A Clean, Simple Widget For Blogger And The Steps Of Adding Is Also Very Simple You Just Have To Copy And Paste A Code And Than Your Widget Will Display.

Newsletter Email Subscription Box

As I Described Above That This Is A Clean, Simple And Attractive Widget For Blogger Which Will Help You Increase Your Email Subscribers Through Feedburner. The Widget Is Build With Simple Web Languages That Is HTML5 And CSS3. After Building It, We Have Tested On Many Websites And Browser To Check Whether It Is Working Fine Or Not. So It Works On All Browser. It Contains Of A Heading, A Simple Paragraph And Two Inputs, Name And Email Box To Enter Their Name And Email Address. Then In The Last, There Is A Beautiful CSS3 "Sign Up Now!" Box, Which Will Subscribe Your Visitor Through Feedburner. The Widget Is More Than 500 Pixels Width. So, The Best Place For Adding It To Blogger, Is Below Every Post Because If Once They Have Red Post, They Can Sign Up Through Their, But Now, We Will Add It On The Sidebar Of Your Blog, But If You Want Below Post, We Have Also Code Below. Before You Apply This Widget On Your Blog, You Must Have A Look By Pressing The Button Below:-

Adding Email Subscription Box Widget On Sidebar In Blogger

  • Go To >> Your Blog >> Layout >> Add A Gagdet.
  • Choose "HTML/Javascript".
  • After Choosing, Paste The Following Code Inside:-

<div id='ftutorials-emailsubsocial'>              
 <div class='heading'>             
   Sign Up in Seconds     
     <p>Sign up with your email address to receive hot updates straight in your inbox.</p>              <div class='emailsub'>          
     <form action='' method='post' target="popupwindow" onsubmit="'', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">  
              <input type='text' name='name' placeholder='Your Name' />           
     <input type='text' name='email' placeholder='Your Email' />      
          <input type="hidden" value="Flockest" name="uri"/>   
             <input type="hidden" name="loc" value="en_US"/>            
             <input value="Sign Up Now!" class="button" type="submit" />  
             </form><div id='credit'>  
    Designed By
 <a href='' id='credits'>Flockest</a> 
  <style type='text/css'> 
     #ftutorials-emailsubsocial {       width: 300px;       height: 350px;       border: 1px solid #ddd;         border-radius: 5px 5px 0px 0px;      } 
     #ftutorials-emailsubsocial .heading { padding: 15px 25px; line-height: 35px; font-size: 26px; font-weight: 600; font-family: open sans; color: rgb(170, 170, 170); text-align: center; text-shadow: 0px 1px rgba(255, 255, 255, 0.75); background: none repeat scroll 0% 0% rgb(247, 247, 247);      }      #ftutorials-emailsubsocial .heading:before {       content: ""; position: absolute; width: 302px; height: 8px; top: 15px; left: 8px; background: linear-gradient(to right, rgb(196, 225, 127), rgb(196, 225, 127) 12.5%, rgb(247, 253, 202) 12.5%, rgb(247, 253, 202) 25%, rgb(254, 207, 113) 25%, rgb(254, 207, 113) 37.5%, rgb(240, 119, 108) 37.5%, rgb(240, 119, 108) 50%, rgb(219, 157, 190) 50%, rgb(219, 157, 190) 62.5%, rgb(196, 156, 222) 62.5%, rgb(196, 156, 222) 75%, rgb(102, 154, 225) 75%, rgb(102, 154, 225) 87.5%, rgb(98, 194, 228) 87.5%, rgb(98, 194, 228)) repeat scroll 0% 0% rgb(196, 225, 127); border-radius: 5px 5px 0px 0px;    }  
  #ftutorials-emailsubsocial p {     font-family: open sans;     font-size: 13px;     color: rgb(170, 170, 170);     line-height: 25px;     padding: 10px 20px 0 20px;     margin: 0;text-align:center;    }    #ftutorials-emailsubsocial .emailsub {     padding: 0px 20px 10px 20px;    } 
   #ftutorials-emailsubsocial .emailsub input {     color: rgb(170, 170, 170);     padding: 10px;     margin-top: 10px;     font-size: 15px;     font-family: open sans;     width: 100%;     border: 1px solid #ccc;     border-bottom: 2px solid #ccc;     border-radius: 5px;     transition:border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;    }    
#ftutorials-emailsubsocial .emailsub input:focus {     border-color:#F4836A;     outline: none;     box-shadow: 0 0 2px 1px #F4836A;    }    
#ftutorials-emailsubsocial .emailsub .button {     background: #0091d6;     color: white!important;     border:none;     outline: none;     border-bottom: 3px solid #0072A6;     transition:background .4s linear;     width: 90%;     margin-right: 5%;     margin-left: 5%;     font-weight: 600;    }  
  #ftutorials-emailsubsocial .emailsub .button:hover{     background: #0072A6;    }
#credit { margin: 0 auto!important; margin-top: -10px!important; text-align:center; }    
 <script src=''/>

  •  After Adding The Above Code Replace "Sign up with your email address to receive hot updates straight in your inbox." With Your Message.
  •  Now Replace Flockest With Your Feedburner Feed Username.
  •  Please Do Not Remove Credit Link. 
  • And Don't Remove Any Thing, Otherwise It Will Not Work.
  • Click On "Save Template".
  •  You've Done!. 

Gourav Mahajan

Gourav Mahajan

Powered by Blogger.