Hi, I'm a web developer and blogger from Russia. My nickname is Dimox.
Sorry for my English, it's not my native. Read more about me and my blog.

Making Pretty FeedBurner Counter With Only CSS3

Making Pretty FeedBurner Counter With Only CSS3

Lately I often play with CSS3, in particular with border-radius and box-shadow properties. They allow to easily make a beautiful design of page elements like buttons, tabs etc.

As a result I have made pretty FeedBurner counter using only CSS3, and in this post I want to tell you, how to create such a counter on your site.

I made a demo with different colors of counter. Look at it.

We will display the digits as text, therefore we’ll need a WordPress plugin, which able to do this. I very like FeedBurnerCount plugin and I recommend to use it for our FeedBurner counter.

HTML + PHP code

HTML code of a counter including the PHP code of the FeedBurnerCount plugin will looks like this:

<div id="feedcount"><div id="counter"><?php echo fbc_count() ?></div><div id="readers">readers</div></div>

CSS styles

Now we will design a counter using CSS. I will show an example on orange counter.

Main styles looks like this:

#feedcount {
	display: inline-block;
  text-align: center;
	padding: 2px 4px 1px 1px;
	font: bold 11px/14px Arial, sans-serif;
	overflow: hidden;
	color: #FFF;
	background: #FC8205;
  border: 1px solid #F25805;
	*width: 85px; /* only for IE6 and IE7 */
}
#readers {
	float: right;
	padding: 1px 0 0;
}
#counter {
	float: left;
	padding: 1px 3px 0;
	margin: 0 5px 0 0;
  font-size: 13px;
	position: relative;
	top: -1px;
	color: #333;
	background: #FDC077;
  border: 1px solid #F25805;
  border-right-color: #FEE0BC;
  border-bottom-color: #FEE0BC;
}

We’ll get such a counter:

FeedBurner counter

Figure 1

Now we add little bit of CSS3 styles to make the counter more glamorous. Firstly it’s rounded corners:

#feedcount {
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
}

Secondly it’s inner and outer shadow:

#feedcount {
	-moz-box-shadow: inset 0 0 2px #FFF, 1px 1px 1px rgba(0,0,0,0.15);
	-webkit-box-shadow: inset 0 0 2px #FFF, 1px 1px 1px rgba(0,0,0,0.15);
	box-shadow: inset 0 0 2px #FFF, 1px 1px 1px rgba(0,0,0,0.15);
}

And the end result will look like:

FeedBurner counter

Figure 2

As you can see, it’s very easy to make sexy FeedBurner counter in any color just changing several CSS styles.

What About Browsers?

Of course, the shadows and rounded corners will work only in modern browsers: FireFox, Safari, Chrome, Opera. In Internet Explorer we’ll see a counter like on figure 1. One more thing – unfortunatelly, inset box-shadow not yet working in Safari.

Cоmmеnts (17):
  1. 1
    @
    onjee said:

    oy eee. It is very very good. thanck’s baby.

  2. 2
    @
    onjee said:

    I’m your fanatiks

  3. 3
    FelipeKM said:

    Hey man, nice post!
    Eventually I’ll come here to check your ideas.
    Cheers from New Zealand

  4. 4

    Really nice ! Thank you :)

  5. 5

    Great THX this was i writing today in an article on my blog. So i can use your style .
    It looks much better than all i have seen.

    Thomas

  6. 6
    Deluxe Blog Tips said:

    Very beautiful. Thanks for sharing.

  7. 7
    McBonio said:

    But you used PHP too ;)

    Joking aside very nice dude!!! :)

  8. 8
    @
    yashodhan deshmukh said:

    i liked it n i try`d it also………..
    thanxxxx.

  9. 9

    awesome tutorial, thanks!

  10. 10
    @
    Tech Junoon said:

    It is cool… But not easy for non-technical guys.

  11. 11

    All what i need, thx !

  12. 12

    good one

  13. 13
    Awais Raza said:

    wow absolutely great and wonderful post… i add more features in counter addition to your Dear Author…Thanks for sharing.. I love you..:)

  14. 14
    Varinder Pal Singh said:

    How to add in my Blog this feeds. Thanks

  15. 15

    Really awesome bro… :D

  16. 16

    It’s really nice … I’ll wait your more brilliant ideas …. thanx

  17. 17
    Wordpress tips said:

    You opened the lock, to beautify RSS feed counter, now i can do much more this code, thanks for the sharing

Lеаvе а Соmmеnt

© 2009–2016 Dimox.net  •  Privacy Policy