4 Stylish Feedburner Subscription box for Blogger

Posted on June 09, 2014 by 
4 Stylish Feedburner Subscription box for Blogger
An attractive subscription box can increase your email subscribers rapidly. And there is a lot of developers out there, who makes beautiful Feedburner subscription box widget for you. And as a Blogger fan I try to develop some Blogger widget for everyone, and try to make those widget unique, attractive and smart looking. That's reason here I presenting to you 4 different colored Feedburner subscription box widget, these widget's color can be match to your Blogger template, also comes up with eye catchy frames and effect enriched subscribe button, made with HTML, CSS and CSS3. Choose what color you want and add to your Blogger blog.

Hot Orange Feedburner subscription box widget


feedburner subscription box widget for Blogger

Codes-

<style>/*crawlist.net CSS starts*/
.ks-oranged{
    border: 1px solid #F93;
    border-radius:0px 0px 0px 0px;
    -webkit-transition: all 1.5s ease;
    -moz-transition: all 1.5s ease;
    -o-transition: all 1.5s ease;
    -ms-transition: all 1.5s ease;
    transition: all 1.5s ease;
    background: #fff;
    width:200px;
    height:200px;
    margin:auto;}
.ks-oranged:hover {
    border: 1px solid #F93;
    border-radius:20px 20px 20px 20px;
    -webkit-transition: all 1.5s ease;
    -moz-transition: all 1.5s ease;
    -o-transition: all 1.5s ease;
    -ms-transition: all 1.5s ease;
    transition: all 1.5s ease;
    background: #fff;
    -moz-box-shadow:1px 1px 10px 1px rgba(255,136,1,1);
    -webkit-box-shadow:1px 1px 10px 1px rgba(255,136,1,1);
    box-shadow:1px 1px 10px 1px rgba(255,136,1,1);}

.ks-button {
    background-color: #999;
    background-image: -webkit-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,0%,.1));
    background-image:    -moz-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,0%,.1));
    background-image:     -ms-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,0%,.1));
    background-image:      -o-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,0%,.1));
    background-image:         linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,0%,.1));
    border: none;
    border-radius: .5em;
    box-shadow: inset 0 0 0 1px hsla(0,0%,0%,.25),
                inset 0 2px 0 hsla(0,0%,100%,.1),
                inset 0 1.2em 0 hsla(0,0%,100%,.1),
                inset 0 -.2em 0 hsla(0,0%,100%,.1),
                inset 0 -.25em 0 hsla(0,0%,0%,.5),
                0 .25em .25em hsla(0,0%,0%,.1);
    color: #444;
    cursor: pointer;
    display: inline-block;
    font-family: sans-serif;
    font-size: 1em;
    font-weight: bold;
    line-height: 1.5;
    margin: 0 .5em 1em;
    padding: .5em 1.5em .75em;
    position: relative;
    text-decoration: none;
    text-shadow: 0 1px 1px hsla(0,0%,100%,.25);
    vertical-align: middle;
    font-size: 1em;
    background-color:#F93;  
}

.ks-button:hover {
    outline: none;
}
.ks-button:hover,
.ks-button:focus {
    box-shadow: inset 0 0 0 1px hsla(0,0%,0%,.25),
                inset 0 2px 0 hsla(0,0%,100%,.1),
                inset 0 1.2em 0 hsla(0,0%,100%,.1),
                inset 0 -.2em 0 hsla(0,0%,100%,.1),
                inset 0 -.25em 0 hsla(0,0%,0%,.5),
                inset 0 0 0 3em hsla(0,0%,100%,.2),
                0 .25em .25em hsla(0,0%,0%,.1);
              
}
.ks-button:active {
    box-shadow: inset 0 0 0 1px hsla(0,0%,0%,.25),
                inset 0 2px 0 hsla(0,0%,100%,.1),
                inset 0 1.2em 0 hsla(0,0%,100%,.1),
                inset 0 0 0 3em hsla(0,0%,100%,.2),
                inset 0 .25em .5em hsla(0,0%,0%,.05),
                0 -1px 1px hsla(0,0%,0%,.1),
                0 1px 1px hsla(0,0%,100%,.25);
    margin-top: .25em;
    outline: none;
    padding-bottom: .5em;
}

.ks-oranged h4{font:16px "Segoe UI"; font-weight:bold;margin-top:25px;}

