Blog Members ~ The Blog Doctor.



Blog Members

New Visitor? Like what you read? Then please subscribe to my Blog Feed or sign up for Free Email Updates. Thanks for Visiting!

Here is how to show off your blog members. These are members of your blog community who have joined your blog through Google Friend Connect. Put all your members on a special page in your blog...........


Blogger does not have any method for creating pages (at present). You can workaround this by creating a post. In Blogger (Layout Templates) each post is published on a separate page. So login at and click New Post button under blog title on Dashboard. The Post Editor will open. Give a title and put in some message to your blog members.

To ensure that the post will not appear on Main Page of blog click the Post Options link in bottom frame of Post Editor. Change the date here to any date BEFORE the date of the last post on your Main Page. Publish Post.


First step is to sign up at Google Friend Connect. Then get the code for the Members Gadget. It will look something like this :

<!-- Include the Google Friend Connect javascript library. -->
<script type="text/javascript" src=""></script>
<!-- Define the div tag where the gadget will be inserted. -->
<div id="div-1236939855410" style="width:282px;border:1px solid #cccccc;"></div>
<!-- Render the gadget into a div. -->
<script type="text/javascript">
var skin = {};
skin['HEIGHT'] = '385';
skin['BORDER_COLOR'] = '#cccccc';
skin['ENDCAP_BG_COLOR'] = '#e0ecff';
skin['ENDCAP_TEXT_COLOR'] = '#333333';
skin['ENDCAP_LINK_COLOR'] = '#0000cc';
skin['ALTERNATE_BG_COLOR'] = '#ffffff';
skin['CONTENT_BG_COLOR'] = '#ffffff';
skin['CONTENT_LINK_COLOR'] = '#0000cc';
skin['CONTENT_TEXT_COLOR'] = '#333333';
skin['CONTENT_HEADLINE_COLOR'] = '#333333';
google.friendconnect.container.setParentUrl('/' /* location of rpc_relay.html and canvas.html */);
{ id: 'div-XXXXXXXXXXXXX',

In above code change :


to 282px to 100% and also change the hex colors :

skin['BORDER_COLOR'] = '#cccccc';
skin['ENDCAP_BG_COLOR'] = '#e0ecff';
skin['ENDCAP_TEXT_COLOR'] = '#333333';
skin['ENDCAP_LINK_COLOR'] = '#0000cc';
skin['ALTERNATE_BG_COLOR'] = '#ffffff';

to match your site design. Change the height of the gadget by modifying '385' in :

skin['HEIGHT'] = '385';

Then save the gadget.


We do not want the gadget to appear on every page. We want it to appear only on the 'Blog Members' page. For this we use the power of conditional tags. The first step is to get the permalink of the Blog Members post published in Step 1 above. Look in the Blog Archives gadget as the post was backdated. Click the post link to open the post page. Copy the link from the address bar. It looks like this in my example :

Then we have to modify the widget code. Login at and click Layouts link on dashboard. Then click Edit Html subtab of Layout tab. Click on Expand Widgets Template checkbox at top of Template Code box. Wait for page to refresh. Scroll down to the code for the Blog Members gadget. It will look like something this :

<b:widget id='HTML28' locked='false' title='BLOG MEMBERS' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == ""'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
<div class='widget-content'>
<b:include name='quickedit'/>

Put in the two lines in bold as shown above. In the first line :

<b:if cond='data:blog.url == ""'>

Put the permalink of your Blog Members post obtained in Step 1. Do not forget to put in the second line :


in exactly same place in the widget code. Save Template. As you can see the Members gadget showing all the present members appears only on this post.


Unknown said...

Thank you for this valuable tutorial.

Anonymous said...

its sure is a great help for a starter...thanks..

Misa said...

Hi Vin,

I'm sure I won't be the first person with this nomination, but I just have to ---- nominate you for A Lemonade Award!
I can see that you're helping lots of people with their blogs and that has to be awarded!

Find more on my blog:


free css templates said...

Really awesome blog. I enjoyed reading this review from you. I found that you really update your site regularly that made me more interesting. I've bookmarked your site for my future use.

Thank you

Rajagopalan said...

hi vin
nice step by step tutorial. still...the html poses a problem for me. any tutorials for this html or any website? pl clarify.
thanks and regards.

Vin said...


You can use it on blogspot also. Use same method shown in Comments Wall Gadget for sidebar.

Rajagopalan said...

hi vin
thanks a lot. i will try and get back to u. Reviews | Online Printing said...

Excellent tutorial, this is a great gadget! Thanks for posting this.

EK4zone said...

I can see that you're helping lots of people with their blogs and that has to be awarded!
happiness sunday, keep smile n spirit menghadapi minggu ini sobat... tmnmu satu nie akan slalu setia menemani... (have a nice week)

Aswani said...

Hello, I found your blog through google search. must say, you blog rocks !! I would rate your blog 10/10.

Excellent post. will try adding this code to my blog too. Thanks !

Khairul said...

nice blog and services.
But i got some problems here and this will be offtopic for a while.

I got problems with feedburner. I am sick of it and i would like to delete feedburner account. But i cant do so. and its not only me. there lost of people cant do so because of no 'delete account link" not as google help center says.

So, how to delete it?

Btw, do you know if there are direct support center for google blogger? the google help center more than useless bcause of outof date

Vin said...


Best is to delete your feeds if you do not want them. Better to keep account as you may need it in future.

There is no direct Google contact. Try the Feedburner Help Group.

Sky said...

I'm receiving an error code when trying to manage blogs I follow. The code I am getting is bX-ftj54u. Please get back to me on this.

Vin said...


The bx errors are due to connectivity mistakes. Try connecting at less busy times or with a broadband connection.

Use Firefox browser and close all other open applications or browser windows or tabs.

Anonymous said...

can some one help me me?
I am trying to increase my traffic, I am not being able to save edited html. Y does it tell me end tag has to match?
and how do I make it match--match what! where!
WHAT IS AN END TAG? Urggggggggggggggggg!
FRUSTRATED- I did everything it said to do!

Vin said...


Exactly what code did you paste in template?

k.g. said...

Hi Vin,

Can you tell me how can i list posts by author, in blogger ?


Count St. Germain II said...

Is it possible to edit the gadget code so that ONLY the followers' icons show?

No "Follow with Google Friend Connect" button, no "Members (#)" text, no "Already a member? Sign in" link.

Just the icons and the "More >>" link if necessary.

My Famous Blog Secret said...

im following you.. follow me back!

AATON said...

I find that a good idea, to force our new visitors to follow us. Thanks Dr.

sewa elf jakarta said...

Very nice, thanks for the information.

sanjeev said...

Great site,
i am surely subscribing it..
this site helped me a lot in SEO THIng..
thanks Admins..

thanks a lot..


iPad 3 said...

Great informative post!

Image for Imagination said...

Understood the way to show the followers in the blog. But how can I increase the number of followers in my blog?
waiting for a new post on it....

rental mobil jakarta said...

Very nice, thanks for the information.

Stuart said...

Nice blog vin, lots going on here and you high light the power of using google friends to build your fan base very well.


buka rahasia blogspot said...

hey thanks a lot it still works well on my blog. :)

rental mobil said...

Thanks for the information. I will try it.


Skip to top of post.

Search Blog Before Commenting


Post a Comment

Please use the above search box to search this blog before posting your valuable comments.

Comments posted on Dummies Guide to Google Blogger (Beta) are moderated and will be approved only if they are on-topic and not abusive. Try not to include website URLs/links in your comments. You can email me : drbhatns at gmail dot com for any blogging question. Thanks,


The Blog Doctor2 Blog Doctor Home


Tips On Blogger and Latest News.

Skip to top of post.