July 16, 2014

Wednesday, July 16, 2014
'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.


Post a Comment

Copyright © 2013-16 Crawlist All Right Reserved
Designed By Me {K.Shazzad}