I was thinking as why some services like Facebook, Digg, orkut, stumbleupon has no follower, fan or friends counter. While I was customizing my template I needed a follower counter for Facebook but unfortunately I could not find any. So I decided that why not create my own custom follower counter. This idea enabled me to create a follower counter for any service you like!
This is how our Custom follower counter for Facebook looks like,
or a blinking one for browsers other then IE,
To add a counter you just need to do the following,
- Go To Blogger > Layout
- Choose Add a Gadget or Add a Page element
- Choose HTML/JavaScript
- Finally paste the code below inside the HTML/JavaScript widget,
<span sans ms style=" background-color:#F2F2F2; border-top: 1px solid #F2F2F2; border-right: 1px solid #8A8A8A; border-left: 1px solid #F2F2F2; border-bottom: 1px solid #8A8A8A; padding: 2px 4px 4px 4px; color: #666; font-family: sans-serif, arial; font-size: 10px;">
<span style=" background-color:#D2E9F8; font-size: 9px; border-top: 1px solid #8A8A8A; border-right: 1px solid #ddd; border-left: 1px solid #8A8A8A; border-bottom: 1px solid #ddd; padding: 0px 1px;">227<blink>+</blink></span> Followers</span>
Customization
The bolded text in the code above are described below,
background-color: This defines the background colour of the counter. To change the hexadecimal color value to something different use our colour chart.
background-color: This defines the background colour of the number count i.e 227 You can change its colour using the same color chart.
color: This defines the color of the text i.e 227 and Followers
<blink>+</blink>: The code in blue is responsible for blink the plus sign. You can write anything between <blink> and </blink> For instance symbols like k (kilo), .. etc If you don’t want this blinking effect simply delete <blink>+</blink> from the main code above.
227 and Followers: Replace these with your own follower count and count name.
Some Example Counters For Feed Readers and Twitter
FEED COUNTER
<span sans ms style=" background-color:#CC9966; border-top: 1px solid #F2F2F2; border-right: 1px solid #666; border-left: 1px solid #F2F2F2; border-bottom: 1px solid #666; padding: 2px 4px 4px 4px; color: #000; font-family: sans-serif, arial; font-size: 10px;">
<span style=" background-color:#CCCCCC; font-size: 9px; border-top: 1px solid #666; border-right: 1px solid #fff; border-left: 1px solid #666; border-bottom: 1px solid #fff; padding: 0px 1px;">227</span> Readers</span>
TWITTER COUNTER
<span sans ms style=" background-color:#F2F2F2; border-top: 1px solid #F2F2F2; border-right: 1px solid #8A8A8A; border-left: 1px solid #F2F2F2; border-bottom: 1px solid #8A8A8A; padding: 2px 4px 4px 4px; color: #33CCFF; font-family: sans-serif, arial; font-size: 10px;">
<span style=" background-color:#33CCFF; font-size: 9px; color:#fff; border-top: 1px solid #666; border-right: 1px solid #fff; border-left: 1px solid #666; border-bottom: 1px solid #fff; padding: 0px 1px;">227</span>Tweeters</span>
The Number Count Is Manual!
Since this widget is based fully on CSS and it uses no programming code so you will need to update your follower count yourself each time you receive a new Facebook follower, Feed Reader or Twitter follower etc. I hope that is not difficult to do so :)
I am sure you will enjoy reading these too,
Your feedback and suggestions are always welcomed.
|
Respected Readers:
|
If you enjoyed this post and wish to be informed whenever a new post is published, then make sure you
subscribe to our regular Email Updates!
11 comments:
hello,i am facing some problem with windows live writer.when i am trying to publish new post its showing SSL/TLS Secure channel error.u can see the full message by image link below.
http://i45.tinypic.com/2zqc4rl.jpg
plz help me with that.
Mohammad That is amazing. Thanks for making it so simple!
Jawwad
Hello Mohemmed !
Izhar Fareed here
Actually i also modified revolution template for my site www.Circuit-Lab.Com - But i have some problems.
Please help me !
I dont want to see after post adspace on homepage. But it is. I wanna see it when the post is fully expand.
Please Help.
Your Bro
Mohemmed Izhar Fareed
@Amit
Ask this question on windows live writers post! I will answer your question there. Off-topics questions will not be answered elsewhere. Sorry for this. But I want to keep things clean :>
@jawwad
you welcome dear!
@izhar
Kindly ask off-topic questions on their respective posts. I will the answer to this question on this post -> MBT Church Theme
Is it realtime facebook fans counter or just dummy?
@AfeaZd
Of Course Dummy friend :>
You will need to edit the count manually and of course you can do that!
hmmm...much tricks here..reading more
How about for wordpress? We need to know who is following, not just count the number of comments. This is for our personal site, since a lot of new comers cannot comment on blogspot. ashotofbrandy.com
Thanks,
Concerned
@LynnStrauch
If you are using a paid version of wordpress then you can easily add the above CSS and html code to your Wordpress blog by editing your style sheet. and I know that is not possible if you are using the free wordpress.
How do you add the image on the side, the little logo. I want to make it more cute, you could say. ^^
Thanks for sharing all this with us.
After using new template I cannot remove some facebook floating likes box widgets,it's automatically comes with every new template i changed ,and also if i use this facebook likes box then my drop down menu does't work , Please Help.
Your feedback is always appreciated. I will try to reply to your queries as soon as time allows.
Note:
1. To add HTML CODE in comments then please use our HTML Encoder
2. You can always Try the tutorial on our HTML Editor
3. Please do not spam Spam comments will be deleted immediately upon my review.
Regards,
Mohammad