.ks-subboxinput{
width:80px;
height:18px;

padding:8px 40px 8px 10px;border:1px solid #ddd;
-webkit-border-radius:4px;-moz-border-radius:4px;
border-radius:4px;font-family:"Segoe UI";
font-style:italic;
-webkit-box-shadow:1px 1px 2px #dfdfdf;
-moz-box-shadow:1px 1px 2px #dfdfdf;
box-shadow:1px 1px 2px #dfdfdf;
font-size:14px;color:#666;
}

.ks-subboxemailform, .ks-subboxinput{
width:96% !important;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
height:auto;
margin-bottom:10px;
margin-top:7px;
}/*crawlist.net CSS ends*/
</style>
<div class="ks-oranged" align="center"> <!--crawlist.net widget starts-->
<h4 style='text-align:center;'>Get Free Updates in your Inbox</h4>
<form action='http://feedburner.google.com/fb/a/mailverify' class='ks-subboxemailform' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=FeedId&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=500&apos;);return true' target='popupwindow'>
<input name='uri' type='hidden' value='crawlist'/>
<input name='loc' type='hidden' value='en_US'/>
<input class='ks-subboxinput' name='email' onblur='if (this.value == "") {this.value = "Just enter your Email";}' onfocus='if (this.value == "Just enter your Email") {this.value = ""}' type='text' value='Just enter your Email'/>
 <input class='ks-button' title='' type='submit' value='Submit'/>
</form><!--crawlist.net widget ends--></div>



Deep Blue Feedburner subscription box widget


feedburner subscription box widget for Blogger

Codes-

<style>/*crawlist.net CSS starts*/
.ks-bulee {
    border: 1px solid #09F;
    border-radius:0px 0px 0px 0px;
    -webkit-transition: all 1.5s ease;
    -moz-transition: all 1.5s ease;
    -o-transition: all 1.5s ease;
    -ms-transition: all 1.5s ease;
    transition: all 1.5s ease;
    background: #fff;
    width:200px;
    height:200px;
    margin:auto;}
.ks-bulee:hover {
    border: 1px solid #09F;
    border-radius:20px 20px 20px 20px;
    -webkit-transition: all 1.5s ease;
    -moz-transition: all 1.5s ease;
    -o-transition: all 1.5s ease;
    -ms-transition: all 1.5s ease;
    transition: all 1.5s ease;
    background: #fff;
    -moz-box-shadow:1px 1px 10px 1px rgba(10,1,255,1);
    -webkit-box-shadow:1px 1px 10px 1px rgba(10,1,255,1);
    box-shadow:1px 1px 10px 1px rgba(10,1,255,1);}

.ks-button {
    background-color: #999;
    background-image: -webkit-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,0%,.1));
    background-image:    -moz-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,0%,.1));
    background-image:     -ms-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,0%,.1));
    background-image:      -o-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,0%,.1));
    background-image:         linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,0%,.1));
    border: none;
    border-radius: .5em;
    box-shadow: inset 0 0 0 1px hsla(0,0%,0%,.25),
                inset 0 2px 0 hsla(0,0%,100%,.1),
                inset 0 1.2em 0 hsla(0,0%,100%,.1),
                inset 0 -.2em 0 hsla(0,0%,100%,.1),
                inset 0 -.25em 0 hsla(0,0%,0%,.5),
                0 .25em .25em hsla(0,0%,0%,.1);
    color: #444;
    cursor: pointer;
    display: inline-block;
    font-family: sans-serif;
    font-size: 1em;
    font-weight: bold;
    line-height: 1.5;
    margin: 0 .5em 1em;
    padding: .5em 1.5em .75em;
    position: relative;
    text-decoration: none;
    text-shadow: 0 1px 1px hsla(0,0%,100%,.25);
    vertical-align: middle;
    font-size: 1em;
    background-color: #09F;  
}

