Home » Blogger Widgets » Add Stylish Email Subscription Box to Blogger and WordPress

Add Stylish Email Subscription Box to Blogger and WordPress

Stylish Email Subscription Box  always grabs the attention of visitors and thus increases your chances of getting more subscribers. Bloggers and Advertisers knows the importance of subscribers and visitors for making money online. That is probably the reason why, Most of the pro Bloggers are using unique and attractive E-Mail subscription box and they have lots of Subscribers. I was also getting so many requests so I am publishing it today. I don’t want to waste your time so let’s see, How to Add it to your blogger and wordPress blog.

Add Stylish Email Subscription Box to Blogger and WordPress

How to Add Stylish Email Subscription Box to Blogger?
  • Now you will see your Dashboard. Just click on Layout as shown in below given figure.

Layout blogger Add Happy New Year 2013 Effect to Blogger Blog

  • Now click on “Add gadget” option in your Blog’s Layout.The screenshot for the same is shown below:

Add a gadget in blogger Add Happy New Year 2013 Effect to Blogger Blog

  • Now you will see a Pop-up box. Just scroll down until you find “ html/Javascript” option.If found click on it. The screenshot of the same is shown below.

Adding html javascript in blogger blog Add Happy New Year 2013 Effect to Blogger Blog

  • You will see another Form. Copy and Paste the Below given code in that box.

<style>#geteverything-header-sociable ul{margin:5px 0 0 0}#geteverything-header-sociable li{float:left;background:none!important;margin:0 0 0 0;padding:0 8px 0 0;border-bottom:none}#geteverything-header-sociable a{-webkit-transition:all .2s ease;-moz-transition:all .2s ease;-ms-transition:all .2s ease;-o-transition:all .2s ease;transition:all .2s ease;background:url(http://geteverything.org/images/geteverything-header-sociable.png.pagespeed.ic.rNJJdQvq3q.png) no-repeat;display:block;height:32px;margin-left:13.5px;text-indent:-999em;width:32px}#geteverything-header-sociable a:hover{background-position:0 -32px}#geteverything-header-sociable li.twitter a{background-position:-32px 0}#geteverything-header-sociable li.twitter a:hover{background-position:-32px -32px}#geteverything-header-sociable li.google_plus a{background-position:-64px 0}#geteverything-header-sociable li.google_plus a:hover{background-position:-64px -32px}#geteverything-header-sociable li.linkedin a{background-position:-96px 0}#geteverything-header-sociable li.linkedin a:hover{background-position:-96px -32px}#geteverything-header-sociable li.dribbble a{background-position:-128px 0}#geteverything-header-sociable li.dribbble a:hover{background-position:-128px -32px}#geteverything-header-sociable li.stumbleupon a{background-position:-160px 0}#geteverything-header-sociable li.stumbleupon a:hover{background-position:-160px -32px}#geteverything-header-sociable li.pinterest a{background-position:-192px 0}#geteverything-header-sociable li.pinterest a:hover{background-position:-192px -32px}#geteverything-header-sociable li.youtube a{background-position:-224px 0}#geteverything-header-sociable li.youtube a:hover{background-position:-224px -32px}#geteverything-header-sociable li.email a{background-position:-256px 0}#geteverything-header-sociable li.email a:hover{background-position:-256px -32px}#geteverything-header-sociable li.rss_feed a{background-position:-288px 0}#geteverything-header-sociable li.rss_feed a:hover{background-position:-288px -32px}.align-ctr{float:center}</style>

<center>

<div id=”geteverything-header-sociable”>

<ul>

<li class=”facebook”><a title=”Like us on Facebook” href=”https://www.facebook.com/pages/Geteverythingorg/227989713996089” target=”_blank” rel=”nofollow”>Like us on Facebook</a></li>

<li class=”twitter”><a title=”Follow me on Twitter” href=”https://twitter.com/ravik1214” target=”_blank” rel=”nofollow”>Follow me on Twitter</a></li>

<li class=”google_plus”><a title=”Add me to your Circles” href=”https://plus.google.com/115554880628992999071” target=”_blank” rel=”nofollow”>Add me to your Circles</a></li>

<li class=”youtube”><a title=”Watch me on YouTube” href=”http://www.youtube.com/channel/UC2f7xrjiE961PbBXZEYjIqA” target=”_blank” rel=”nofollow”>Watch me on YouTube</a></li>

