10 February, 2010

Display feedburner subscribers in text for blogger

How To Display feedburner count as text instead of using chicklet for blogger.
Have You seen popular blogs  showing there subscribers as Text instead of using the default chicklet ever wondered how they do it? There are numbers of tutorial for wordpress blogs but for this is for blogger users.
This is based on php which is developed by Paul from codigosblog

show feedburner as text
Why Feedburner count as text?
Simpler feedburner buttons usually does not match with the design of our blog moreover this is the great way so you can style it and make it look like a part of a design rather than a copy and paste.

Steps :

1. Login to your Blogger.Go to Layout  > > Page Element and Add a new gadget HTML/javascript.
2. Paste below javascript into the the pop up window.

<script language='javascript' type='text/javascript' src='http://www.codigosblog.net/servidor/contadorfeed.php?uri=funwithblog'> </ script>

3. funwithblog -Replace this with your feed name
Note: Above javascript only shows text to which you can apply stylesheets and decorate according to your will.
Here an example with CSS and HTML both.
Css part: 

#feed-icone2{ width: 204px;height: 46px;padding: 0px;margin: 0px; } #feed-ico2 { width: 40px;height: 36px;padding: 5px 3px 5px 5px;margin: 0px;float: left; } #feed-txt2 { height: 46px;width: 155px;margin: 0px;float: left; } #feed-txt2 h2, #feed-txt2 h2 a{ font-size: 13px;color: #082D69;padding: 0px;font-weight: bold;margin: 8px 0px 0px 2px;font-family: Verdana, Arial, Helvetica, sans-serif; } #feed-txt2 p, #feed-txt2 p a { font-size: 11px;color: #000;letter-spacing: 1px;padding: 0px 0px 0px 1px;font-family: arial,sans-serif;margin: 0px 0px 0px 2px; }

Html Part :

<div id='feed-icone2'> <div id='feed-ico2'> <img alt='Códigos Blog' border='0' src='http://codigosblog.net/codigosblog/feed.png'/> </div> <div id='feed-txt2'> <h2><a href='http://feeds.feedburner.com/funwithblog' name='' target='_blank'><script language='javascript' type='text/javascript' src='http://www.codigosblog.net/servidor/contadorfeed.php?uri=funwithblog'></script>&nbsp;subsscribers</a></h2> <p><a href='http://feeds.feedburner.com/funwithblog' name='' target='_blank'>subscribe to feeds</a></p> </div>

And the result is :
feedburner as text

1 comment:

Spam/advertising comments will NEVER BE TOLERATED and will be deleted immediately!

I advise you to also "subscribe to the comment feed" and get email updates when I respond to your question.
Thanks for reading,