.ks-button:hover {
    outline: none;
}
.ks-button:hover,
.ks-button:focus {
    box-shadow: inset 0 0 0 1px hsla(0,0%,0%,.25),
                inset 0 2px 0 hsla(0,0%,100%,.1),
                inset 0 1.2em 0 hsla(0,0%,100%,.1),
                inset 0 -.2em 0 hsla(0,0%,100%,.1),
                inset 0 -.25em 0 hsla(0,0%,0%,.5),
                inset 0 0 0 3em hsla(0,0%,100%,.2),
                0 .25em .25em hsla(0,0%,0%,.1);
              
}
.ks-button:active {
    box-shadow: inset 0 0 0 1px hsla(0,0%,0%,.25),
                inset 0 2px 0 hsla(0,0%,100%,.1),
                inset 0 1.2em 0 hsla(0,0%,100%,.1),
                inset 0 0 0 3em hsla(0,0%,100%,.2),
                inset 0 .25em .5em hsla(0,0%,0%,.05),
                0 -1px 1px hsla(0,0%,0%,.1),
                0 1px 1px hsla(0,0%,100%,.25);
    margin-top: .25em;
    outline: none;
    padding-bottom: .5em;
}

.ks-bulee h4{font:16px "Segoe UI"; font-weight:bold;margin-top:25px;}

.ks-subboxinput{
width:80px;
height:18px;

padding:8px 40px 8px 10px;border:1px solid #ddd;
-webkit-border-radius:4px;-moz-border-radius:4px;
border-radius:4px;font-family:"Segoe UI";
font-style:italic;
-webkit-box-shadow:1px 1px 2px #dfdfdf;
-moz-box-shadow:1px 1px 2px #dfdfdf;
box-shadow:1px 1px 2px #dfdfdf;
font-size:14px;color:#666;
}

.ks-subboxemailform, .ks-subboxinput{
width:96% !important;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
height:auto;
margin-bottom:10px;margin-top:7px;
}/*crawlist.net CSS ends*/
</style>
<div class="ks-bulee" align="center"><!--crawlist.net widget starts-->
<h4 style='text-align:center;'>Get Free Updates in your Inbox</h4>
<form action='http://feedburner.google.com/fb/a/mailverify' class='ks-subboxemailform' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=FeedId&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=500&apos;);return true' target='popupwindow'>
<input name='uri' type='hidden' value='crawlist'/>
<input name='loc' type='hidden' value='en_US'/>
<input class='ks-subboxinput' name='email' onblur='if (this.value == "") {this.value = "Just enter your Email";}' onfocus='if (this.value == "Just enter your Email") {this.value = ""}' type='text' value='Just enter your Email'/>
 <input class='ks-button' title='' type='submit' value='Submit'/>
</form><!--crawlist.net widget ends--></div>


Girly pink Feedburner subscription box widget


feedburner subscription box widget for Blogger
Codes:

<style>/*crawlist.net CSS starts*/
.ks-pinko {
    border: 1px solid #F0F;
    border-radius:0px 0px 0px 0px;
    -webkit-transition: all 1.5s ease;
    -moz-transition: all 1.5s ease;
    -o-transition: all 1.5s ease;
    -ms-transition: all 1.5s ease;
    transition: all 1.5s ease;
    background: #fff;
    width:200px;
    height:200px;
    margin:auto;}
.ks-pinko:hover {
    border: 1px solid #F0F;
    border-radius:20px 20px 20px 20px;
    -webkit-transition: all 1.5s ease;
    -moz-transition: all 1.5s ease;
    -o-transition: all 1.5s ease;
    -ms-transition: all 1.5s ease;
    transition: all 1.5s ease;
    background: #fff;
    -moz-box-shadow:1px 1px 10px 1px rgba(200,0,120,1);
    -webkit-box-shadow:1px 1px 10px 1px rgba(200,0,120,1);
    box-shadow:1px 1px 10px 1px rgba(200,0,120,1);}

.ks-button {
    background-color: #999;
    background-image: -webkit-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,0%,.1));
    background-image:    -moz-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,0%,.1));
    background-image:     -ms-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,0%,.1));
    background-image:      -o-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,0%,.1));
    background-image:         linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,0%,.1));
    border: none;
    border-radius: .5em;
    box-shadow: inset 0 0 0 1px hsla(0,0%,0%,.25),
                inset 0 2px 0 hsla(0,0%,100%,.1),
                inset 0 1.2em 0 hsla(0,0%,100%,.1),
                inset 0 -.2em 0 hsla(0,0%,100%,.1),
                inset 0 -.25em 0 hsla(0,0%,0%,.5),
                0 .25em .25em hsla(0,0%,0%,.1);
    color: #444;
    cursor: pointer;
    display: inline-block;
    font-family: sans-serif;
    font-size: 1em;
    font-weight: bold;
    line-height: 1.5;
    margin: 0 .5em 1em;
    padding: .5em 1.5em .75em;
    position: relative;
    text-decoration: none;
    text-shadow: 0 1px 1px hsla(0,0%,100%,.25);
    vertical-align: middle;
    font-size: 1em;
    background-color: #f6c6ff;  
}

