Another Cute Subscription Form For Blogger Below Every Post

After a couple of days i managed time to post.Today i will be publishing one more cute subscription box to all post below your content.This cute subscription box can be seen on many wordPress Blogs.This very attractive box and can drive more subscribers for your blog.It requires a little bit customization which is very easy.My next tutorial maybe on "search box with Mic option" like the one Google uses on its search.

Steps To Add Cute Subscription Box

1.Login to Blogger>Dashboard>Edit Html
2.Check "Expand Widgets Templates".
3.Find this code,

]]></b:skin>

4.Just before the above code paste this code,

#container_sub{padding:20px;text-align:center;margin-top:10px}#container_sub
h1{color:#333;font-family:Impact,fantasy;font-size:30px}#container_sub
input{background: -moz-linear-gradient(center top, #EEE, #CCC) repeat scroll 0 0 transparent;font-size:16px;padding:19px;text-shadow:1px 1px 0 #FFF;width:300px}#container_sub
.submit{background: -moz-linear-gradient(center top, #369A18, #205F0D) repeat scroll 0 0 transparent;font-weight:bold;margin-left:20px;text-shadow:0 1px 2px #000;width:140px}#container_sub .submit:hover,
#container_sub .submit:active{background: -moz-linear-gradient(center top, #46B725, #205F0D) repeat scroll 0 0 transparent}
#sign-in {
position: absolute;
top: -1px;
right: 8px;
background: #8DC469;
border: 1px solid #AFE57A;
border-bottom-color: #497A18;
border-right-color: #305010;
box-shadow: rgba(0,0,0,0.15) 3px 1px 2px;
border-width: 0 1px 1px;
-moz-border-radius-bottomleft: 5px;
-webkit-border-bottom-left-radius: 5px;
-o-border-bottom-left-radius: 5px;
-ms-border-bottom-left-radius: 5px;
-khtml-border-bottom-left-radius: 5px;
border-bottom-left-radius: 5px;
-moz-border-radius-bottomright: 5px;
-webkit-border-bottom-right-radius: 5px;
-o-border-bottom-right-radius: 5px;
-ms-border-bottom-right-radius: 5px;
-khtml-border-bottom-right-radius: 5px;
border-bottom-right-radius: 5px;
padding: 5px 5px 5px;
font-size: 1.25em;
color: white;
text-shadow: #407120 1px 1px 1px;
z-index: 9999;
padding-left: 10px;
}

.facebook-login, .twitter-login
{
display: inline-block;
background: url(http://www.blogager.com/wp-content/uploads/2012/01/fb-logins.png) center left repeat-x;
color: white;
height: 21px;
text-indent: -9999px;
width: 90px;
line-height: 21px;
padding: 0;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
-o-border-radius: 2px;
-ms-border-radius: 2px;
-khtml-border-radius: 2px;
border-radius: 2px;
font-size: 14px;
font-family: "lucida grande","tahoma","arial","helvetica";
font-weight: bold;
margin: 0 6px;
}
.twitter-login {
background: #ADD5DB url(http://www.blogager.com/wp-content/uploads/2012/01/twitter-logins.png) top left repeat-x;
background-image: url(http://www.blogager.com/wp-content/uploads/2012/01/twitter-logins.png);
background-repeat-x: repeat;
background-repeat-y: no-repeat;
background-attachment: initial;
background-position-x: 0%;
background-position-y: 0%;
background-origin: initial;
background-clip: initial;
background-color: #ADD5DB;
width: 85px;
border-color: #9DC3D3;
border-top-color: #9DC3D3;
border-right-color: #9DC3D3;
border-bottom-color: #9DC3D3;
border-left-color: #9DC3D3;
color: #3C5C66;
text-shadow: 1px 1px 2px white; }

5.Now find this code,

<data:post.body/>

6.Just below the above code paste this Html code,

<div
id="container_sub"><h1>Subscribe To Get FREE Updates</h1><form
action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=Feed Name Here', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><center> <input
value="Enter Your Email Address" onfocus="if (this.value == 'Enter Your Email Address') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Enter Your Email Address';}" name="email" type="text" size="30"> <input
name="uri" value="Feed Name Here" type="hidden"> <input
value="en_US" name="loc" type="hidden"> <input
class="submit" value="Subscribe" type="submit"></center></form></div>
<a href="http://sharethetricks.blogspot.com/2012/01/another-cute-subscription-form-for.html ">Get this Widget</a>

Make These Changes,

• Replace all the "Feed Name Here" with your Feed Name
• You can also change "Subscribe to get free Updates" as you desire.

Credits:

All the rights of styling this widget is strictly reserved by ShareTheTricks.Any copycat caught for copying will be banned to share the resources with him.

Hurrah! At last this post ended.Please Subscribe and like us below!

Peace :)