Create a cute subscription form
How to create a cute subscription form? Do you know how to create a cute subscription form? In this articles,I will show you on how to create a cute subscription form. You can put the cute subscription form into your blog.
Okay,now,to create the cute subscription form,you need a Feedburner account. If you already have the Feedburner account,register a feed fot your blog. To do that,you can read my article about how to register a feed for your blog using Feedburner by
clicking here.
Now,to create a cute subscription form,follow this simple steps!
1. Sing in to your Blogger account.
2. Then, go to Design > Page Element
3. Choose the HTML/ Javascript Widget.
4. Then,paste this following code:
<style>
.mbt-email{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPfQFMA26Qg6k8hy725PBY_HUbVHTgN9HLvlzOA0a0aoAHIY6J8EdZx8JnMpteXoazAbDCv_Lvw4fr4OwEsgo2q7KGvkhPzYlGY4Tcpm_w-9SqHvOuGMYM-N8DW7pHyXE95MaRLJshzT2h/s1600/email.png) no-repeat 0px 12px ;
width:300px;
padding:10px 0 0 55px;
float:left;
font-size:1.4em;
font-weight:bold;
margin:0 0 10px 0;
color:#686B6C;
}
.mbt-emailsubmit{
background:#9B9895;
cursor:pointer;
color:#fff;
border:none;
padding:3px;
text-shadow:0 -1px 1px rgba(0,0,0,0.25);
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
font:12px sans-serif;
}
.mbt-emailsubmit:hover{
background:#E98313;
}
.textarea{
padding:2px;
margin:6px 2px 6px 2px;
background:#f9f9f9;
border:1px solid #ccc;
resize:none;
box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1);
-moz-box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1);
-webkit-box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1); font-size:13px;
width:170px;
color:#666;}
</style>
<div class="mbt-email">
Subscribe via Email <form action="http://feedburner.google.com/fb/a/mailverify" id="feedform" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=TntByStc', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input gtbfieldid="3" class="textarea" name="email" onblur="if (this.value == "") {this.value = "Enter email address here";}" onfocus="if (this.value == "Enter email address here") {this.value = "";}" value="Enter email address here" type="text" />
<input type="hidden" value="TntByStc" name="uri"/><input type="hidden" name="loc" value="en_US"/>
<input class="mbt-emailsubmit" value="Submit" type="submit" />
</form>
</div>
Before you click the
Save button,change the bold and coloured text.
1. Replace the feed URL to your own blog URL.
2. Replace also the green text to your blog title.
Finished! These cute subscription form is now on your blog! Congratulations!