.ks-button:hover {
    outline: none;
}
.ks-button:hover,
.ks-button:focus {
    box-shadow: inset 0 0 0 1px hsla(0,0%,0%,.25),
                inset 0 2px 0 hsla(0,0%,100%,.1),
                inset 0 1.2em 0 hsla(0,0%,100%,.1),
                inset 0 -.2em 0 hsla(0,0%,100%,.1),
                inset 0 -.25em 0 hsla(0,0%,0%,.5),
                inset 0 0 0 3em hsla(0,0%,100%,.2),
                0 .25em .25em hsla(0,0%,0%,.1);
              
}
.ks-button:active {
    box-shadow: inset 0 0 0 1px hsla(0,0%,0%,.25),
                inset 0 2px 0 hsla(0,0%,100%,.1),
                inset 0 1.2em 0 hsla(0,0%,100%,.1),
                inset 0 0 0 3em hsla(0,0%,100%,.2),
                inset 0 .25em .5em hsla(0,0%,0%,.05),
                0 -1px 1px hsla(0,0%,0%,.1),
                0 1px 1px hsla(0,0%,100%,.25);
    margin-top: .25em;
    outline: none;
    padding-bottom: .5em;
}

.ks-pinko h4{font:16px "Segoe UI"; font-weight:bold;margin-top:25px;}

.ks-subboxinput{
width:80px;
height:18px;

padding:8px 40px 8px 10px;border:1px solid #ddd;
-webkit-border-radius:4px;-moz-border-radius:4px;
border-radius:4px;font-family:"Segoe UI";
font-style:italic;
-webkit-box-shadow:1px 1px 2px #dfdfdf;
-moz-box-shadow:1px 1px 2px #dfdfdf;
box-shadow:1px 1px 2px #dfdfdf;
font-size:14px;color:#666;
}

.ks-subboxemailform, .ks-subboxinput{
width:96% !important;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
height:auto;
margin-bottom:10px;margin-top:7px;
}/*crawlist.net CSS ends*/
</style>
<div class="ks-pinko" align="center">  <!--crawlist.net widget starts-->
<h4 style='text-align:center;'>Get Free Updates in your Inbox</h4>
<form action='http://feedburner.google.com/fb/a/mailverify' class='ks-subboxemailform' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=FeedId&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=500&apos;);return true' target='popupwindow'>
<input name='uri' type='hidden' value='crawlist'/>
<input name='loc' type='hidden' value='en_US'/>
<input class='ks-subboxinput' name='email' onblur='if (this.value == "") {this.value = "Just enter your Email";}' onfocus='if (this.value == "Just enter your Email") {this.value = ""}' type='text' value='Just enter your Email'/>
 <input class='ks-button' title='' type='submit' value='Submit'/>
</form> <!--crawlist.net widget ends--></div>


Elegant Gray Feedburner subscription box widget


feedburner subscription box widget for Blogger

Codes-

<style>/*crawlist.net CSS starts*/
.ks-silver{
    border: 1px solid #d5d5d5;
    border-radius:0px 0px 0px 0px;
    -webkit-transition: all 1.5s ease;
    -moz-transition: all 1.5s ease;
    -o-transition: all 1.5s ease;
    -ms-transition: all 1.5s ease;
    transition: all 1.5s ease;
    background: #fff;
    width:200px;
    height:200px;
    margin:auto;}
.ks-silver:hover {
    border: 1px solid #d5d5d5;
    border-radius:20px 20px 20px 20px;
    -webkit-transition: all 1.5s ease;
    -moz-transition: all 1.5s ease;
    -o-transition: all 1.5s ease;
    -ms-transition: all 1.5s ease;
    transition: all 1.5s ease;
    background: #fff;
    -moz-box-shadow:1px 1px 10px 1px rgba(0,1,1,0.20);
    -webkit-box-shadow:1px 1px 10px 1px rgba(0,1,1,0.20);
    box-shadow:1px 1px 10px 1px rgba(0,1,1,0.20);}

