In this post i'm going to explain how to add Wooden style social sharing media join us buttons for your blog and website.Wodden Style Social media widget with Css and HTML.
DEMO
1. Log in to blogger account.
2. Now select "Layout"
3. Click Add Gadget and select 'HTML/Javascript
4. Paste below code
<style>
/* Social Icons
----------------------------------------------- */
a.social-icons {
margin-right: 5px; /*Adjust This Value As Needed*/
height:45px;
width:45px;
}
a.social-icons:hover {
opacity: .7;
filter:alpha(opacity=70); /* For IE8 and earlier */
} height:45px;
width:45px;
</style>
<a class="social-icons" href="https://facebook.com/bloggersstand"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicDnP0pDxxwIZ7Bl1sdpM_U3pfVmMdxpvGxqgykyhj5iAHgjXsyDFYm7TERtc8A9wCSvXmoXhXR7eV8R_rczzp1yR4V7i4vM1KoN3RuwKKB2cwvKeFsR_IqXkp10Q_leC5hEDvDT_2f54/s1600/btrix_facebook-icon.png" /></a>
<a class="social-icons" href="https://twitter.com/bloggersstand"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuY7HvlIQDHmtLe7WeJEWA1D1zZT403tSVHbd6zG94aiHE3KhSKDB6x96MpkGFAcRPfyiCTTtjdjK3Dq9k8LTEQbhJekAYBKCCyMeffWaAYSEDQtQyKPEZDOlecBU92_f52rexxb8yjHM/s1600/btrix_twitter-icon.png" /></a>
<a class="social-icons" href="https://digg.com/id"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhi5_i8fC2WiuSy1buinwLTQwPZLzOJF_SimXk93tCjlUHCDQ_kNcLWZcW8-rwik02sYSKNH5wCXKtrvBqOQc0p0yunD-dIRRQec6rltvMtg9q_pGWaZ518IzLc_OIfTvBmDcWfbFRgStE/s1600/btrix_digg-icon.png" /></a>
<a class="social-icons" href="http://www.feedburner.com/bloggersstand"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjg9x68X_1_rwmOmsxTkdgkUGvIi3bqt_EQ9kvIHZobjkykmqNdmMS0SyFrcIVAtoo736_ax7WNeeSDwbZPFZ2Jx5EuAC-RWtRI8sf2cttWjnJdYPZaffLkJn4qR6HsvWVa6oHMxc3F3no/s1600/btrix_rss-icon.png" /></a>
<a class="social-icons" href="http://stumbleupon.com/username"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiF8e_ZUFt7SEXBjwv8KmIRXoT3YfO4KoAWkaSrOoHxKTH5jp6y5n9BW1ue5kKTnM-Ud6nyXvpnD_hYCZ6RSRq-AcerX2AI97jzWti7K_o5R3S-9VzsDoxQfFsGo0FkMSMtHXizU15tYPU/s1600/btrix_stumble-icon.png" /></a>
- Change bloggersstand with your Feedburner ID
- Change bloggersstand with your Facebook username
- Change bloggersstand with your Twitter Username
- Change Username with your Stumbleupon username
- Change id with your digg username
5. Now save your 'HTML/Javascript'. Done !