How to Add Stylish Email Subscription Widget For WordPress and Blogger

In my previous post I have showed you How to add a Beautiful Hacking University like Email Subscription widget for both WordPress and Blogger website. Today I am going to show you How to add a WordPress like Stylish Email Subscription Widget For WordPress and Blogger. Actually you don’t need to read this. Just go through the code. I don’t know why it is called WordPress like, may be it is with the WordPress Site. But it does not work with the site. It only works for self hosted WordPress and Blogger BlogSpot website. This Email Subscription Widget will make your site look professional and smart looking.

I will also show you how to change the color. I have used the Red gradient with Black. You can change it with your own. You can also change the text within the Box. It appears that a beautiful Mail Subscription box may increase caught attention of your visitor. They may subscribed for future post. Ultimately it increases the Visitor count. This box is also SEO friendly. It does not affect the Page load time. I have write a lot of Blogspot tips, you can check them out.

How to Add Stylish Email Subscription Widget For WordPress and Blogger

See here the Demo of Email Subscription Widget.

How To Add Beautiful Email Subscription Widget:

For Blogger: Adding this widget to blogger is very simple just follow these steps:

  1. Go to your Blogger Dashboard
  2. Then Go To Layouts—-> Add A Widget—–> Html JavaScript
  3. Just Copy and Paste these Codes in your box and Save it.

For WordPress:

  1. Go to WordPress Dash board
  2. Then Click on Widget—–> Drag and Drop Text box in the sidebar.
  3. Just Copy and Paste these Codes in your box and Save it.

Code: See here alternate code backup

<div align="center" id="How-to-Subscribe-wrapper">
<div id="ig-subscription-optin" style="border: 3px solid #000000; filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#55AAEE', endColorstr='#003366',GradientType=0 ); width: 240px;">
<h3 id="How-to-title-text" style="color: white; font-size: 20px;">
<div id="How-to-sub-title-txt" style="color: white; font-size: 14px;">
Press Ctrl+D to Bookmark or Enter Email Adress Below To Recieve Updates</div>
<br />
<form action="" method="post" onsubmit="'', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input class="name" id="How-to_Subscriber_name" name="name" onblur="if(this.value=='')this.value=this.defaultValue;" onfocus="if(this.value==this.defaultValue)this.value='';" type="text" value="Enter Name" /><br />
<input class="email" id="How-to_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;">
<input name="uri" type="hidden" value="medinfo24/FcZw" /><input name="loc" type="hidden" value="en_US" /> <input id="How-to_Submit_Text" style="height: auto; padding: 5px 0;" type="submit" value="Get Access Today!" /></form>
<style>#ig-subscription-optin {margin: 0px;padding: 10px;background: #2A6DA9;
background: -moz-linear-gradient(top, #C11B17, #000000);background: -webkit-gradient(linear, left top, left bottom, from #C11B17), to #000000);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: 18px;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 {
background: white url( 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 {background: white url( 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( 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></div>

How To Change the Value:

Press Ctrl + F and Find #C11B17. This is the Red Color and change it according to your wish.

Press Ctrl + F and Find #000000. This is the Black Color and change it according to your wish.

Press Ctrl + F and Find medinfo24/FcZw, This is your Feed Burner ID, change it.

And Thats all. If you are aware with some coding, you can change other color too and give it a new awesome look !



Leave a Reply

Your email address will not be published. Required fields are marked *