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

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: 

<style>
#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;}
</style>

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 :

Making Mobile Friendly version of your blog using google reader

Making the mobile version of your blog using google reader.
You may have heard about mofuse.com on which you enter your blog address,Sign up for free account and you get a mobile version of your blog just for free.I am a google fan and love to use google services.Nothing will be better if you could use google to make mobile version of your blog.



 Things You require :

•  A google reader account which is same as your google account
•  A feedburner account connected with your blog. 

Interesting and easy thing about this is that all you have to do is append your blog feed address to the following URL[without brackets]

http://www.google.com/reader/m/view/feed/[feed_address]
Replace feed_address with your blog feed address (http://myfundoo-blog.blogspot.com/feeds/posts/default)

 Example :
 http://www.google.com/reader/m/view/feed/http://myfundoo-blog.blogspot.com/feeds/posts/default 

 Now all you have to do is link any image or text with this url .Click image to see mobile version of this blog.

Some more posts you may like to read :

• Create image hover effect by changing opacity
• Add devider image between your posts

Feedburner socialize:Add your feed to twitter using feedburner only.

Add your feed to twitter using feedburner only.

Sharing and publishing your blog updates to twitter,till now i have been using twitterfeed to post my content automatically to twitter,now even feedburner socialise .

YES ,feedburner has added a new services called feedburner socialise that distributes the content from a feed on Twitter.
To get started go to your feedburner account and login,go to the Socialize service on FeedBurner's Publicize tab.(click on publisize and then click on socialise in the left).

Add the Twitter account to which you would like to post items from your feed. You can take the default settings and click [Save] or use the options  to customize exactly which feed items are sent to Twitter and how exactly you would like them to look.

The best thing is that tweet is posted immediately after I publish a blog post.
You can confirm this services from google feedburner help
and official google adsence blog.

IF you have any thoughts ,problem in implementing or like my posts.Just drop a comment.

How to edit/Customize email subscription form given by feedburner

If you are new to blogging and does not know what feed burner is then i recommend you to read this
http://www.google.com/support/feedburner/bin/answer.py?answer=79408
Once you know what is feed burner ?then we can come to the editing part.
Your e-mail subscription code provided by feedburner looks like this  ::

<form style="border:1px solid #ccc;padding:3px;text-align:center;" action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=FunWithBlog', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><p>Enter your email address:</p><p><input type="text" style="width:140px" name="email"/></p&gt;<input type="hidden" value="FunWithBlog" name="uri"/><input type="hidden" name="loc" value="en_US"/><input type="submit" value="Subscribe" /><p>Delivered by <a href="http://feedburner.google.com" target="_blank">FeedBurner</a></p></form>

1. ADD/Change Background Color ::

Add :

background: #5A728C     //  replace #5A728C with any hexadecimal color code .You can Choose hexadecimal color from HTML color Pellate

just after  text-align:center;

2. Add image in background  ::

Add this :

background: url(your image url here);   //replace your image url here with your image url

just after  text-align:center;
 
3.Change Form height and Width  ::


Add width=300,height=300 attributes just like this  in the begining.
<form style="border:1px solid #ccc;padding:3px;text-align:center;width:300;height:300;>

in above code and change height and width according to your need .(usually measured in pixels).


4.Change the text on Subscribe button  ::

This is the text that appears on the Email button.Change it to anything you like. For Instance: Submit, Hit Me!, Join Me! etc.

5.Change color of subscribe me button ::

Search for ::  <input type=%u201Dsubmit%u201D value=%u201DSubscribe%u201D />

and Replace with
<input type="submit" style="font-size: 14px; font-weight: bold; color: white; background-color: rgb(0, 100, 0); text-align: center;" value="Subscribe...!"/>

To make it exactly like in the image.

6.Add default text in subscribe me text box ::
Search for :

<p>Enter your email address:</p><p><input type="text" style="width:140px" name="email"/></p>

And replace with  ::

<input type="text" style="width:240px" name="email" value="Enter your email address" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;"/>

7.Removing Delivered by feed burner link :

just completely remove this from above code

<p>Delivered by <a href="http://www.feedburner.com" target="_blank">FeedBurner</a></p>

Drop Your Comments  Below...!! Your Suggestions And appreciation Are the only things that i get in return.. .....