'Social Media Fan with Count' widget for Blogger/Wordpress

'Social Media Fan with Count' widget for Blogger/Wordpress
Social media fan with fake counter is pretty much famous widget. This widget is simple neat looking, colorful icon effect on hover, lightweight powered by CSS image sprite transition, CSS3, HTML. Unlike other social media profile widget this widget load faster, configurable and reduce http request on server. This widget contains 3 profile slot (Facebook, Twitter, Feedburner) Let's see how it looks like and how to add it on your Blogger blog and Wordpress sites

'Social Media Fan with Count' widget for Blogger/Wordpress


'Social Media Fan with Count' widget for Blogger/Wordpress

Live Demo- (Click Here)


<style>/*crawlist.net CSS starts*/
#ks-diyfan ul {
overflow: hidden;
#ks-diyfan ul li {
border-bottom: 1px solid #dddddd;
border-right: 1px solid #dddddd;
border-top:#dddddd 1px solid;
border-left:#dddddd 1px solid;
display: block;
float: left;
width: 33%;
#ks-diyfan ul li a {
-moz-transition: all 0.6s ease-out 0s;
display: block;
float: left;
text-decoration: none;
width: 100%;
#ks-diyfan ul li a span, #ks-diyfan ul li a large, #ks-diyfan ul li a small {
display: block;
float: left;
margin: 0 auto;
text-align: center;
width: 100%;
#ks-diyfan ul li a span {
background:url("http://4.bp.blogspot.com/-B31b71QI5KM/U8Ae2NFyR3I/AAAAAAAAEdo/LOyfqjPHlSE/s1600/A.png") no-repeat;
float: none;
height: 46px;
margin-bottom: 5px;
text-indent: -9999px;
width: 47px;
#ks-diyfan ul li.feed a:hover h5 {
background: #F18421;
#ks-diyfan 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;
#ks-diyfan ul li a span:before {
#ks-diyfan ul li.twitter a:hover h5 {
background: #45B0E3;
#ks-diyfan ul li.facebook a:hover h5 {
background: #3C5B9B;
#ks-diyfan ul li.feed a span {
background-position: 0 0;
#ks-diyfan ul li.twitter a span {
background-position: 0 -91px;
#ks-diyfan ul li.facebook a span {
background-position: 0 -47px;
#ks-diyfan ul li a large {
color: #333232;
font-size: 23px;
font-weight: 500;
#ks-diyfan ul li a small {
color: #333232;
font-size: 10px;
}/*crawlist.net CSS ends*/
<!--crawlist.net widget starts-->
<div id="ks-diyfan">
<li class="feed"><a target="_blank" href="http://feeds.feedburner.com/your feed id" rel="nofollow" title="Never miss a post!"><h5><span>feed</span></h5><large>1800</large> <small>Subscribers</small></a></li>
<li class="facebook"><a target="_blank" href="https://www.facebook.com/your profile" rel="nofollow" title="Join us on Facebook"> <h5><span>Facebook</span></h5><large>3400</large> <small>Fans</small></a></li>
<li class="twitter"> <a target="_blank" href="http://twitter.com/your profile" rel="nofollow" title="Follow us on Twitter"> <h5><span>Twitter</span></h5><large>2500</large> <small>Followers</small> </a></li>
<!--crawlist.net widget ends-->

How to add this widget in Blogger
  • First log in to your Blogger, select your Blog, 
  • Go to 'Layout' tab then click 'add a gadget' 
  • Select 'html/javascript' from pop up menu. 
  • Copy following codes and configure, then save template

How to add this widget in Wordpress
  • From dashboard hover mouse on appearance tab, 
  • From appearance menu select 'widgets', 
  • Then drag and drop 'Text' content box in widget area, 
  • Copy following codes and paste into 'text' box, 
  • For new dashboard click on 'Text' add it to sidebar and paste following codes.
  • And check out your Blogger/wordpress blog

How to configure
  • First collect your following social media profiles direct links and replace with default links. Example- http://www.facebook.com/your profile with your Facebook fan page link. 
  • And place your feed id in 'your feed id' All links are red colored. 
  • And pink colored numbers are your fan counter, replace the default fan number's with your expected fan number.
So, what you think about this widget and how it working on your Blog don't forget to mention :) I'll be loved to hear.

Popular posts from this blog

Easily Get 50000 free Backlink for your website

13 Best Forum CMS/Script to use

7 best CMS/script for building Social networking website

Add Cool Social Media Sharing icons below posts in Blogger

6 Best Local Web Server software

12 best free Article Rewriter/Spinner you can use

Read Download Stephen King's Novels ePub & Apk

Read Download ePub Harry Potter Books & Apk

10 Best Free Flash Editor software to use

10 Best 3D CAD Modeling App for Android and IOS