Social and email subscription widget for blogger

Social subscription of important social media websites is most important to increase traffic of your blog and to become successful on the web. In this post i will share with you a simple, small in sizze and clean interface social subscription box that you can add on the sidebar of your blog. This social subscription widget for Blogger includes twitter, Facebook, Youtube and email subscription form. So, by adding this widget in your blog your email subscription as well as social subscription will increase. Follw the below simple steps to add/install this widget in your blog.

How to add this email subscription box in your blog:

Log in to your Blogger dashboard.

Select your template in which you want to add/install this widget.

Go to layout >> Add a Gadget >> select HTML/JavaScript

 Paste the below code and save it. Now save arrangements.

<style>.social a{color: #6e6e6e;font: bold 12px Calibri,Helvetica, Arial, sans-serif;text-decoration: none;padding: 3px 5px 2px;position: relative;display: inline-block;text-shadow: 0 1px 0 #fff;-webkit-transition: border-color .218s;-moz-transition: border .218s;-o-transition: border-color .218s;transition: border-color .218s; background: #f3f3f3;background: -webkit-gradient(linear,0% 40%,0% 70%,from(#F5F5F5),to(#F1F1F1));background: -moz-linear-gradient(linear,0% 40%,0% 70%,from(#F5F5F5),to(#F1F1F1));border: solid 1px #dcdcdc;}
.social a:hover {color: #333;border-color: #999;-moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2);-webkit-box-shadow:0 2px 5px rgba(0, 0, 0, 0.2);box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);}
.social a:active{color:#000;border-color: #444;}
.sub-box{width:300px;background:();padding: 2px 5px 7px 2px;font-family:Droid Sans,Helvetica,Arial;}
.emailform{margin:16px 0 0; display:block; clear:both;}
.emailtext{margin:10px 0 0;background:#f6f6f6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBI6N2evdK_mzGEqAXdMkLUxtEqL24_a5_mfjuadLUU81Pd9giVm5PtRBNtIOHenV6gQQakDCzRL_c1ofh_MeaVkt5zenDRUyskQLRoaSitPISmpWsmkVm04INCv_WTf41QJRgk2V0rCI/s1600/email.png) no-repeat scroll 4px center;padding:6px 5px 6px 34px;color:#444;font-weight:bold; text-decoration:none;border:1px solid #ccc;width:175px;}
.emailtext:hover{background: #f3f3f3 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBI6N2evdK_mzGEqAXdMkLUxtEqL24_a5_mfjuadLUU81Pd9giVm5PtRBNtIOHenV6gQQakDCzRL_c1ofh_MeaVkt5zenDRUyskQLRoaSitPISmpWsmkVm04INCv_WTf41QJRgk2V0rCI/s1600/email.png) no-repeat scroll 4px center;border-color:#999;}
.emailtext:focus{outline:none;}
.sub-button{color:#eee;font-weight:bold; text-decoration:none;padding:5px 10px; border:1px solid #666;cursor:pointer;background:#999}
.sub-button:hover{color:#444;border-color: #999;background:#ccc}</style>

<div style="width: 300px;
height: 180px;
border: 1px solid rgb(221, 221, 221);
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;"><center><div class="social" style="padding: 0pt 0pt 0pt 5px;"> 
<table><tbody><tr><td> 
<a href='http://feedburner.google.com/fb/a/#' target='_blank'><img alt='newsletters' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGYMaiBwJl9dRubNFQj931ZPfXo5pOJ7vo5YqEKY9eu6NIIH7J3wY0T9rfQziFQhWW60JViWFuoTnV-6qQ4H0aFRp-OMijpwMMwiTz71hIttCwC9QSBu4o30P5xfKS-B3xZbFgxdwYT0w/s1600/mail.png" border="0" title='newsletters'/></a> </td>
<td> <a href='http://feeds.feedburner.com/#' target='_blank'><img alt='rss' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDbrZsdkMYCuoDEsts2aa1vw3YHGO10L28TVTExGhLoFaq4s9SBJ59COzPJaXujnzoUS_ac0wzuIwqSlPKrfx6CRYPf5MySyr9FRlG7XTa1Uk_T7zQZB4MFzMX0YC8wOCJN8t1rBlDe4o/s1600/rss.png" border="0" title='rss'/></a> </td>
<td> <a href='http://twitter.com/#' target='_blank'><img alt='twitter' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqM1COUr2hS1A6Rfsn2NPSwPUEijAUbvdYCBg0SSDCmBcc9yKvuYNcjg5aI7znvZZB9fJUeGOXmmX5eJN5_P94sWkaYOrSPS67m93WaYMwu7BEJwe3CEHB7Igf6LZ6SeQEsBOwM1AsA2o/s1600/twitter.png"  border="0" title='twitter'/></a> </td>
<td> <a href='http://www.facebook.com/#' target='_blank'><img alt='facebook' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXNQgi-S01TYDv9a-uL8z5M3oB3CRhzdIDxU2LC43kqsXKKSew8vQ9MP0011oRxSewmpWxm4GNoHmLaMaDk7TbrWbSJe0xqNy3rWmWOap1GfXh-PrkMSwg1X14WZOxuvw_F64EVCJBiOQ/s1600/facebook.png"  border="0" title='facebook'/></a> </td>
<td> <a href='http://www.youtube.com/#' target='_blank'><img alt=' youtube' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOEIY5DSo4tgdYVNBcS90zX0-4xs7-2x-tF-3ImrHXO160-JNRZRTuzH3rJzS556zzHdmNItENdEdoC7w_PCrziF_TJY1QHyTjFXEsRfSKzu0G6eyfxm5D_S2DTgu4KkoRY90APMvyDsM/s1600/youtube.png"  border="0" title='youtube'/></a> 
</td></tr></tbody></table> </div></center>

<style>
.Subscribe-NewBloggerTips .emailsub {   border-bottom: 1px dashed rgb(142, 229, 252);    padding: 5px 0 0px 0;    float: left;    width: 85%;    font-family: Helvetica, Arial;  } .emailicon {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwT_MFcoI7Pwg7busABItAwJKLqn0g5agyT65oFzvY7w61CDqJo5ITGuVDt9oCkMB90BXL2aWqAvE2RodSVUGRNMFmel8B16oUFaaz4RDxR3RXM1Il7pSxsz3xbS-bMuMOmPIUMxpDDUmi/s1600/mail.png) no-repeat 4px 3px;
float: left;
padding: 0px 15px 10px 39px;
margin: 0 0 0 -2px;
width: 130px;
line-height: 20px;
vertical-align: middle;
font-size: 12px;
color: #111;
}.emailsub {
padding: 12px;
} .emailbutton {    background:#f7f8f9;    background:-webkit-gradient(linear, left top, left bottom, color-stop(#f7f8f9, 0), color-stop(#e9e9e9, 1));    background:-webkit-linear-gradient(top, #f7f8f9 0%, #e9e9e9 100%);    background:-moz-linear-gradient(top, #f7f8f9 0%, #e9e9e9 100%);    background:-o-linear-gradient(top, #f7f8f9 0%, #e9e9e9 100%);    background:linear-gradient(top, #f7f8f9 0%, #e9e9e9 100%);    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f7f8f9', endColorstr='#e9e9e9', GradientType=0);    border:1px solid #ddd;    -webkit-border-radius:4px;    -moz-border-radius:4px;    border-radius:4px;    padding:6px 12px;    margin:0;    -webkit-box-shadow:0 1px 0 #f9f9f9 inset, 1px 1px 1px rgba(223, 223, 223, 0.4);    -moz-box-shadow:0 1px 0 #f9f9f9 inset, 1px 1px 1px rgba(223, 223, 223, 0.4);    box-shadow:0 1px 0 #f9f9f9 inset, 1px 1px 1px rgba(223, 223, 223, 0.4);    color:#888;    text-shadow:0 1px 0 #fff;    line-height:1.2;    cursor:pointer;    font-size:13px;  }  .emailbutton:hover {    background:#f1f1f1;    background:-webkit-gradient(linear, left top, left bottom, color-stop(#f1f1f1, 0), color-stop(#e0e0e0, 1));    background:-webkit-linear-gradient(top, #f1f1f1 0%, #e0e0e0 100%);    background:-moz-linear-gradient(top, #f1f1f1 0%, #e0e0e0 100%);    background:-o-linear-gradient(top, #f1f1f1 0%, #e0e0e0 100%);    background:linear-gradient(top, #f1f1f1 0%, #e0e0e0 100%);    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f1f1f1', endColorstr='#e0e0e0', GradientType=0);    text-decoration:none !important;  }  .email {    clear:both;    width:100%;    margin:10px 0;  }  .emailform {    position:relative;  width:230px;    margin:0 auto;  }  .emailinput {    width:200px;    height:18px;    margin:0 auto;    padding:8px 40px 8px 10px;    border:1px solid #ddd;    -webkit-border-radius:4px;    -moz-border-radius:4px;    border-radius:4px;    font-family:georgia;    font-style:italic;    -webkit-box-shadow:1px 1px 2px #dfdfdf;    -moz-box-shadow:1px 1px 2px #dfdfdf;    box-shadow:1px 1px 2px #dfdfdf;    font-size:14px;    color:#666;  }  .emailbutton {    -webkit-border-top-right-radius:4px;    -webkit-border-bottom-right-radius:4px;    -moz-border-radius-topright:4px;    -moz-border-radius-bottomright:4px;    border-top-right-radius:4px;    border-bottom-right-radius:4px;    -webkit-border-top-left-radius:0px;    -webkit-border-bottom-left-radius:0px;    -moz-border-radius-topleft:0px;    -moz-border-radius-bottomleft:0px;    border-top-left-radius:0px;    border-bottom-left-radius:0px;    padding:9px;    position:absolute;    right:-2px;    top:0;    display:block;    line-height:16px;  }  .emailbutton {    padding:8px !important;  }  .emailform, .emailinput {    width:100% !important;    -webkit-box-sizing:border-box;    -moz-box-sizing:border-box;    box-sizing:border-box;    height:auto;  } 
</style>
<div class="emailsub">      <div class="emailicon">        <p style=" width:200px;   color:#00000;   font-size: 22px;   font-weight: normal;   font-family: Helvetica, Arial;    padding:0px 5px;   margin:0;  ">Receive Quality Tricks!</p>      </div>      <div class="email">        <form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/#', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" class="emailform">          <input type="hidden" value="qasimbaig" name="uri" />          <input type="hidden" name="loc" value="en_US" />          <input type="text" 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;}" value="Enter your email..." name="email" class="emailinput"          />          <input type="submit" class="emailbutton" value="Submit" title='' />        </form>      </div>    </div></div>

Cutomization Of this widget:
In the HTML section of this widget Find # and replace it with your own social profiles links..
Enjoy!