Smart Social Media Widget for Blogger | Social Media Share Button.

Now I am going to share a wonderful tutorial about- how to add smart social media widgetfor blogger. With this widget you can link your social media profile Facebook, Twitter and Rss Google plus,linkedin and YouTube.

How to add Smart Social Media Widget

1. Log in to blogger account >> Layout .
2. Click Add Gadget and select 'HTML/Javascript
4. Now Paste below code in the box.

<style type="text/css">

.btrix_socialwidget { width: 280px; }

.btrix_socialwidget ul { border: 1px solid #CCCCCC; margin: 0; padding: 0; }

.btrix_socialwidget ul li { list-style:none; padding: 0; text-transform: none; border-bottom: 1px solid #CCCCCC; border-top: 1px solid #FFFFFF; }

.btrix_socialwidget ul li:first-child { border-top: 0 none; }

.btrix_socialwidget ul li:last-child { border-bottom: 0 none; }

.btrix_socialwidget ul li a { background-color: #F2F2F2 !important; color: #404040; display:block; }

.btrix_socialwidget ul li a:hover { background-color: #949494 !important;color: #0d0354; }

.btrix_socialwidget ul li .rss { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfd1O2n10CnUVvNmMRX3ARp32x_grXeAvo3pXJltpg8pzWoMP7bDZ5MSDJM027sTDU8rU-2UNR0UpC67Ool0hXjCAd0UUrkzYd5tV6RRBCpaPuSn__YMflUTmWRDU5-mWgJ_vuZw0s0bg/s1600/bt-RSS.png") no-repeat scroll 10px center #F87E12; padding: 17.5px 60px; }

.btrix_socialwidget ul li .twitter { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqZSrEYw4WJTjIxmFgGVNP4qWY07DKr4bW2yozoHCKiSghOvHS7RQpf5LzCGZb3hRLeGUztDNl6o6yf_DYSU4gm3yKKJDNxaaGHA2Dtc_vPwTWjDl0IidBHCMiUd9dVLsFNT1EtMKLL-k/s1600/bt-Twitter.png") no-repeat scroll 10px center #4CACEE; padding: 17.5px 60px;}

.btrix_socialwidget ul li .facebook { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilk0bK3aNpHL7ufuWA2YTGM2IpXXJ6L2aV5NEdrvMu12FHW8fdu_BqmbCwWerHFArdSyN5CB1Cs2HHCJZNaMuLv2d3cIYjSfvSLzQXYzQSyMbDFuiqRtpVyIX1y0ai7_JIWpNFUvuYR4c/s1600/bt-Facebook.png") no-repeat scroll 10px center #3B5998; padding: 17.5px 60px; }

.btrix_socialwidget ul li .google { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNDYbBc4fsnYlgiVmSVc9pgYIwQ2N3tvTvxF824KNy_XRCY9N6GECY3Yk9VH4lpBwyFYHmeIeVEOX6NN9toiIvDE-KZKugge_Pvs9uQfiCtOb9WWOhthLRX_FqBmIVC8m266m4xrzL7mE/s1600/bt-google.png") no-repeat scroll 10px center #D44937; padding: 17.5px 60px; }

.btrix_socialwidget ul li .linkedin { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0hc_zKirD7Wncprel7lYCviT0QmXt6cqBvSVplZqiN8pFtqjrN9P1S9iTJgl9lcxf1jfTvhwbC3wsq7DcdJhEQmnRmhtLwlK2YsnrvrGdpLX6QwQIH1PfQYt0eibFKGlM8jLCvmbajkc/s1600/bt-LinkedIn.png") no-repeat scroll 10px center #3692C3; padding: 17.5px 60px; }

.btrix_socialwidget ul li .youtube { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjN9u7_k2fTZemT0vz1OBt8idWe9V4UIVmGVs0HHzY1gm2SV1LH6gEcuy0q_ifFRjnx1Mym1pfBd26NM4ARDJStdwscOn-jhX2Qt5p2g73dojfknofl19Rpfcc_4dJYFgPEgZBoFrgSgd0/s1600/bt-Youtube.png") no-repeat scroll 10px center #C6312B; padding: 17.5px 60px; }

.social-about { display: none; }

</style>

<div class="btrix_socialwidget">

<ul>

<li><a class="rss" href="http://feeds.feedburner.com/bloggertrix">Subscribe to the RSS Feed</a></li>

<li><a class="twitter" href="https://twitter.com/bloggertrix">Follow me on Twitter</a></li>

<li><a class="facebook" href="https://www.facebook.com/bloggertrix">Find me on Facebook</a></li>

<li><a class="google" href="https://plus.google.com/107955298793879607964" rel="author">Join me on Google+</a></li>

<li><a class="linkedin" href="http://linkedin.com/Username">Connect on LinkedIn</a></li>

<li><a class="youtube" href="http://www.youtube.com/Username">Watch me on YouTube</a></li>

</ul>

</div>

Now need to change the counters manually, just change deferent color number according to profile.

Replace bloggertrix with your Feedburner ID

Replace bloggertrixwith your Facebook username

Replace bloggertrixwith your Twitter Username

Replace 107955298793879607964 with your Google plus ID

Replace Username with your linkedin Username

Replace Username with your Youtube Username

5. Now save and you are done.

Share this post