How to add a subscription form in blogger

Social Media Widgets and Plugins

I have already shared many tutorials on RSS Subscription forms such as Subscription Email Form and Subscription Feed Widget and today we have yet another but extremely beautiful and easy to edit subscription form dozed with new CSS effects. This widget will keep your sidebar neat and clean and will surely attract visitors to subscribe.

How To Add this Subscription Form To Blogger

1. Go To Blogger > Design > Page Elements 
2. Choose HTML JavaScript Widget 
3. Paste the following code in it, 

<style>
.mbt-email{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhS6NaB4T_wkfR973TIxaFPfP2We6aOQrdyWhi0jnJRMqag_w4gw-_VXv7GtEeyEk-7Q4UZ3b8uBOh0rxDqU0ZctoQBpFzZom8QmyWusCyZD1BLLf5V7PAWerz7n8srrg0OtKhmAedpGKNC/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/Mybloggertutorials', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input gtbfieldid="3" class="textarea" name="email" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Enter email address here&quot;;}" onfocus="if (this.value == &quot;Enter email address here&quot;) {this.value = &quot;&quot;;}" value="Enter email address here" type="text" />
<input type="hidden" value="Mybloggertutorialsmbt" name="uri"/><input type="hidden" name="loc" value="en_US"/>
<input class="mbt-emailsubmit" value="Submit" type="submit" />
</form>
</div>

Now make these changes,

Now replace http://feedburner.google.com/mybloggertutorials with your Feedburner Email Feed link. You can get it by visiting your feedburner account then navigate to Publicize and then to Email Subscriptions.
Replace Mybloggertutorialsmbt with your feed title. It appear at the end of your feed link. In my case it is http://feedburner.google.com/fb/a/mailverify?uri=Mybloggertutorialsmbt

Don't miss: Floating Social Media Share Bar For Blogger
Save your widget and view your blog to see it showcasing live! :)

Need Help?

Do let me know if you needed any help in customizing the widget in the comments section below, i would be gald to help you out.

About Author

Hi! I am Sajad Metlo, SEO expert and web developer. The purpose of creating this blog is to provide highly professional tips, top quality Tutorials, Practical SEO tips and methods to earn online.

Subscribe via email

Receive Quality Tutorials Straight in your Inbox by submitting your Email ID below.

How to add a subscription form in blogger

4/ 5

Anonymous

Anonymous 6/12/2019 comments