Google + Style Subscription Box Widget For Blogger

Here is another cool subscription box for Blogger. You can call it a Google + style or a Chrome style but believe me it really doesn't matters what you say because all it matters is what your visitors say. So here is this quick and easy tutorial :

Subscribe Updates, Its FREE!

Go To Blogger > Layout > Add A Widget > HTML/JavaScript > Paste below code :

<div class="subscribe_outer">
<div class="subscribe_wrapper">
<p>Subscribe Updates, Its FREE!</p>
<div id="btntEmailsub">
<form class="btntEmailform" target="popupwindow" onsubmit="window.openundefined'http://feedburner.google.com/fb/a/mailverify?uri=rnhckr', 'popupwindow', 'scrollbars=yes,width=600,height=540');return true" method="post" action="http://feedburner.google.com/fb/a/mailverify">
<input type="hidden" value="rnhckr" name="uri">
<input type="hidden" value="en_US" name="loc">
<input class="emailText" type="text" value="Enter your email..." onfocus="if undefinedthis.value == " enter="" your="" email...")="" {this.value="" }"="" onblur="if undefinedthis.value == " ")="" ;}"="" onclick="value=''"name="email">
<input class="emailButton" type="submit" value="Signup Now!" title="">
</form>
</div>
</div>
</div>
<style>

.subscribe_outer {
background: urlundefined"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTp2SxdRX37gmKbDNd2JnFkJl7TEeEQqdiO0cSipife55Yw6qk4NSDnehQaASAW_DQh886yZl-DZ2El-o_rOkFJfzGTS0QZ8lVpfbJok-OfpU9pq_IB7utJJaHs5Pq5WmzELj9sdAECRE/s1600/color-chronicl.gif") repeat scroll 0 0 transparent;
margin: 0 -10px;
padding: 5px 0;
}
.subscribe_wrapper {
background: urlundefined"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgi3P8J_h2glPjNsfbctIJ3rFxbPCMzzi4e2gP7uwdkF2upAl2U6Y8f9dTAH4jnZLsvO1Cz-rOhznVw9ds0OTDkPCPAHKdeseb9ViFR5t-3RRDjozjpeBl9b5bVANUs5zieOpB2Mu-jptM/s1600/pattern-chronicl.png") repeat scroll 0 0 #333333;
color: #CCCCCC;
font-size: 15px;
font-weight:bold;
line-height: 20px;
padding: 10px 50px 18px 38px;
}
.emailButton {
background:#249334;
border: 0 none;
border-radius: 4px 4px 4px 4px;
color: #FFFFFF;
cursor: pointer;
font-weight: bold;
padding: 10px 40px;
text-shadow: 1px 1px 0 rgbaundefined0, 0, 0, 0.4);
width: 100%;
}
.emailText {
background: urlundefined"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2uYoYiYGnZuyI4KDZhjF1oMAXNf6z42nKIjE_HIARra3L24omkeGgaV5aITKVgn0mqZyFtdl9khnfMp2XyuscN49lcTcR8v3kAROpKV6Dqd71N0gJSh3t4LSPIMS7I7LC1nBT0kBpvso/s1600/email.png") no-repeat scroll 10px center #FFFFFF;
border: 0 none;
border-radius: 4px 4px 4px 4px;
box-shadow: 0 0 3px rgbaundefined0, 0, 0, 0.05) inset;
color: #444444;
padding: 10px 40px;
margin: 0 0 15px;
outline: none;
text-decoration: none;
width: 70%;
}
input, textarea {
font-family:'Lora',georgia,serif;
}
.subscribe_wrapper {
color: #CCCCCC;
font-size: 14px;
line-height: 20px;
}
.emailButton {
width: 300px;
}
.emailButton {
background: -moz-linear-gradientundefinedcenter top , #30A146 0%, #249334 100%) repeat scroll 0 0 transparent;
border: 0 none;
border-radius: 4px 4px 4px 4px;
color: #FFFFFF;
cursor: pointer;
font-weight: bold;
padding: 10px 40px;
text-shadow: 1px 1px 0 rgbaundefined0, 0, 0, 0.4);
width: 100%;
}
</style>

Now in above code change rnhckr with your feed id.

For example if your feed url is feeds.feedburner.com/rnhckr 

Tip: To Check Live demo copy and Paste the given below code into our Live Html editor