Subscription from is a method to subscribe the news updates from your website . In this way send the updates to the users or viewers . It is a great way to touch with the website viewer. It help to make more social connection with your website's user.
How to design the subscription form in CSS? In this tutorial , you can understand the method to build the subscription Form in CSS and HTML and easily set up the subscription widget in Blogger template .
2. Click on Layout option .
3. Select the Add a Gadget option .
4. Select HTML / Java Script Widget .
5. Now copy and paste the below HTML code in the HTML / Java script widget box.
NOTE: You need to place the Feed id in the html code in the place of "Enter Feed id ".
6. Now paste the below CSS code above the
It look like the above subscription form . Any modification can be changed by any body in the CSS code section. You can change the Color , background color , width and font size etc.
How to design the subscription form in CSS? In this tutorial , you can understand the method to build the subscription Form in CSS and HTML and easily set up the subscription widget in Blogger template .
How to add the Subscription Widget in Blogger
1. Go to Blogger Template .2. Click on Layout option .
3. Select the Add a Gadget option .
4. Select HTML / Java Script Widget .
5. Now copy and paste the below HTML code in the HTML / Java script widget box.
<div class="subscribe_outer">
<div class="subscribe_wrapper">
<h5>Subscribe Via Email</h5>
<p class="stext">Subscribe to our newsletter to get all the latest updates to your inbox..!</p>
<div id="btntEmailsub">
<form target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=Enter Feed Id', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" method="post" action="http://feedburner.google.com/fb/a/mailverify">
<input type="hidden" value="Enter Feed ID" name="uri" />
<input type="hidden" value="en_US" name="loc" />
<input type="text" class="email-input" value="Enter your email..." onfocus="if (this.value == "Enter your email...") {this.value = ""}" onblur="if (this.value == "") {this.value = "Enter your email...";}" name="email" />
<input type="submit" type="email-submit" value="Signup Now!" title="" class="emailButton" /><br/>
</form>
</div>
</div>
</div>
NOTE: You need to place the Feed id in the html code in the place of "Enter Feed id ".
6. Now paste the below CSS code above the
</head> in Blogger Template.
<style>
.subscribe_outer { width : 350px; background-color : #8587ED ; }
.subscribe_wrapper h5 { font-size : 14px ; color: #49B4BA; padding-top: 35px; text-align:center; font-weight:bold;}
.subscribe_wrapper p { text-align : center ; color : #ffffff; padding :20px; }
.subscribe_wrapper { }
.btntEmailsub { background-color :#2B2824 ; border: 2px solid green; }
.email-input { width:80% ; padding:5px; margin-left:10%; margin-right:10%; }
.email-submit { width:60% ; padding:5px; margin-left:20%; margin-right:20%; margin-top:10px; margin-bottom:20px; }
</style>
Subscribe Via Email
Subscribe to our newsletter to get all the latest updates to your inbox..!
It look like the above subscription form . Any modification can be changed by any body in the CSS code section. You can change the Color , background color , width and font size etc.