Fully Customized Social share with subscribe box

Demo Link 

This is fully customized social share with subscribe box widget for blogger templates .i would like to thank Mohammad Mustafa Ahmedzai for sharing this awesome widget .

Features :

• Beautiful subscribe box 
• social share icons 
• Mouse hover effect .

Instructions :

1. Goto Blogger Dashboard .
2. Layout -> Add a gadget ->Html/javascript .
3. Add the below code .

<style>
.tbisubscribe {
border: 1px solid #D3D3D3;
padding: 8px;
width: 300px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.tbisubscribe:hover {
-moz-box-shadow: inset 1px 1px 10px 1px rgba(249, 215, 126, 1);
-webkit-box-shadow: inset 1px 1px 10px 1px rgba(249, 215, 126, 1);
box-shadow: inset 1px 1px 10px 1px rgba(249, 215, 126, 1);
}
.tbimailbox {
border: 1px solid #D3D3D3;
-webkit-border-radius: 4px;
border-radius: 4px;
-moz-box-shadow: 1px 1px 1px 1px rgba(255, 172, 84, 0.4) inset;
-webkit-box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.4) inset;
box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.4) inset;
color: #666;
font: 14px "trebuchet ms", sans-serif;
padding: 7px 15px;
width: 160px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.tbimailbox:hover {
-webkit-box-shadow: none;
box-shadow: none;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.tbisubmit {
font: bold 12px Tahoma, Geneva, sans-serif;
font-style: normal;
color: #ffffff;
background: #ff5714;
border: 0px solid #ffffff;
text-shadow: 0px -1px 1px #222222;
box-shadow: 2px 2px 5px #000000;
-moz-box-shadow: 2px 2px 5px #000000;
-webkit-box-shadow: 2px 2px 5px #000000;
border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
padding: 8px 15px;
cursor: pointer;
margin: 0 auto;
}
.tbisubmit:active {
cursor: pointer;
position: relative;
top: 2px;
}
.tbisubmit::-moz-focus-inner {
border: 0;
padding: 0;
margin: 0;
}
</style>
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css' />
<div class='tbisubscribe'>
<div style='color: #666666; font-weight: bold; font: 22px Oswald, cursive; margin: 0px 0px 10px 15px;'>Get Free Updates in your Inbox</div>
<div style='margin: 10px 0 0 6px;'>
<form action='http://feedburner.google.com/fb/a/mailverify' class='emailform'
method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=jstxplore&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true'
style='margin: 0pt;' target='popupwindow'>
<input name='uri' type='hidden' value='jstxplore' />
<input name='loc' type='hidden' value='en_US' />
<input class='tbimailbox' 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='tbisubmit' title='' type='submit' value='Subscribe'/>
</form>
</div>
<div style='border: none; color: #666666; font: 22px Oswald, cursive; margin: 25px 0 0 5px;'>Follow us on:</div>
<div style='margin: -32px 0 0 120px;'>
<a href='https://www.facebook.com/jstxplore' target='_blank' title='Join us on Facebook'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUEJtRAKa0oSWU2jV3XfDYGEIjKUjyFFeZ8-4Sa0OZEeP6taKgME8CuO-x4jU8TeiNaRsiVrjAwmS3bP0VfQ_Egdfi23mPU9c7LDY4a-15DsUtNpmjA2nZO-OMug1BQYTLqmbgBHML-48/s1600/facebook500.png' alt='facebook'/></a>
<a href='https://twitter.com/vndkmr97' rel='nofollow' target='_blank'
title='Follow us on Twitter'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-_yIH6qTG4Lddpuu36Y3FhQKDrAbhq5pyaysSRa_noWhWTsX3hrOkBB6jK0CFlRWyd-7wY2wOy_Bu8dilDKdytV39ohxrxyBTrR500QFOvvdLCL0Bs9PWNVezZtZ120fPPbDauzP7V3g/s1600/twitter.png' alt='twitter'/></a>
<a href='https://plus.google.com/u/0/102302192337578655699' rel='nofollow' target='_blank'
title='Follow us on Google+'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhv-xG5OMfJWXLeT5kn9AXNcoW6o39ylc26PuPULWUinTCuSNnIrGi9sbTzkzIwGGSs9I4hyhBj_jI843T9GY0bT-f_BAiILEwUtcE6xjCvOpQSb7y7RsgYYlJeSB9IjXkifOil8kvq920/s1600/googleplus-revised.png' alt='gplus'/></a>
<a href='http://pinterest.com/vndkmr97/' rel='nofollow' target='_blank'
title='Follow us on Pinterest'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieBFoy9geHQTumjBQRdDtI8Y-m0yNgF-QEwa7UPndgyx8rj_EIoAa0se2kyZtMQKQOaQQT_c3c_Xi5p6aaCyImPzlCzjb76dYayxRJZr_wGx21I272pu8OGUsGwaJ8Ws01AdT2CSNLkKk/s1600/pinterest.png' alt='pinterest'/></a>
<a href='http://feeds.feedburner.com/jstxplore' rel='nofollow' target='_blank'
title='Subscribe to RSS'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqVYmrpLCwro4_AnK0JlfQBYoUl5oaPIriih9gQyYCXKeAmY6iM3BMZsbpeDRuHlzv0URAdcBYx3Ts1bWtL0jeV3UnmEfzt8pXUfWNvFETfLElkQGCKYObxTpbADOyHiv7sapUhEe8ni0/s1600/rss.png' alt='rss'/></a>
</div>
</div>

Note : 

•  Make sure you have changed the following with your links .

1. Change "jstxplore" with your feed burner name.
2. Change"https://www.facebook.com/jstxplore" with your facebook name.
3. Change"https://twitter.com/vndkmr97"with your twitter name.
4. Change"https://plus.google.com/u/0/102302192337578655699"with your Google + name.
5. Change"http://feeds.feedburner.com/jstxplore"with your feed burner link.

• To change the width , height and color of the widget check the <style> codes .

Once again i would thank Mohammad Mustafa Ahmedzai , author and founder of My Blogger Tricks for sharing this widget .

Regarding queries and wanna say thanks for sharing this widget ? comment below ..