Add Stylish Subscribe via Email Widget to Blogger Blog

In previous post we had discuss about Simple Feed Burner Subscription but in this post i will told you about Stylish Subscribe via Email Widget for blog/site. In previous post i had told you all about Subscription widget that how it works and how is useful it is. Now we learn a method for adding it to your blog just follow my given instructions below;

How to Add Stylish Subscribe via Email Widget to Blogger Blog

1. Go to Blogger Dashboard> Layout> Add a Gadget

2. Now Click on "HTML/JavaScript" Gadget

3. After this Copy the below set of Code and Paste it into empty box

<style>.hl-email{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoptY5SQY0DhZa3k0VH6lwysznIyMQdm2Mi7BFln3mj77K_X2scsBAR7Hnv8m-YQVwh_5vn5_rlU8_v7-yRr1HClHcOrL2KR2V903xCEu6sX9Bmra99g4SjcdL57aMhWuMYHWo4ltL6pU/s1600/mail.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;}.hl-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;}.hl-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:130px;color:#666;}</style><div class="hl-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=filezooby', '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="filezooby" name="uri"/><input type="hidden" name="loc" value="en_US"/><input class="hl-emailsubmit" value="Submit" type="submit" /></form></div>

Note: Now you have to make following changes

• Replace the URL Address in Blue to change the email icon
• Increase/Decrease the 130 width value for a wider text area
• Replace http://feedburner.google.com/fb/a/mailverify?uri=filezooby with your feed Burner Email feeding link
• replace filezooby with your feed titile.

Finally Save it.

Posted in: Blogger Widgets