Attractive Social Media Widget for Blogger

In this tutorial im gonna explicate how to add together attractive social media widget for blogger. By using this widget you lot tin link your social  media  profile Facebook, Twitter and  Rss  Google plus,linkedin as well as YouTube. You tin link alongside your social icons. Check the exhibit from below link.

In this tutorial im gonna explicate how to add together attractive social media widget for blogger Attractive Social Media Widget for Blogger

How to add together Attractive Social Media Widget


1. Log inward to blogger concern human relationship as well as Click driblet down.

In this tutorial im gonna explicate how to add together attractive social media widget for blogger Attractive Social Media Widget for Blogger

2. Now guide “Layout” Like Below.

3. Click Add Gadget as well as select ‘HTML/Javascript

4. Paste below 1 of below code.

<style type="text/css"> .btrix_socialwidget { width: 280px; }  .btrix_socialwidget ul { border: 1px corporation #CCCCCC; margin: 0; padding: 0; }  .btrix_socialwidget ul li { list-style:none; padding: 0; text-transform: none; border-bottom: 1px corporation #CCCCCC; border-top: 1px corporation #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("http://2.bp.blogspot.com/-NdgYDGOx2WU/UXTEcMCT-_I/AAAAAAAAAfQ/VtwyVKuNdJY/s1600/bt-RSS.png") no-repeat scroll 10px pump #F87E12; padding: 17.5px 60px; }  .btrix_socialwidget ul li .twitter { background: url("http://4.bp.blogspot.com/-9sG2X-wrCeY/UXTEchAQ2HI/AAAAAAAAAfg/gtq9mwSHC1g/s1600/bt-Twitter.png") no-repeat scroll 10px pump #4CACEE; padding: 17.5px 60px;}  .btrix_socialwidget ul li .facebook { background: url("http://4.bp.blogspot.com/-Q6uMZtVZjHo/UXTEcAQSlHI/AAAAAAAAAfY/ePt9AJoqCrE/s1600/bt-Facebook.png") no-repeat scroll 10px pump #3B5998; padding: 17.5px 60px; }  .btrix_socialwidget ul li .google { background: url("http://3.bp.blogspot.com/-57g4ooxoC6U/UXTEc0EniXI/AAAAAAAAAfk/G1HU6s-_UTM/s1600/bt-google.png") no-repeat scroll 10px pump #D44937; padding: 17.5px 60px; }  .btrix_socialwidget ul li .linkedin { background: url("http://1.bp.blogspot.com/-sSNL3X-MkxE/UXTEcJxsHGI/AAAAAAAAAfU/MFYv7v3vAPo/s1600/bt-LinkedIn.png") no-repeat scroll 10px pump #3692C3; padding: 17.5px 60px; }  .btrix_socialwidget ul li .youtube { background: url("http://3.bp.blogspot.com/-foQvV9Mgig4/UXTEcjfOZPI/AAAAAAAAAfo/kTKqKaFiKNU/s1600/bt-Youtube.png") no-repeat scroll 10px pump #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> 

You bring to alter the counters manually, only alter ruby color let out according to profile.

Replace bloggertrix alongside your Feedburner ID
Replace bloggertrix alongside your Facebook username
Replace bloggertrix alongside your Twitter Username
Replace 107955298793879607964 alongside your Google addition ID
Replace Username alongside your linkedin Username
Replace Username alongside your Youtube Username

5. Now relieve your HTML/Javascript’.You are done.
Sumber http://www.bloggertrix.com/