HackingUniversity - Hacks . Tricks . How-To's

06 October 2013

Add Beautiful Social Count Displaying Widget in Blogger

social-count-widget

Hey everyone would you like to add some widget that allows your visitors to display exactly how many subscribers you have on your social accounts. Well now this is not automatic but yes you can manually make changes anytime you want to the numbers. Well the best part about this widget is that it has a sliding shutter effect that makes it look awesome as soon as someone hovers above the social icons the shutter gets down and shows the numbers of subscribers on that particular account.

So this widget just looks amazing and you can add it to your blogger sidebar or below every post, so that every visitor gives a look at this widget and then easily click on it to subscribe to your account. So now I do not have a working demo for this widget but yes you can just apply it onto your blog and see this widget in action.

  1. Open Blogger > Template > Edit HTML.
  2. Press Ctrl + F & search for ]]></b:skin> tag & paste below code 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);}

  3. Now again search for </body> tag & paste below script 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>

  4. Now we have successfully pasted the CSS and Script for this widget, so now you only need to add the HTML to display this widget.
  5. So now just copy below HTML code & navigate to Blogger > Layout > Add Gadget.
  6. Now choose HTML/JavaScript and add 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>

  7. So now you need to edit few things in this HTML code, just change the text in blue with your Page URL's and Orange with the subscriber number.
  8. Now press Save Gadget and align the gadget accordingly, now your gadget codes are placed all together so now its time to see this awesome gadget working.

So now refresh your blog to see this awesome widget working perfectly, makes sure to comment on how you loved that shutter effect, well its just awesome so have fun and enjoy. Do share this post with your friends :)