Wednesday, November 7, 2012

Create Email Subscription Form With Social Buttons

Author: Gagan Masoun
Create Email Subscription Form With Social Buttons
In this tutorial, we will be discussing on how to create an email subscription form with social buttons.Every blog must have an email subscription box so that readers can stay connected with it. Every user who subscribes to your blog using an email subscription form will get an email notification in his email account on every blog update.

You can also include social media buttons like Facebook, Google+, Twitter, Linkedin etc. in it.

You May Like To Read:
Email Subscription Form With Social Buttons

How to Create Email Subscription Form With Social Icons

Learn how to create a custom subscription form for your WordPress or Blogger blog.You can also use this code for your website.

Add Subscription Box Widget To Blogger

  1. Go to Dashboard > Design > Page Elements.
  2. Click Add A Gadget. In New Window, Select HTML/Javascript .
  3. Copy The Code Given Below and Paste It Inside The Box.
  4. Save The Gadget

Add Subscription Box Widget To WordPress

  1. Go to Dashboard > Appearance > Widgets > Available Widgets
  2. Drag Text Widget Into a Sidebar.
  3. Paste In The Code.
  4. Save Widget & Its Done

Code For Subscription Box Widget

<style>
.subsemail{
border:none;
margin-left:auto;
margin-right:auto;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRm6B1re9Z1O_K1mVcuNPdPXrngNahWv_2Xn__fGeLk3v3WJyZGlTvQQg1ydY2gulIkHeflV-euUypn5vNu2uJmEuYwnCQ5NgTyN6lBk0SM2nBvJtK__56-iCjCSqbcKqr9MmrrCrYWOyj/s1600/blogsdaddy.com-subscribe-form.png') no-repeat top left;
width:280px;
height:245px;
}
.linkfacebook{
position:absolute;
width:40px; height:40px;
margin-top:25px;
margin-left:24px;
cursor:pointer;
background:none;
border:none;
}
.linktwitter{
position:absolute;
width:40px; height:40px;
margin-top:25px;
margin-left:88px;
cursor:pointer;
background:none;
border:none;
}
.linkgplus{
position:absolute;
width:40px; height:40px;
margin-top:25px;
margin-left:152px;
cursor:pointer;
background:none;
border:none;
}
.linkrss{
position:absolute;
width:40px; height:40px;
margin-top:25px;
margin-left:215px;
cursor:pointer;
background:none;
border:none;
}
.substextarea{
position:absolute;
overflow:hidden;
border:none;
border-right:none;
width:206px; height:23px;
margin-top:177px;
margin-left:50px;
background:none;
font-family:Georgia, "Times New Roman", Times, serif;
font-size:14px;
color:#666666;
font-style:italic;
}
.subsemailsubmit{
position:absolute;
overflow:hidden;
cursor:pointer;
border:1px solid gray;
width:70px;
height:20px;
background:none;
border:none;
margin-top:210px;
margin-left:188px;
}
</style>
<!--Begin Subscription-->
<div class="subsemail">
<form method="link" action="http://www.facebook.com/BlogsDaddy" target="_blank">
<input class="linkfacebook" type="submit" value="" title="Join BlogsDaddy On Facebook" />
</form>
<form method="link" action="http://twitter.com/BlogsDaddy" target="_blank">
<input class="linktwitter" type="submit" value="" title="Follow BlogsDaddy On Twitter" />
</form>
<form method="link" action="https://plus.google.com/106217413057730068740" target="_blank">
<input class="linkgplus" type="submit" value="" title="Follow BlogsDaddy On Google Plus" />
</form>
<form method="link" action="http://feeds.feedburner.com/BlogsDaddy" target="_blank">
<input class="linkrss" type="submit" value="" title="BlogsDaddy RSS Feed" />
</form>
<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=BlogsDaddy', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input class="substextarea" name="email" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Enter your email address here&quot;;}" onfocus="if (this.value == &quot;Enter your email address here&quot;) {this.value = &quot;&quot;;}" value="Enter your email address here" type="text" />
<input class="subsemailsubmit" value="" type="submit" />
<input type="hidden" value="BlogsDaddy" name="uri"/>
<input type="hidden" name="loc" value="en_US"/>
</form>
</div>
<!--End Subscription-->
Remember Notes : The social and feed links are highlighted in yellow, you need to change these to your own.

More Widgets:
  1. Add Beautiful Email Subscription Box V2 In Blogger Blog
  2. New Stylish Subscription Box For Blogger/Wordpress Sidebar
  3. Blogs Daddy's Social Subscription Widget For Blogger & WordPress
If you want to add the widget on a specific place, then use the separate HTML and CSS and if you want the widget to appear somewhere in your sidebar, then jump directly at the Alternative section at the bottom.

If you need our help then ask me via comments.See you soon with more amazing widgets and tutorials.Keep in touch! Happy Blogging & Stay Blessed :)

Author
Author - Gagan Masoun is the owner of Blogs Daddy Blog.Gagan lives in India, has been blogging since 2010 and writing Blogs Daddy Blog since 2011.You can find him in the usual social networks.

6 comments:

  1. Wow!! Finally I Found this Gadget on Your Site. Thanx For Sharing gagan Masoun :)

    ReplyDelete
  2. but how to save this subscription lists in wordpress?

    ReplyDelete
    Replies
    1. Just copy the code and follow above steps. Its simple dear

      Delete
  3. I'd like to get rid of the "Subscribe to Nucleation" and add a different blog name instead.

    How can I go about this?

    ReplyDelete
    Replies
    1. Hi Liz,

      Actually "Subscribe to Nucleation" written on background Image, I changed the title "Subscribe to Nucleation" to ""Subscribe Us". So, copy/paste this code again.

      For another question ask again without hesitation :)

      Thanks
      Gagan Masoun

      Delete