.
'Social Media Fan with Count' widget for Blogger/Wordpress
Codes-
<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%;
height:100px;
width:75px;
}
#ks-diyfan ul li a {
-moz-transition: all 0.6s ease-out 0s;
display: block;
float: left;
padding-top:5px;
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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiksAUTq46_eKojYq2oKR5dAOLfh7xwl1Ms418JRruSu3DgxRffWMBmfxC7ax1OKQrhRM3ExG5cK1caw7T5FyFPUHK7Npp5G0wZshktIbqceMmMCyZpjHybMEErSz4I7CslfcD0Pb3BLCk/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*/
</style>
<!--crawlist.net widget starts-->
<div id="ks-diyfan">
<ul>
<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>
</ul>
</div>
<!--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.
