Displaying social count widget to your blog is lets your reader to know about how many subscriber you have on social sites. it also allows your reader to follow you on different social profile of yours as well as they will be enable to find you around the internet through social count widget. However , there isn't any automatic number displayed but you can add it manually by editing to the HTML .
Well, its look awesome and easy to make it enable on your blog that you can put it at anywhere like sidebar or after the every post on your blog. i have not created any demo page for this widget but you can check out this widget after adding it to your blog.
Also see : Add Floating Social Sharing Buttons Below Blogger Post Titles
follow the steps given below to add this widget to your blog.
Go to blogger dashboard > Template > Edit HTML then search for
]]></b:skin>and paste below code just above it.
a,input{outline:none}.clear{clear:both}.clearfix,.wpr{*zoom:1}.clearfix:after,.wpr:after{content:"";display:table;clear:both}.wpr{margin:0px auto 0;width:336px}.social{background:#eaeaea;border:1px solid #cacaca;display:block;float:left;height:105px;margin:0 5px;padding:5px;width:90px;-webkit-border-radius:5px;-moz-border-radius:5px;-ms-border-radius:5px;-o-border-radius:5px;border-radius:5px;-webkit-box-shadow:inset 0 1px 1px #fff;-moz-box-shadow:inset 0 1px 1px #fff;box-shadow:inset 0 1px 1px #fff}.social .icon{background-color:#c5c5c5;background-image:url(http://i.imgur.com/QrH5YDn.png);background-repeat:no-repeat;height:40px;margin:8px auto 12px;width:40px;-webkit-border-radius:50%;-moz-border-radius:50%;-ms-border-radius:50%;-o-border-radius:50%;border-radius:50%;-webkit-transition-property:all;-moz-transition-property:all;-o-transition-property:all;transition-property:all;-webkit-transition-duration:0.2s;-moz-transition-duration:0.2s;-o-transition-duration:0.2s;transition-duration:0.2s;-webkit-transition-timing-function:ease-in-out;-moz-transition-timing-function:ease-in-out;-o-transition-timing-function:ease-in-out;transition-timing-function:ease-in-out}.social .shutter_frame{height:44px;overflow:hidden;position:relative;-webkit-border-radius:3px;-moz-border-radius:3px;-ms-border-radius:3px;-o-border-radius:3px;border-radius:3px}.social .shutter_frame .shutter{bottom:0;left:0;position:absolute;width:100%}.social .shutter_frame .shutter .number,.social .shutter_frame .shutter .text{height:40px;text-align:center;text-transform:uppercase}.social .shutter_frame .shutter .number{color:#fff;font-size:13px;line-height:40px;-webkit-border-radius:3px 3px 0 0;-moz-border-radius:3px 3px 0 0;-ms-border-radius:3px 3px 0 0;-o-border-radius:3px 3px 0 0;border-radius:3px 3px 0 0;-webkit-box-shadow:inset 0 2px 2px rgba(0,0,0,0.5);-moz-box-shadow:inset 0 2px 2px rgba(0,0,0,0.5);box-shadow:inset 0 2px 2px rgba(0,0,0,0.5)}.social .shutter_frame .shutter .text{background:#d8d8d8;color:#666;font-size:12px;line-height:47px;-webkit-border-radius:0 0 3px 3px;-moz-border-radius:0 0 3px 3px;-ms-border-radius:0 0 3px 3px;-o-border-radius:0 0 3px 3px;border-radius:0 0 3px 3px;-webkit-box-shadow:inset 0 2px 2px rgba(0,0,0,0.4),inset 0 -1px 1px rgba(0,0,0,0.2);-moz-box-shadow:inset 0 2px 2px rgba(0,0,0,0.4),inset 0 -1px 1px rgba(0,0,0,0.2);box-shadow:inset 0 2px 2px rgba(0,0,0,0.4),inset 0 -1px 1px rgba(0,0,0,0.2)}.social .shutter_frame .shutter .bar{background:#eaeaea;border:1px solid #b7b7b7;height:6px;left:0;position:absolute;top:36px;width:88px;-webkit-border-radius:2px;-moz-border-radius:2px;-ms-border-radius:2px;-o-border-radius:2px;border-radius:2px;-webkit-box-shadow:0 2px 2px rgba(0,0,0,0.5),inset 0 1px 1px #fff;-moz-box-shadow:0 2px 2px rgba(0,0,0,0.5),inset 0 1px 1px #fff;box-shadow:0 2px 2px rgba(0,0,0,0.5),inset 0 1px 1px #fff}.social#twitter .icon{background-position:8px 10px}.social#twitter .number{background:#00aced}.social#twitter:hover .icon{background-color:#00aced}.social#google .icon{background-position:-50px 10px}.social#google .number{background:#da3d50}.social#google:hover .icon{background-color:#da3d50}.social#facebook .icon{background-position:-103px 9px}.social#facebook .number{background:#3f5fa3}.social#facebook:hover .icon{background-color:#3f5fa3}body {background-image:url(http://i.imgur.com/VHkYIe6.png);
Now, again search for
</body> tag, and paste below code just above it.
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js'/><script>$(document).ready(function(){$(".social").hover(function(){$(this).find(".shutter").stop(true,true).animate({bottom:"-36px"},{duration:300,easing:"easeOutBounce"})},function(){$(this).find(".shutter").stop(true,true).animate({bottom:0},{duration:300,easing:"easeOutBounce"})})})</script>
So, we have added CSS and Javascript code for this widget and now just need to follow final step of adding HTML to display widget into your blog.
Now, copy the below HTML code and navigate to Blogger Dashboard > Layout > Add a gadget
Choose HTML/Javascript and paste below code into it.
<div class="wpr">
<a class="social" id="twitter" href="xxxxxxxx" title="">
<div class="icon"></div>
<div class="shutter_frame">
<div class="shutter">
<div class="number">1000</div>
<div class="bar"></div>
<div class="text">Followers</div></div></div></a>
<a class="social" id="google" href="xxxxxxx" title="">
<div class="icon"></div>
<div class="shutter_frame">
<div class="shutter">
<div class="number">1000</div>
<div class="bar"></div>
<div class="text">+1</div>
</div>
</div>
</a>
<a class="social" id="facebook" href="xxxxxx" title="">
<div class="icon"></div>
<div class="shutter_frame">
<div class="shutter">
<div class="number">1000</div>
<div class="bar"></div>
<div class="text">Like</div>
</div>
</div>
</a>
</div>
Now, change above blue colored text with your social profile name and orange colored number with the number of your subscribers.
Finally, save your widget and align the gadget accordingly, and check your blog how it working !
If you have any questions or suggestion about this tutorial or this blog then you should use our comment section to let us know about.
Thanks :)