Responsive Subscription Form Widget For Blogger

This time I am having subscription form widget for blogger for those who are blogger user. I founded this subscription form widget on blogger template and template was no so much beautiful but this widget was un-parallel so I extracted the code and transformed it and made some changes in the code and shared it with you in this article.

Usage of subscription form widget in blogger:

Basically subscription form widget in blogger is used to get subscribers. Using this anyone can subscribe to your blog newsletters using their email and whenever you publish a new post they will get notification of that post and come to your site to view or read that post.

This is very good functionality that is given to the blogger users it is also present in WordPress but they have to use different kind of plugins for that but in blogger you are also having that functionality in a form of widget.

Using this blogger widget a user can subscribe to your newsletters of your blog using feedburner, feedburner basically load or reads feed from your website and if there is a new post or new feed in that feed then the email is created and sent to the subscriber automatically.

Still there are many ways to gain subscribers and send them notification by emails but in blogger this is very nice feature and the best thing is that it's build-in feature.

If you are getting bored while reading all the text leave it and now let's get started and make this widget and add it to your blogger blog.

If you are blogger user then you will know that how to create widgets in blogger.

Follow these steps to add subscription form widget in blogger:

Below are some steps that you have to follow to add this subscription form widget in blogger you should have to read all the steps carefully so that you can easily add this widget in blogger.

1. Go to Blogger Dashboard
2. Go to Layout Section
3. Click Add New Widget
4. Select HTML/Javascript widget

Choose the location accordingly where you want to see this widget in your blogger blog. It's upto you.

5. Now copy the code provided below and paste it as widget content.

<style>/* Subscribe Box */
#subscribe-css{max-width:300px;}
#subscribe-css h2{color:#fff;text-align:left}.subscribe-wrapper{background:#333;color:#fff;line-height:normal;margin:0;padding:20px;font-size:13px;text-align:center;border-top:10px double #f8f8f8}.subscribe-wrapper p{margin:0;text-align:left}.subscribe-form{clear:both;display:block;margin:10px 0;overflow:hidden}form.subscribe-form{clear:both;display:block;margin:10px 0 0;width:auto;overflow:hidden}.subscribe-css-email-field{background:#fff;color:#222;margin:0 0 15px;padding:12px;width:100%;border:0;outline:0;border-radius:5px;font-size:13px}.subscribe-css-button{background:#e74c3c;color:#fff;cursor:pointer;padding:7px;text-transform:none!important;width:100%;border:none;font-size:16px;border-radius:5px;transition:all .3s}.subscribe-css-button:hover{background:#f66050}.widget select{max-width:100%;width:100%;cursor:pointer;border:1px solid rgba(0,0,0,0.05);padding:10px;font-size:13px}
#subscribe-css input[type="text"]::placeholder{color:#ccc;opacity:1}#subscribe-css input[type="text"]:-ms-input-placeholder{color:#ccc}#subscribe-css input[type="text"]::-ms-input-placeholder{color:#ccc}</style>
<div id="subscribe-css">
<div class="subscribe-wrapper">
<h2><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">Newsletter</font></font></h2>
<p><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">If you like articles on this blog, please subscribe for free via email.</font></font></p>
<div class="subscribe-form">
<form action="https://feedburner.google.com/fb/a/mailverify?uri=softwebtuts" class="subscribe-form" method="post" onsubmit="window.open('https://feedburner.google.com/fb/a/mailverify?uri=softwebtuts', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input name="uri" type="hidden" value="softwebtuts">
<input name="loc" type="hidden" value="en_US">
<input class="subscribe-css-email-field" name="email" autocomplete="off" placeholder="helloworld@foo.cool" type="text">
<font style="vertical-align: inherit;"><font style="vertical-align: inherit;"><input class="subscribe-css-button" title="" type="submit" value="Submit"></font></font>
</form>
</div>
</div></div>

6. Replace highlighted text in the above code with your feed burner name or feed burner id.
7. Save Widget

It's all done you can view your widget now and i am also having demo of this widget for you you can view it now.
View Demo

Conclusion:

You have successfully made subscription from budget and added it in blogger blog. If you have any difficulty while adding this widget in your blogger blogs you can comment your questions right after this post in the comment section.

Whenever I publish any post I hope that you people will leave your thoughts in the comment section but I haven't got any comment till now which means that you are not liking my content, you should have to think about that.

Good Luck!

source:softwebtuts.com