Add a Professional Wordpress Style Subscription Widget

After such a long time we are here with a new professional widget which is optimized by Wordpress and everyone like it's professionalism because it has every uniqueness in itself and it's simply made by the CSS and HTML and some images so it's very easy to install and every easy to use. It has very beautiful effect of blue and light blue color with gives a very professional look to this subscription widget and this widget is totally free and easy to install in the blogger and if we talk about the Wordpress then it's not free in the wordpress if you are wordpress user then you have to pay minimum 15$ for it but here in this blog you get it free.

Live Demo

Add Professional Wordpress Style Subscription Widget

• Login to Blogger > Dashborad
• Click on Drop Down Menu and select Layout
• Add a HTML/JavaScript Gadget
• Paste below code in it.

<style>#ig-subscription-optin {margin: 0px;padding: 10px;background: #2A6DA9;
background: -moz-linear-gradient(top, #5AE, #036);background: -webkit-gradient(linear, left top, left bottom, from(#5AE), to(#036));height: auto!important;color: white !important;padding: 20px 15px !important;
text-align: center !important;font-family: Georgia, Times, "Times New Roman", serif !important;margin: 10px;margin: 0px;padding: 10px;
margin: 8px 0 0 !important;line-height: 22px;font-family: Georgia, Times, "Times New Roman", serif;padding: 5px;border: none;}#ig-subscription-optin p {margin: 8px 0 0 !important;line-height: 22px;font-family: Georgia, Times, "Times New Roman", serif;
padding: 5px;border: none;}#ig-subscription-optin input.name {
background: white url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDkvSi7jYJy-LK0ocGJ6UDG0h9_l0qjE8tyZXGzpSspizytbehl0TBisONXCqWZuUEItG8fulf7kXSvI9ryIpxlv2vqjuy2vRVw04PsSxotEETnmprspmknRkUMpvrjHI_Y0kfG2O9gmnB/s1600/subscribe-name.png) no-repeat center right;}
#ig-subscription-optin input[type="text"] {border: 1px solid #111 !important;
font-size: 15px !important;margin-bottom: 10px !important;padding: 8px 28px 8px 10px !important;width: 80% !important;height: auto !important;}
#ig-subscription-optin input.email {background: white url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTa21R9gzR2fQPWCBHjCIs3uQ5AKyWm9Zh7L2_TxIhfK1Y0SrVO_5hvKHOsGwk2SPT91GukxGuk3bqt4r8rPJ2GnRvzUgPKERqlzaMefhe2NxzUCBFXiSMkdWrnDbqnoKKctFKSCN92GIU/s1600/subscribe-email.png) no-repeat center right;}#ig-subscription-optin input {
font-family: Georgia, Times, "Times New Roman", serif;border-radius: 3px;-moz-border-radius: 3px;-webkit-border-radius: 3px;box-shadow: 0 2px 2px #111;-moz-box-shadow: 0 2px 2px #111;-webkit-box-shadow: 0 2px 2px #111;margin: 0px;padding: 0px;}#ig-subscription-optin h3 {margin-top: 10px !important;margin-bottom: 8px !important;margin-left: 10px !important;margin-right: 10px !important;
font-weight: bold !important;line-height: 26px !important;letter-spacing: normal;
text-transform: none;text-decoration: none;
text-align: center !important;font-family: Georgia, Times, "Times New Roman", serif;
border: none;padding: 0px !important;float: none;}input:hover[type="submit"] {
background-color: #0094D2;border: 1px solid #0094D2;color: white;text-decoration: none;}input[type="submit"] {background-color: #00A7ED;border: 1px solid #0094D2;
color: white;cursor: pointer;font-family: 'Droid Sans', sans-serif !important;font-size: 13px;font-weight: normal;padding: 5px;text-decoration: none;}input {
color: #333;font-family: 'Droid Sans', sans-serif;}#ig-subscription-optin input[type="submit"] {background: #960E17 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2Kn2_UCfMJsUnscyqy6Z-uFjL5tFCu2PAgjuyV_Cc02Sy4EOlZYmSiZL9uhtKiDwIK_-Pk99sW5Vd1qy1N9ccyrU9TxVQh5aFLm7rGWMb8SQ6QElkdjP35l9ysKdTnSDc1FxgknuHV_XO/s1600/subscribe-red.png) repeat-x top;border: 1px solid #111 !important;color: white;cursor: pointer !important;font-size: 18px !important;font-weight: bold !important;
padding: 6px 0 !important;text-shadow: -1px -1px #3A060A !important;width: 90% !important;height: auto !important;line-height: 24px !important;}
#ig-subscription-optin input[type="submit"]:hover {color: #FFA5A5;}</style>
<center>
<div align="center" id="Wid-Subscribe-wrapper">
<div id="ig-subscription-optin" style="border: 3px solid #000000; filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#55AAEE', endColorstr='#003366',GradientType=0 ); width: 290px;">
<h3 id="Wid-title-text" style="color: white; font-size: 20px;">
GET FREE EMAIL UPDATES</h3>
<div id="Wid-sub-title-txt" style="color: white; font-size: 14px;">
Join us for free and get valuable content delivered right through your inbox.</div>
<br />
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=WidgetGenerators', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input class="name" id="Wid_Subscriber_name" name="name" onblur="if(this.value=='')this.value=this.defaultValue;" onfocus="if(this.value==this.defaultValue)this.value='';" type="text" value="Enter First Name" /><br />
<input class="email" id="Wid_Subscriber_email" name="from" onblur="if(this.value=='')this.value=this.defaultValue;" onfocus="if(this.value==this.defaultValue)this.value='';" style="width: 130px;" type="text" value="Enter Email Address" /><br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<input name="uri" type="hidden" value="WidgetGenerators" /><input name="loc" type="hidden" value="en_US" /> <input id="Wid_Submit_Text" style="height: auto; padding: 5px 0;" type="submit" value="Get Access Today!" /></form>
</div>
</div>
</center>

• Save your Widget.

Make Changes....!

•  Replace WidgetGenerators it with your RSS username (2 times)

If Any Problem Comes, Ask in Comments