Social Share & email Subscribtion cool

Look at the picture below, appealing not to apply to blogger. Interested in using it, please watch: 

1. Login blog.
2. Template -> Edit HTML.
3. Click Continue, and check expand widget templates.
4. Find <data:post.body/> code (Select the first).
5. Copy and paste the code below, right below :

<!--No Ordinary Social Subscription Widget--> 

<b:if cond='data:blog.pageType == &quot;item&quot;'> 

<style> 

.tbibox { 

background: #fff; 

border: 1px solid #ddd; 

height: 360px; 

margin: 10px auto; 

padding: 10px; 

width: 572px; 

-webkit-border-radius: 10px; 

border-radius: 10px; 

} 

.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; 

} 

.tbisharebox { 

border: 1px solid #D3D3D3; 

margin: -157px 0 0 330px; 

padding: 8px; 

width: 225px; 

-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; 

} 

.tbisharebox:hover { 

-moz-box-shadow: 1px 1px 2px #CCC inset; 

-webkit-box-shadow: inset 1px 1px 55px 1px rgba(249, 215, 126, 1); 

box-shadow: inset 1px 1px 55px 1px rgba(249, 215, 126, 1); 

-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; 

} 

</style> 

<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css' /> 

<div class='tbibox'> 

<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=Masukkan-ID-Feedburner-Kamu&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='Masukkan-ID-Feedburner-Kamu' /> 

<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='Masukkan-URL-FACEBOOK-Kamu' target='_blank' title='Join us on Facebook'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyb36G5HlfKJB2pYgtefmqW0skGVHtrQIfzADHCSOO401BOO2V_aapHXCExocpx3wkYfvAqgZks3l2iIjlGfvDkSahUv7ZQhejVBfoYF-edLHtgWd3rbuGxuVxhblRpCemoc7VGFsyz0M/s32/facebook500.png' alt='facebook'/></a> 

<a href='Masukkan-URL-TWITTER-Kamu' rel='nofollow' target='_blank' 

title='Follow us on Twitter'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuHXU5igyb-yQ8ehRyiAKRGsem5mJ0zMFuf95F7CN-Gg9KWlz1IRedLDJ-Qb4miH9xrgTqOKaTiUA232dJOHuMkbFpu_PK6JTOPnl2xnV7m7nhiJ6Hk6Q3Uw4W-W4dz7UdgwEliABb3gA/s32/twitter.png' alt='twitter'/></a> 

<a href='Masukkan-URL-GOOGLE-PLUS-Kamu' rel='nofollow' target='_blank' 

title='Follow us on Google+'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_LUknCsB9yHpoQ6nQZool1v4UxLArSpJPp07NfTxDRQTgLqHPnd9lpjdHAqEgFGP9gyjpa9bq_7D6btjZxL5tfI0G0uGNQ4w7J-Qd8aaOPwewPa2brFv4OYBNtoZMRBZRyQZL8HekRRA/s32/googleplus-revised.png' alt='gplus'/></a> 

<a href='Masukkan-URL-PINTEREST-Kamu' rel='nofollow' target='_blank' 

title='Follow us on Pinterest'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwGMOyvZkf4Vps2Cvbfja7khP2gQdo5VF2hr18vzFEUFzI9s9FhDs4YjzVlBlAdZ1vQ_nypK0xbuMrz0Z-E6T61PXiubMxpYXXknljqCBXh-NUgbRSGNa0gUsl1dT_lYxyctEtL3KpozQ/s32/pinterest.png' alt='pinterest'/></a> 

<a href='Masukkan-URL-RSS/FEED-Kamu' rel='nofollow' target='_blank' 

title='Subscribe to RSS'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjS7QPROFZ9tyttRXLPid1NLzpcAAPy2gTddr9xPpN34ZUmgCyOEuD_v7fkBPDvAHarsnCDm2BgUV5FRvsMKZ43mdchdzEkcw7vkLkCGOjU9rnH4E_FRHDOIZTVXu4ttQCKSdPJnzZJmA4/s32/rss.png' alt='rss'/></a> 

</div> 

</div> 

<div class='tbisharebox'> 

<script type='text/javascript'> 

var switchTo5x = true; 

</script> 

<script src='http://w.sharethis.com/button/buttons.js' type='text/javascript'/> 

<script type='text/javascript'> 

stLight.options({ 

onhover: false 

}); 

</script> 

<div style='margin: 5px 5px;'> 

<span class='st_fblike_hcount' displaytext=''></span> 

</div> 

<div style='margin: -30px -20px 0 0; float: right;'> 

<a href='http://twitter.com/share' rel='nofollow' class='twitter-share-button' 

expr:data-url='data:post.canonicalUrl' expr:data-text='data:post.title' 

data-count='horizontal'  data-lang='en'></a> 

<b:if cond='data:post.isFirstPost'> 

<script type='text/javascript' src='http://platform.twitter.com/widgets.js'></script> 

</b:if> 

</div> 

<div class='addthis_toolbox addthis_default_style' style='margin: 10px 0 12px 85px;'> 

<a class='addthis_counter'></a> 

<script type='text/javascript' src='http://s7.addthis.com/js/250/addthis_widget.js'></script> 

</div> 

<div style='margin: 5px 5px;'> 

<su:badge layout='1'></su:badge> 

<script type='text/javascript'> 

(function () { 

var li = document.createElement('script'); 

li.type = 'text/javascript'; 

li.async = true; 

li.src = ('https:' == document.location.protocol ? 'https:' : 'http:') + '//platform.stumbleupon.com/1/widgets.js'; 

var s = document.getElementsByTagName('script')[0]; 

s.parentNode.insertBefore(li, s); 

})(); 

</script> 

</div> 

</div> 

<div style='float: right; margin: -40px -5px 0 0;'> 

<div class='g-plusone' data-size='medium' expr:data-href='data:post.url'></div> 

<script type='text/javascript'> 

(function () { 

var po = document.createElement('script'); 

po.type = 'text/javascript'; 

po.async = true; 

po.src = 'https://apis.google.com/js/plusone.js'; 

var s = document.getElementsByTagName('script')[0]; 

s.parentNode.insertBefore(po, s); 

})(); 

</script> 

</div> 

<div style='margin-top: 20px;'> 

<iframe allowTransparency='true' frameborder='0' scrolling='no' src='http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fhzndi&amp;width=570&amp;colorscheme=light&amp; show_faces=true&amp;stream=false&amp;header=false&amp;height=180' 

style='border:none; overflow:hidden; width:570px; height:180px;' /> 

</div> 

</div> 

</b:if> 

<!--hzndi.blogspot.com-->

<!--No Ordinary Social Subscription Widget-->

NOTE: Replace www.facebook.com% 2Fhzndi with your Facebook Fanpage URL name,% 2F is the code of the slash, for example, which had www.facebook.com / hzndi later became www.facebook.com dibuah% 2Fhzndi.

4. Oh yeah, if you do not want complicated, this widget can be used as a regular widget by:

Click Layout -> Add a Gadget -> HTML / Javascript and JS enter the code above.

5. Click save when done. Good luck.

source : here