.ks-button {
    background-color: #999;
    background-image: -webkit-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,0%,.1));
    background-image:    -moz-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,0%,.1));
    background-image:     -ms-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,0%,.1));
    background-image:      -o-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,0%,.1));
    background-image:         linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,0%,.1));
    border: none;
    border-radius: .5em;
    box-shadow: inset 0 0 0 1px hsla(0,0%,0%,.25),
                inset 0 2px 0 hsla(0,0%,100%,.1),
                inset 0 1.2em 0 hsla(0,0%,100%,.1),
                inset 0 -.2em 0 hsla(0,0%,100%,.1),
                inset 0 -.25em 0 hsla(0,0%,0%,.5),
                0 .25em .25em hsla(0,0%,0%,.1);
    color: #444;
    cursor: pointer;
    display: inline-block;
    font-family: sans-serif;
    font-size: 1em;
    font-weight: bold;
    line-height: 1.5;
    margin: 0 .5em 1em;
    padding: .5em 1.5em .75em;
    position: relative;
    text-decoration: none;
    text-shadow: 0 1px 1px hsla(0,0%,100%,.25);
    vertical-align: middle;
    font-size: 1em;
    background-color:#CCC;  
}

.ks-button:hover {
    outline: none;
}
.ks-button:hover,
.ks-button:focus {
    box-shadow: inset 0 0 0 1px hsla(0,0%,0%,.25),
                inset 0 2px 0 hsla(0,0%,100%,.1),
                inset 0 1.2em 0 hsla(0,0%,100%,.1),
                inset 0 -.2em 0 hsla(0,0%,100%,.1),
                inset 0 -.25em 0 hsla(0,0%,0%,.5),
                inset 0 0 0 3em hsla(0,0%,100%,.2),
                0 .25em .25em hsla(0,0%,0%,.1);
              
}
.ks-button:active {
    box-shadow: inset 0 0 0 1px hsla(0,0%,0%,.25),
                inset 0 2px 0 hsla(0,0%,100%,.1),
                inset 0 1.2em 0 hsla(0,0%,100%,.1),
                inset 0 0 0 3em hsla(0,0%,100%,.2),
                inset 0 .25em .5em hsla(0,0%,0%,.05),
                0 -1px 1px hsla(0,0%,0%,.1),
                0 1px 1px hsla(0,0%,100%,.25);
    margin-top: .25em;
    outline: none;
    padding-bottom: .5em;
}

.ks-silver h4{font:16px "Segoe UI"; font-weight:bold;margin-top:25px;}

.ks-subboxinput{
width:80px;
height:18px;

padding:8px 40px 8px 10px;border:1px solid #ddd;
-webkit-border-radius:4px;-moz-border-radius:4px;
border-radius:4px;font-family:"Segoe UI";
font-style:italic;
-webkit-box-shadow:1px 1px 2px #dfdfdf;
-moz-box-shadow:1px 1px 2px #dfdfdf;
box-shadow:1px 1px 2px #dfdfdf;
font-size:14px;color:#666;
}

.ks-subboxemailform, .ks-subboxinput{
width:96% !important;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
height:auto;
margin-bottom:10px;margin-top:7px;
}/*crawlist.net CSS ends*/
</style>
<div class="ks-silver" align="center"> <!--crawlist.net widget starts-->
<h4 style='text-align:center;'>Get Free Updates in your Inbox</h4>
<form action='http://feedburner.google.com/fb/a/mailverify' class='ks-subboxemailform' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=FeedId&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=500&apos;);return true' target='popupwindow'>
<input name='uri' type='hidden' value='crawlist'/>
<input name='loc' type='hidden' value='en_US'/>
<input class='ks-subboxinput' name='email' onblur='if (this.value == "") {this.value = "Just enter your Email";}' onfocus='if (this.value == "Just enter your Email") {this.value = ""}' type='text' value='Just enter your Email'/>
 <input class='ks-button' title='' type='submit' value='Submit'/>
</form><!--crawlist.net widget ends--></div>

How to add in Blogger:
  • Log in to your Blogger, select your Blog, 
  • Go to 'Layout' option, Select 'Add a gadget', 
  • From pop up window select 'Html/javascript' 
  • And copy following code and paste in content box

How to configure:
In every widget's code there is a word FeedId (red colored) just get your Feedburner Id and replace FeedId with your Feedburner Id. Save gadget then save template. And see your stylish Feedburner subscription box in live action.

Any question, any recommendation about these widget don't forget to mention. New widget will be published soon do stay subscribed :)