Beautifull Sidebar Social Widget for Blogger

Social media Widget is very importance things for a blog or web site. Because, You can keep your website visitors to connect to your site by using this social widget. We all know that, there is no value to a site without visitor. So if you want to keep your visitors for a long time, then you can use this widget.

Widget's Features:

This widget has made with six importance icons: RSS, Facebook, Twitter, Google Plus, LinkedIn, YouTube. Also it has made with a .png joint image. so, this image will load very quickly.

preview

How to add this Sidebar social media widget to your blog?

Please follow these simple steps,  to add it on your site.

• Step 1: first login blogger.com 
• Step 2: secondly go to layout tab
• Step 3: Then click on “add a gadget” and Select a “html/JavaScript” gadget
• Step 4: and then copy given codes and paste into the “html/JavaScript” gadget

• Step 5: Finally Click on Save
• 
  

 <style>  
 /*----------------www.hugelearn.blogspot.com ~ Sidebar Social Widget-----------*/  
 #social-stats {  
 border-left: 1px solid #DDDDDD;  
 border-top: 1px solid #DDDDDD;  
 display: block;  
 float: left;  
 position: relative;  
 }  
 #social-stats ul {  
 overflow: hidden;  
 }  
 #social-stats ul li {  
 border-bottom: 1px solid #DDDDDD;  
 border-right: 1px solid #DDDDDD;  
 display: block;  
 float: left;  
 width: 33%;  
 }  
 #social-stats ul li a {  
 -moz-transition: all 0.6s ease-out 0s;  
 display: block;  
 float: left;  
 padding: 10px 0 3px;  
 text-decoration: none;  
 width: 100%;  
 }  
 #social-stats ul li a span, #social-stats ul li a large, #social-stats ul li a small {  
 display: block;  
 float: left;  
 margin: 0 auto;  
 text-align: center;  
 width: 100%;  
 }  
 #social-stats ul li a span {  
 background: url("http://4.bp.blogspot.com/-jN645A-bYkI/U0rQVit-liI/AAAAAAAADM0/zM2fqWp79kY/s1600/social_icon.png") no-repeat;  
 float: none;  
 height: 46px;  
 margin-bottom: 5px;  
 text-indent: -9999px;  
 width: 47px;  
 }  
 #social-stats ul li.ss-rss a:hover h5 {  
 background: #F18421;  
 }  
 #social-stats ul li h5 {  
 -webkit-transition: all 0.4s ease-out 0s;  
 -moz-transition: all 0.4s ease-out 0s;  
 transition: all 0.4s ease-out 0s;  
 background: #999999;  
 border-radius: 50% 50% 50% 50%;  
 margin: 0 auto;  
 width: 47px;  
 }  
 #social-stats ul li a span:before {  
 }  
 #social-stats ul li.ss-twitter a:hover h5 {  
 background: #45B0E3;  
 }  
 #social-stats ul li.ss-facebook a:hover h5 {  
 background: #3C5B9B;  
 }  
 #social-stats ul li.ss-google-plus a:hover h5 {  
 background: #F83E29;  
 }  
 #social-stats ul li.ss-youtube a:hover h5 {  
 background: #CC181E;  
 }  
 #social-stats ul li.ss-linkedin a:hover h5 {  
 background: #1790CD;  
 }  
 #social-stats ul li.ss-rss a span {  
 background-position: 0 0;  
 }  
 #social-stats ul li.ss-twitter a span {  
 background-position: 0 -91px;  
 }  
 #social-stats ul li.ss-facebook a span {  
 background-position: 0 -47px;  
 }  
 #social-stats ul li.ss-google-plus a span {  
 background-position: 0 -135px;  
 }  
 #social-stats ul li.ss-youtube a span {  
 background-position: 0 -180px;  
 }  
 #social-stats ul li.ss-linkedin a span {  
 background-position: 0 -226px;  
 }  
 #social-stats ul li a large {  
 color: #333232;  
 font-size: 25px;  
 font-weight: 500;  
 }  
 #social-stats ul li a small {  
 color: #333232;  
 font-size: 10px;  
 }  
 </style>  
 <div id="social-stats">  
 <ul>  
 <li class="ss-rss"><a target="_blank" href="/feeds/posts/default" rel="nofollow external"><h5><span>Rss</span></h5><large>5000</large> <small>Subscribers</small></a></li>  
 <li class="ss-facebook"><a target="_blank" href="https://www.facebook.com/HugeLearn" rel="nofollow external"> <h5><span>Facebbok</span></h5><large>14,782</large> <small>Followers</small></a></li>  
 <li class="ss-twitter"> <a target="_blank" href="http://twitter.com/HugeLearn" rel="nofollow external"> <h5><span>Twitter</span></h5><large>63,207</large> <small>Followers</small> </a></li>  
 <li class="ss-google-plus"><a target="_blank" href="https://plus.google.com/+LakshyaDhillonPro" rel="nofollow external"> <h5><span>Google+</span></h5> <large>70,781</large> <small>Followers</small> </a></li>  
 <li class="ss-linkedin"><a target="_blank" href="http://bd.linkedin.com/in/" rel="nofollow external"> <h5><span>Linkedin</span></h5> <large>2,453</large> <small>Followers</small></a></li>  
 <li class="ss-youtube"><a target="_blank" href="http://www.youtube.com/user/lakshyadhillontv" rel="nofollow external"> <h5><span>Youtube</span></h5> <large>6,237</large> <small>Subscribers</small> </a></li>  
 </ul>  
 </div> - See more at: http://hugelearn.blogspot.in/2014/06/beautifull-sidebar-social-widget-for.html#sthash.uInusTRh.dpuf  

Importance customizations:

1. Change the blue highlighted link with your Facebook fan page link.
2. Change the green highlighted link with your twitter profile link.
3. Change the red highlighted link with your Google plus page or profile link.
4. Change the purple highlighted link with your LinkedIn profile link.
5. Change the pink highlighted link with your YouTube channel link.
6. And finally change all the bolded number with the numbers of your followers, subscribers and fans.

I hope you like it and have been able to add to your site. If you have any problems, please give me it through comments.