Best Professional Subscription Box For Blogger

February 4, 2015

The best way to deliver fresh content to your visitors is by using the email subscription widget. Yes, I know the default RSS Subscription box in blogger is very ugly. Subscription box should be very eye-catching and professional so that user don’t hesitate to share their email address with you.

So I’ll be sharing a simple but professional looking subscription box for blogger blogs. Installation of this subscription box is very simple, No need to play around with your blogger template. We just to copy and paste a piece of code. So without wasting any time lets get started.

Best Professional Subscription Box For Blogger

Steps to add subscription box in blogger

- - Go to Blogger – Layout – Add a Widget
  - Now scroll down and choose Html/Javascript Widget
  - Copy the below code and paste it in Content and In Title write “Subscribe for updates” or something like that.

<style>
#bgt-subscribe-box .header{
background: none ;
color: #a333333;
font-size: 28px;
line-height: 36px;
padding: 15px 25px;
font-weight: 700;
font-family: open sans;
text-align: center;
}
#bgt-subscribe-box {
width:auto;
height:auto;
background:#ffffff;
}
#bgt-subscribe-box p {
font-family:'Open Sans';
font-size:13px;
color:#888;
line-height:20px;
padding:10px 20px 0 20px;
margin:0;
}
#bgt-subscribe-box .bgt-emailfield {
padding:0px 20px 10px;
}
#bgt-subscribe-box .bgt-emailfield input {
background:#fff;
color:#bbb;
padding:10px;
margin-top:10px;
font-size:13px;
font-family:'Open Sans';
width:91%;
border:0;
border:1px solid #ccc;
transition:all 0.4s ease-in-out;
}
#bgt-subscribe-box .bgt-emailfield input:focus {
outline:none;
border:1px solid #d9d9d9;
color:#888;
}
#bgt-subscribe-box .bgt-emailfield .bgt-submitbutton {
background:#0098d3;
color:#fff!important;
text-transform:uppercase;
font-weight:bold;
border:none;
outline:none;
width:100%;
cursor:pointer;
transition:all 0.4s ease-in-out;
}
#bgt-subscribe-box .bgt-emailfield .bgt-submitbutton:active {
outline:none;
border:none;
background:#444;
color:#fff;
}
#bgt-subscribe-box .bgt-emailfield .bgt-submitbutton:hover{
background:#333333;
color:#fff;
}
</style>
<div id='bgt-subscribe-box'>
             <div class='bgt-emailfield'>
              <form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=geeksgyaan/jnnk', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'>
               <input type='text' name='name' onblur='if (this.value == "") {this.value = "Enter Your Name";}' onfocus='if (this.value == "Enter Your Name") {this.value = "";}' value='Enter Your Name'/>
               <input type='text' name='email' onblur='if (this.value == "") {this.value = "Enter Your Email Address";}' onfocus='if (this.value == "Enter Your Email Address") {this.value = "";}' value='Enter Your Email Address'/>
<input name='uri' type='hidden' value='geeksgyaan/jnnk'/>
<input name='loc' type='hidden' value='en_US'/>
                <input class='bgt-submitbutton' type='submit' value='Subscribe Now!'/>

              </form>
</div>
<br />
<br />
</div>

Replace geeksgyaan/jnnk with your Feedburner username.
Click save and you are ready to go.

#Customization
To change the background color replace #ffffff with your desired background color css code. Similarly to change the color of subscribe button replace #0298D3 with desired button color CSS code.

We have totally used HTML and CSS to design the subscription box. So if you have any problem regarding it just comment below.