Monday, April 22, 2013

Attractive Social Media Widget for Blogger

In this tutorial im gonna explain how to add attractive social media widget for blogger. By using this widget you can link your social  media  profile Facebook, Twitter and  Rss  Google plus,linkedin and YouTube. You can link with your social icons. Check the demo from below link.
Attractive+social+media+widget

How to add Attractive Social Media Widget


1. Log in to blogger account and Click drop down.
blog-post-option
2. Now select "Layout" Like Below.

3. Click Add Gadget and select 'HTML/Javascript

4. Paste below one of below code.

<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/AVvXsEj2mo0QyVvGS8NkQArxW3DDG3fYYNCy8zxVcUH5TP5tCDJHT2FhUfkQMVEeYXIz_I-PFqeLlp4fmtN-hZ0BLYRQQxt_xQPJ65tmbjTpsQ1GzDClIwpapbIgQvelbKiMuEiIr1sreZFkWVo/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/AVvXsEjnwXtCxFb4WI1dTE3nPAipbMSPLJtws-bB-3X6UWCOh9DvaMLTGlg2trduy91B7fAGzVO2MwHBh3WXo0KNW_Siq-hnz8smf2v9UemjdPyeC9PUSbIAovOMpn8LYtBAN_dzozpOyUY_pso/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/AVvXsEhnFutoBC2Ek1oKqIy1YMv7xzTqf7erayhccxYDf0-W5bdmEqZ0YgC4t8uobEaaDZn3Uzlv4m2TcTAP7h1dxTAxSqwBEY1QOkJY5fD5aNcgbvJBexsi_YBKWXjKVP_sKlzy6GfKqbYwTHM/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/AVvXsEhb-i83pokcMvgFi65gbtT1uockMEpzeToSVWRFgMB5eOQUIvlK2um0H5-sqxZKdjTcNFsDBwhuWFT2DbfGqcsJEzkC1MT4ifxmYlWBkuO4RT_OkhfvGAmTBUefbNSdvwZINJsTudGn7a4/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/AVvXsEi9_H2WAjUzcVPh96PEfbjx2SzRyVdhJppwf8jY9aJmouxj0750J6F0zKlvIGEAuLqix1DDl03hr-i9yZHZFEkKnOQZpU5k06ndxg9NKdfBe2EzY7Y2d8vABgSrDlMa7UXvSXXEEEApSUg/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/AVvXsEjjigINZlDkfFOSPBzOXEIiuCEgWYKE1Ei64lqhIBoK3dzF4hLSzMEYvI5p-GwNnw0naLR5Jst71XZu7fWgSAcQEeedhyphenhyphenxNHiD7qbaUX1GCTP4UIqL9iNhzzy6JhATeIwFcQBttCajJ21Y/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>
You have to change the counters manually, just change red color number according to profile.

Replace bloggertrix with your Feedburner ID
Replace bloggertrix with your Facebook username
Replace bloggertrix with 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 your HTML/Javascript'.You are done.

6 comments:

  1. Cool! This widget is suite for my template nice work dude. i gonna use this one.

    ReplyDelete
  2. Thanks for this tutorial. It looks easy to implement. I am going to try it! This comment was posted in Kingged.com - the IM social site, where this post has been "kingged".
    Sunday - Kingged.com
    http://www.kingged.com/attractive-social-media-widget-for-blogger-2/

    ReplyDelete
  3. Nice Widgets. For making blog more attractive for bring traffics to need these kinds of attractive widgets and plugins.

    ReplyDelete
  4. Hi! Great post & tutorial, very helpful! ... Only thing missing though are both Instagram & Pinterest; it'd be great if you one day would be able to add them to this particular widget? BTW, definitely gonna share your post. Well done!

    ReplyDelete