<li class=”pinterest”><a title=”Follow me on Pinterest” href=”http://pinterest.com/ravik1214/geteverything-org/” target=”_blank” rel=”nofollow”>Follow me on Pinterest</a></li>

<li class=”rss_feed”><a title=”RSS Feed” href=”http://feeds.feedburner.com/Geteverythingorg” target=”_blank” rel=”nofollow”>RSS Feed</a></li>

<li class=”email”><a title=”Subscribe via Email” href=”http://feedburner.google.com/fb/a/mailverify?uri=Geteverythingorg” target=”_blank” rel=”nofollow”>Subscribe via Email</a></li>

</ul>

</div>

</center>

<br /><br /><br /><br />

<style>.geteverything-sub-box{border-style:solid;border-width:2px;border-color:#000;border-radius:5px;padding:20px;width:87%;background:#fff;transition:box-shadow .777s;-webkit-transition:box-shadow .777s;-moz-transition:box-shadow .777s;-o-transition:box-shadow .777s;-ms-transition:box-shadow .777s}.geteverything-sub-box:hover{-moz-box-shadow:inset 0 0 10px #fff;-webkit-box-shadow:inset 0 0 10px #fff;box-shadow:inset 0 0 10px #fff}.paratraf{font-size:20px;font-weight: bold;font-family:&#39;georgia&#39;text-align:center;color:#000}.feed-links{display:none}.enteremail{background:url(http://geteverything.org/images/xemail.png.pagespeed.ic.z2QgplhiSz.png) no-repeat scroll 10px center #fff;border-radius:4px 4px 4px 4px;box-shadow:0 0 3px rgba(0,0,0,.05) inset;color:#8b8b8b;padding:10px 40px;border-style:solid;border-width:2px;border-color:#dedede}.forspace{padding:15px}.button-45{background:-moz-linear-gradient(center top,#00a7ed 0%,#00a7ed 100%) repeat scroll 0 0 transparent;border:0 none;border-radius:4px 4px 4px 4px;color:#000;cursor:pointer;font-family:”Droid Sans”,”Lucida Grande”,Tahoma,sans-serif;font-weight:bold;padding:10px 40px;text-shadow:1px 1px 0 rgba(0,0,0,.4);background:#0094d2;border:0 none;border-radius:4px 4px 4px 4px;color:#fff;cursor:pointer;font-family:”Droid Sans”,”Lucida Grande”,Tahoma,sans-serif;font-weight:bold;padding:10px 40px;text-shadow:1px 1px 0 rgba(0,0,0,.4)}.button-45:hover{background:#000;}</style>

<center>

<div class=”geteverything-sub-box”>

<form action=”http://feedburner.google.com/fb/a/mailverify” method=”post” target=”popupwindow” onsubmit=”window.open(‘http://feedburner.google.com/fb/a/mailverify?uri=Geteverythingorg‘, ‘popupwindow’, ‘scrollbars=yes,width=550,height=520′);return true”><div class=”paratraf”>Subscribe Updates, It’s FREE!<p> </p><div class=”forspace”>

<center>

<input class=”enteremail” style=”width:50%” name=”email” value=”Your Email” onfocus=”if (this.value == &quot;Your Email&quot;) {this.value = &quot;&quot;}” type=”text” /></center></div>

<p></p>

<input value=”Geteverythingorg” name=”uri” type=”hidden” />

<input name=”loc” value=”en_US” type=”hidden” />

<center>

<input class=”button-45″ value=”Subscribe” type=”submit” /></center></div></form>

</div>

</center>

 

  • Once Done, Click on “Save” button and you are done. The screenshot of the same is shown below:

Add Html/javascript in Blogger

How to Add Stylish Email Subscription Box to WordPress?
  • First of all Log in into your Admin Panel of your WordPress Blog. Generally you will find your Admin Panel at http://yourblog.com/wp-admin.
  • Now your “Dashboard” will appear before you. Just scroll your mouse to Appearance>>Widget. For better understanding see the below given image:

Adding Widget in WordPress Add Google Plus Follower Widget to your WordPress Blog

  • Now you will see a List of your widget. Add “Text” widget so as to Add some Html and javascript code to it.Check the below given screen for the same.

adding Text widget in wordpress Add Google Plus Follower Widget to your WordPress Blog

  • Now choose a Place where you want to Add this widget. I will recommend you to Add it in your sidebar. To do so, drag your “Text” widget to sidebar and enter the below given code to it.

<style>#geteverything-header-sociable ul{margin:5px 0 0 0}#geteverything-header-sociable li{float:left;background:none!important;margin:0 0 0 0;padding:0 8px 0 0;border-bottom:none}#geteverything-header-sociable a{-webkit-transition:all .2s ease;-moz-transition:all .2s ease;-ms-transition:all .2s ease;-o-transition:all .2s ease;transition:all .2s ease;background:url(http://geteverything.org/images/geteverything-header-sociable.png.pagespeed.ic.rNJJdQvq3q.png) no-repeat;display:block;height:32px;margin-left:13.5px;text-indent:-999em;width:32px}#geteverything-header-sociable a:hover{background-position:0 -32px}#geteverything-header-sociable li.twitter a{background-position:-32px 0}#geteverything-header-sociable li.twitter a:hover{background-position:-32px -32px}#geteverything-header-sociable li.google_plus a{background-position:-64px 0}#geteverything-header-sociable li.google_plus a:hover{background-position:-64px -32px}#geteverything-header-sociable li.linkedin a{background-position:-96px 0}#geteverything-header-sociable li.linkedin a:hover{background-position:-96px -32px}#geteverything-header-sociable li.dribbble a{background-position:-128px 0}#geteverything-header-sociable li.dribbble a:hover{background-position:-128px -32px}#geteverything-header-sociable li.stumbleupon a{background-position:-160px 0}#geteverything-header-sociable li.stumbleupon a:hover{background-position:-160px -32px}#geteverything-header-sociable li.pinterest a{background-position:-192px 0}#geteverything-header-sociable li.pinterest a:hover{background-position:-192px -32px}#geteverything-header-sociable li.youtube a{background-position:-224px 0}#geteverything-header-sociable li.youtube a:hover{background-position:-224px -32px}#geteverything-header-sociable li.email a{background-position:-256px 0}#geteverything-header-sociable li.email a:hover{background-position:-256px -32px}#geteverything-header-sociable li.rss_feed a{background-position:-288px 0}#geteverything-header-sociable li.rss_feed a:hover{background-position:-288px -32px}.align-ctr{float:center}</style>

<center>

<div id=”geteverything-header-sociable”>

<ul>

<li class=”facebook”><a title=”Like us on Facebook” href=”https://www.facebook.com/pages/Geteverythingorg/227989713996089” target=”_blank” rel=”nofollow”>Like us on Facebook</a></li>

<li class=”twitter”><a title=”Follow me on Twitter” href=”https://twitter.com/ravik1214” target=”_blank” rel=”nofollow”>Follow me on Twitter</a></li>

<li class=”google_plus”><a title=”Add me to your Circles” href=”https://plus.google.com/115554880628992999071” target=”_blank” rel=”nofollow”>Add me to your Circles</a></li>

<li class=”youtube”><a title=”Watch me on YouTube” href=”http://www.youtube.com/channel/UC2f7xrjiE961PbBXZEYjIqA” target=”_blank” rel=”nofollow”>Watch me on YouTube</a></li>

<li class=”pinterest”><a title=”Follow me on Pinterest” href=”http://pinterest.com/ravik1214/geteverything-org/” target=”_blank” rel=”nofollow”>Follow me on Pinterest</a></li>

<li class=”rss_feed”><a title=”RSS Feed” href=”http://feeds.feedburner.com/Geteverythingorg” target=”_blank” rel=”nofollow”>RSS Feed</a></li>

<li class=”email”><a title=”Subscribe via Email” href=”http://feedburner.google.com/fb/a/mailverify?uri=Geteverythingorg” target=”_blank” rel=”nofollow”>Subscribe via Email</a></li>

</ul>

</div>

</center>

<br /><br /><br /><br />

<style>.geteverything-sub-box{border-style:solid;border-width:2px;border-color:#000;border-radius:5px;padding:20px;width:87%;background:#fff;transition:box-shadow .777s;-webkit-transition:box-shadow .777s;-moz-transition:box-shadow .777s;-o-transition:box-shadow .777s;-ms-transition:box-shadow .777s}.geteverything-sub-box:hover{-moz-box-shadow:inset 0 0 10px #fff;-webkit-box-shadow:inset 0 0 10px #fff;box-shadow:inset 0 0 10px #fff}.paratraf{font-size:20px;font-weight: bold;font-family:&#39;georgia&#39;text-align:center;color:#000}.feed-links{display:none}.enteremail{background:url(http://geteverything.org/images/xemail.png.pagespeed.ic.z2QgplhiSz.png) no-repeat scroll 10px center #fff;border-radius:4px 4px 4px 4px;box-shadow:0 0 3px rgba(0,0,0,.05) inset;color:#8b8b8b;padding:10px 40px;border-style:solid;border-width:2px;border-color:#dedede}.forspace{padding:15px}.button-45{background:-moz-linear-gradient(center top,#00a7ed 0%,#00a7ed 100%) repeat scroll 0 0 transparent;border:0 none;border-radius:4px 4px 4px 4px;color:#000;cursor:pointer;font-family:”Droid Sans”,”Lucida Grande”,Tahoma,sans-serif;font-weight:bold;padding:10px 40px;text-shadow:1px 1px 0 rgba(0,0,0,.4);background:#0094d2;border:0 none;border-radius:4px 4px 4px 4px;color:#fff;cursor:pointer;font-family:”Droid Sans”,”Lucida Grande”,Tahoma,sans-serif;font-weight:bold;padding:10px 40px;text-shadow:1px 1px 0 rgba(0,0,0,.4)}.button-45:hover{background:#000;}</style>

<center>

<div class=”geteverything-sub-box”>

<form action=”http://feedburner.google.com/fb/a/mailverify” method=”post” target=”popupwindow” onsubmit=”window.open(‘http://feedburner.google.com/fb/a/mailverify?uri=Geteverythingorg‘, ‘popupwindow’, ‘scrollbars=yes,width=550,height=520′);return true”><div class=”paratraf”>Subscribe Updates, It’s FREE!<p> </p><div class=”forspace”>

<center>

<input class=”enteremail” style=”width:50%” name=”email” value=”Your Email” onfocus=”if (this.value == &quot;Your Email&quot;) {this.value = &quot;&quot;}” type=”text” /></center></div>

<p></p>

<input value=”Geteverythingorg” name=”uri” type=”hidden” />

<input name=”loc” value=”en_US” type=”hidden” />

<center>

<input class=”button-45″ value=”Subscribe” type=”submit” /></center></div></form>

</div>

</center>

 

  • Finally, Click on “Save” button and enjoy.
I want to Check the Live Demo First. Where Is it?
Definitely friend. You can check the Live Demo first before using it. I know that Everybody would like to check it live.The link is given below:

 

Customization:: All Instructions
  • Replace https://www.facebook.com/pages/Geteverythingorg/227989713996089 with the Facebook Url of your Page.
  • Replace ravik1214 with your Own Twitter UserName.
  • Replace https://plus.google.com/115554880628992999071 with your Own Google+ Url. It can be either your Page’s Google+ Url or Your Own Profile’s Url as per your choice.
  • Replace http://www.youtube.com/channel/UC2f7xrjiE961PbBXZEYjIqA with your Own YouTube Url.
  • Replace http://pinterest.com/ravik1214/geteverything-org/ with your Own Pinterest Profile Url.
  • Replace http://feeds.feedburner.com/Geteverythingorg with your Own Feed Url(Feedburner’s Feed).
  • Replace Geteverythingorg with your Feedburner’s Feed Name of your blog or website.
  • To change the background, change the values in “background” field.
  • To change the width, Change the value in “width” field.
From the Editor’s Desk
According to me, this Stylish Email Subscription Box is best for Blogger and WordPress users. If you are looking for one of the best Stylish Email Subscription Box then give it a try. There is no charge for using it so you can try it without thinking much about the outcome.
I am sure that, You all will love it. Let me know, If you want any more customization. Your positive and negative comments are most welcome because they are the one, Which tells the reality.
Genesis Framework for WordPress

About admin

Hi Guys. I am Ravi Kumar, the owner and Editor of this Blog. I am a Computer Science Engineer and a full time Blogger. I write articles on topics related to Blogging, SEO,Web designing,WordPress,Blogger,Content Marketing,Technology,CPA marketing and much more. However, My main aim is to help other bloggers. You can follow me on Twitter,Facebook and Google+

6 comments

  1. it does not work,

  2. Is it possible to add it to a wordpress page instead of to a widget (if yes, how)? And can you place the subscribe button right next to the email field? Thanks!

    • Yes definitely, why not. Just send me a mail with your requirement via our contact us page. It would be my pleasure to do that for you.

  3. IT IS NOT WORKING

    • It works arsal. What kind of problem are you facing? If you want me to do this for you, contact us via our contact us page. It would be my pleasure to assist you.

Leave a Reply

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

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

CommentLuv badge

Scroll To Top