Stylish Email Subscription Box With Social Media

In this post, I'm gonna explain how to add nice social sharing button with RSS Subscribe box.So, you can link your social notwork URL with this widget.It will helps to get some more followers.You can add it with easy steps.try it. Before adding this widget on your WordPress or Blogger blog you can check live demo & screenshot below:

You May Like To Read:

1. Create Email Subscription Form With Social Buttons
2. Customize Blogger's Official Follow By Email Widget
3. Elegant Email Subscription/Signup Widget For Blogger Blog
4. Premium Social Media Subscription Widget For Blogger Blog

Live Demo

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>
#socialnbtrix{
width:244px;
padding:10px 10px 0px 9px;
background:#000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4saEKAtGvFOHrZ1vVtpSBIK6a6bT50u1anAyTwKu6SODql_4e2k7IiwUykEf_W6ymElO2gY3tI6YouYpOMLlaLzFa6Qx2qlNZTJ-pW79an1UkED-rv61oozZIS0I6G_Tl66lVf5ZrHvIK/s1600/BlogsDaddy.Com-Email-Subscription-Widget.png)no-repeat top left;
box-shadow:5px 7px 5px #ddd;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:20px;}
p#socialnbtrixp img {
    -moz-transition: all 0.8s ease-in-out;
-webkit-transition: all 0.8s ease-in-out;
    -o-transition: all 0.8s ease-in-out;
    -ms-transition: all 0.8s ease-in-out;
    transition: all 0.8s ease-in-out;
padding-right:10px;}
p#socialnbtrixp img:hover {
    -moz-transform: rotate(420deg);
    -webkit-transform: rotate(420deg);
    -o-transform: rotate(420deg);
    -ms-transform: rotate(420deg);
    transform: rotate(420deg);}
blogsdaddyform.emailout{
margin:20px;
display:block;
clear:both;
padding:50px;
float:right;
}
.blogsdaddytxt{
font-size:16px;
color:#666;
font-weight:bold;
font-family:Georgia,Times New Roman,Trebuchet MS;
text-decoration:none;
border:1px solid #D3D3D3;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
-moz-box-shadow: 1px 1px 2px #CCC inset;
-webkit-box-shadow: 1px 1px 2px #CCC inset;
box-shadow: 1px 1px 2px #CCC inset;
width:240px;
height:30px;
}
.blogsdaddybtn{
color:#666;
font-weight:bold;
text-decoration:none;
padding:10px 20px;
border:4px solid #D3D3D3;
cursor: pointer;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-goog-ms-border-radius: 4px;
border-radius: 20px;
background: #fbfbfb;
background: -moz-linear-gradient(top, #fbfbfb 0%, #f4f4f4 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fbfbfb), color-stop(100%,#f4f4f4));
background: -webkit-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
background: -o-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
background: -ms-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=&#39;#FBFBFB&#39;, endColorstr=&#39;#F4F4F4&#39;,GradientType=0 );
background: linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
}
</style>
<br />
<div id="socialnbtrix">
<center><p id="socialnbtrixp">
<a href="YOUR RSS FEED URL HERE">
<img border="0" src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuGd527cE0rD83VFuka88c_BQtNBN2I0G2UC2gUrhU62DzeVk-7OHFg1bN5RNbd6PwJY9_sNooRLvjR6qeJY5HAZCPUqJz7VFIE_UZ7IUvnPDpIJfrg7PfgiK0sC0EroI5Sp2Lx7m2MLdQ/s1600/RSS-48x48.png " /></a>
<a href="YOUR GOOGLE PLUS URL HERE">
<img border="0" src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8iUuUiJ6eWcunYIxpF20cy3SE5P6brUIFVXfd4GqSdGManFNDZm97Gk6gblKHiRvzOWpi71i1g5iN1l1632mARs40aktfWw2nlnU9VJPiqzQowT7fHLvjKY482eCern3bQf_QFg73fas/s1600/TNT.png " /></a>
<a href="YOUR TWITTER URL HERE">
<img border="0" src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaW4Y2vtlqgUXBv77UzG_r900nvW8GZ4wQE6oFpoyL5feDpOd-lqBuoNowrv6iWxzbyJsJCsWIWiDBa-PmsLEsFE3Jd4GHf9gm4PzrLV7g96v1wD2nH33_EwLfHC59gr-HbACWY27P3zM/s1600/TNT.png " /></a>
<a href="YOUR FACEBOOK URL HERE">
<img border="0" src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgW5HsElTbcQZy07yfgR1bmFu22ZpFrKz-4NsjoYAyiefs_9bGR8e6IFkfyn07Bs6Y9bkpe1kloM24gEP6jZTM_JTZadmoQfNUJr_d1L6awdqPzOCNpPkkeAzobRrfy5uvTd_NQiKkFFl0/s1600/TNT.png " /></a></p></center>
<p style='color:#FFFFFF;
font-weight:bold;
font-family:Georgia,Times New Roman,Trebuchet MS;'>Get Quality Updates Into Your Inbox FREE !!</p>
<form action='http://feedburner.google.com/fb/a/mailverify' class='emailout' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=YOUR FEEDBURNER ID HERE&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=550&apos;);return true' style='margin: 0pt;' target='popupwindow'>
<input name='uri' type='hidden' value='YOUR FEEDBURNER URL HERE'/>
<center><input name='loc' type='hidden' value='en_US'/>
<input class='blogsdaddytxt' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Enter your Email&quot;;}' onfocus='if (this.value == &quot;Enter your Email&quot;) {this.value = &quot;&quot;}' type='text' value='Enter your Email'/>
<input alt='' class='blogsdaddybtn' title='' type='submit' value='Submit'/>
</form><center>
</div>

Remember Notes : The social and feed links are highlighted in yellow, you need to change these to your own.

Recommend For You:

1. Stylish Subscription Widget For Blogger And WordPress
2. Add Beautiful Email Subscription Box V2 In Blogger Blog
3. How To Add Thesis Email Subscription Widget To Your Blogger Blog

If you need any type of  help then ask me via comments.Happy Blogging & Stay Blessed :)

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.