Blogger trick 4 you about the blogger, seo services, adsense, softwares, tips and trick, games, widgets, hosting, make money, how to create a website.

Sunday, 8 December 2013

Create Facebook and Twitter Custom Follower Counters

By on 11:04

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,
227 Followers
or a blinking one for browsers other then IE,
227+ Fans

To add a counter you just need to do the following,
  1. Go To Blogger > Layout
  2. Choose Add a Gadget or Add a Page element
  3. Choose HTML/JavaScript
  4. 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


227 Readers

<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>

227Tweeters


<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>

Thanks alot For visiting Our Website! Kindly Bookmark and Share it With you Friends.

Technorati Digg This Facebook Twitter Stumble Stumble

0 comments:

Post a Comment