Add social and email subscribtion in blogger

Social and email subscription

Assalam u alaikum readers ,

Now my friend ask me about Social and email subscription

that why i,m not adding social and email suscribtion in my blog so i add it and i want to share it with you , you can see live demo in my side bar OR i have a Picture see here

this is the demo of my social sharing widget this is very cool because it not make load on blog and all of its pictures and hosted on blogger and there is no javascript in it so i,m sure you love it follow my steps to add it

Steps

Goto blogger dashboard
now goto page elements OR layout
Add a gadget and select html/javascript
now paste below code inside this box

 <style>

.amispace131{width: 300px;}
.amispace131 .amisocial
{
border: 1px dotted #E0CFB3;
width:100%;
background-color:#F9F9F1;
display:;
}
.amispace131 .amisocial a {
display:block;
height:32px;
width:32px;
background-color:#F9F9F1;
opacity:0.7;
filter:alpha(opacity=70); /* For IE8 and earlier */
-webkit-transition: ease-in 0.2s all; 
-moz-transition: ease-in 0.2s all; 
-o-transition: ease-in 0.2s all; 
-ms-transition: ease-in 0.2s all; 
transition: ease-in 0.2s all;
cursor:pointer;

}
.amispace131 .amisocial a:hover {
background:url(social.png); background-position:0px 66px;
opacity:0;
filter:alpha(opacity=100); /* For IE8 and earlier */
}

.amispace131 .emailsub{border: 1px dotted #E0CFB3; padding: 5px 0 5px 0; float: left; width: 100%; font-family: Helvetica, Arial; background-color:#E0CFB3;}

.amispace131 .emailsub .emailicon{ width: 100%; height: 28px; line-height: 28px; vertical-align: middle; font-size: 14px; color: #666666; }

.amispace131 .emailsub .emailupdatesform{margin: 5px 5px 5px 5px; width: 100%; text-align:center;}

.amispace131 .emailsub .emailupdatesform input.emailupdatesinput{background: #fff !important; border: 1px solid #d2d2d2; padding: 0px 8px 0px 8px; color: #a19999; font-size: 12px; height: 25px; width: 180px; -moz-border-radius: 5px; -webkit-border-radius: 5px;}

.amispace131 .emailsub .emailupdatesform input.joinemailupdates{background:#666666; border: 1px solid #666666; text-transform: uppercase; color: #ffffff; font-weight:bold; height: 25px; padding: 0 12px 0 12px; margin: 0 0 0 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;}
</style>

<!--[if IE 7]>
<style>
.amispace131 .count span.bigcount{color:#F17C18; font-size: 24px; font-family: Helvetica, Arial; line-height: 34px; vertical-align: middle; }

.amispace131 .emailsub .emailupdatesform input.joinemailupdates{background:#666666; border: 1px solid #666666; text-transform: uppercase; color: #ffffff; font-weight:bold; height: 25px; padding: 0 12px 0 12px; margin: 0 0 0 5px; }
</style>
<![endif]-->

<div class="amispace131">


<div class='amisocial'>

<!--RSS--><table align="center" cellpadding="0px" cellspacing="0px;">
<tr><td style="background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfgPuGhuUY7UOVDXUsaHhzzmopJILn3YA_VkcpMx6fVQ4AFRCEtih0y6qW0v3NKlHQI5MPr7IFR1T9O9OMgjC0vMxN9zJxpok6BcWMqCtnhXg-uHFvkt1E2VXj1X5nvf1Gvp8vi1dGc3U/s1600/social.png) no-repeat; height:32px; width:32px; background-position: 0px 0px; display:;"><a href="http://feeds.feedburner.com/haseebnetwork" rel='external nofollow' title="RSS feed" target='_blank'></a></td>

<!--Twitter-->
<td style="background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfgPuGhuUY7UOVDXUsaHhzzmopJILn3YA_VkcpMx6fVQ4AFRCEtih0y6qW0v3NKlHQI5MPr7IFR1T9O9OMgjC0vMxN9zJxpok6BcWMqCtnhXg-uHFvkt1E2VXj1X5nvf1Gvp8vi1dGc3U/s1600/social.png) no-repeat; height:32px; width:32px; background-position: -33px 0px; display:;"><a href="http://www.twitter.com/carelexxmalik" rel='external nofollow' title="Follow on Twitter" target='_blank'></a></td>

<!--Facebook-->
<td style="background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfgPuGhuUY7UOVDXUsaHhzzmopJILn3YA_VkcpMx6fVQ4AFRCEtih0y6qW0v3NKlHQI5MPr7IFR1T9O9OMgjC0vMxN9zJxpok6BcWMqCtnhXg-uHFvkt1E2VXj1X5nvf1Gvp8vi1dGc3U/s1600/social.png) no-repeat; height:32px; width:32px; background-position: -66px 0px; display:;"><a href="http://www.facebook.com/carelexxmallik" rel='external nofollow' title="Like us" target='_blank'></a></td>

<!-- LinkedIn -->
<td style="background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfgPuGhuUY7UOVDXUsaHhzzmopJILn3YA_VkcpMx6fVQ4AFRCEtih0y6qW0v3NKlHQI5MPr7IFR1T9O9OMgjC0vMxN9zJxpok6BcWMqCtnhXg-uHFvkt1E2VXj1X5nvf1Gvp8vi1dGc3U/s1600/social.png) no-repeat; height:32px; width:32px; background-position: -99px 0px; display:;"><a href="http://www.linkedin.com/in/carelexxmalik" rel='external nofollow' title="Linkedin Network" target='_blank' ></a></td>

<!-- Google Plus -->
<td style="background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfgPuGhuUY7UOVDXUsaHhzzmopJILn3YA_VkcpMx6fVQ4AFRCEtih0y6qW0v3NKlHQI5MPr7IFR1T9O9OMgjC0vMxN9zJxpok6BcWMqCtnhXg-uHFvkt1E2VXj1X5nvf1Gvp8vi1dGc3U/s1600/social.png) no-repeat; height:32px; width:32px; background-position: -132px 0px; display:;"><a href="https://plus.google.com/u/0/108867173879409387931" rel='external nofollow' title="Follow on Google+" target='_blank' ></a></td></tr></table>

</div>

<div class="emailsub">
<div class="emailicon"><center><img src="http://cdn4.iconfinder.com/data/icons/dortmund/dortmund-16x16/email.png" /> Stay Updated via Email Newsletter</center></div>

<div class="emailupdatesform">
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=haseebnetwork', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><input gtbfieldid="10" class="emailupdatesinput" name="email" value="Enter your email..." onblur="if (this.value == &#39;&#39;) {this.value = &#39;Enter your email...&#39;;}" onfocus="if (this.value == &#39;Enter your email...&#39;) {this.value = &#39;&#39;;}" type="text" /><input value="haseebnetwork" name="uri" type="hidden" /><input value="Join" class="joinemailupdates" type="submit" /></form>
</div>

</div>
</div>