Loading...

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







CREATE A PAGE IN BLOGGER


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 Blogger.com 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.




ADD MEMBERS GADGET TO BLOG


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="http://www.google.com/friendconnect/script/friendconnect.js"></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_SECONDARY_LINK_COLOR'] = '#7777cc';
skin['CONTENT_SECONDARY_TEXT_COLOR'] = '#666666';
skin['CONTENT_HEADLINE_COLOR'] = '#333333';
google.friendconnect.container.setParentUrl('/' /* location of rpc_relay.html and canvas.html */);
google.friendconnect.container.renderMembersGadget(
{ id: 'div-XXXXXXXXXXXXX',
site: 'XXXXXXXXXXXXXXXXXXXXXXXX' },
skin);
</script>



In above code change :

style="width:282px;

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.




GADGET APPEARS ON SPECIFIC PAGE ONLY


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 :

http://www.blogdoctor.me/2007/03/blog-members.html




Then we have to modify the widget code. Login at Blogge.com 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 == "http://www.blogdoctor.me/2007/03/blog-members.html"'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>


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


<b:if cond='data:blog.url == "http://www.blogdoctor.me/2007/03/blog-members.html"'>

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

</b:if>

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.


Read more On "Blog Members"!

Google Map with Markers in Blog.

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

In a previous post we saw how to add a Google Map to blog. Sometimes having a simple map is not enough. Markers are used on a map to identify points on the map. See picture below (Click on picture to enlarge it):



In above picture you can see a Google Map with Markers in my test blog. Here are the steps to put such a map in your blog......................


STEP 1. Get a Google API key for your blog.

In the first step you have to generate a Google API key for your blog here.
Put a check in "I have read and agree with the terms and conditions (printable version)" box by clicking it. Paste your blogspot URL in the text box and click Generate API Key button. Copy down the key generated.





STEP 2. Modify the Template Code.


Login at Blogger.com

Click Layout link under Blog Title on Dashboard.

Click Edit HTML subtab of Layout tab.

Scroll down in Template Code box and change :

<body>

TO :

<body onload='initialize()' onunload='GUnload()'>

Save Template.





STEP 3. ADD HTML GADGET in sidebar.

Login at Blogger.com

Click Layout link on Dashboard under blog title.

Click Add Gadget link on Page Elements subtab of Layout tab.

In popup window scroll down and click HTML/Javascript Gadget.

Copy the code below and paste it in Contents window of the HTML gadget :


<script src="http://maps.google.com/maps?file=api&v=2&key=PASTE_YOUR_GOOGLE_API_KEY_HERE"
type="text/javascript"></script>


<script type="text/javascript">

function initialize() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(37.4419, -122.1419), 13);

// Add 10 markers to the map at random locations
var bounds = map.getBounds();
var southWest = bounds.getSouthWest();
var northEast = bounds.getNorthEast();
var lngSpan = northEast.lng() - southWest.lng();
var latSpan = northEast.lat() - southWest.lat();
for (var i = 0; i < 10; i++) {
var latlng = new GLatLng(southWest.lat() + latSpan * Math.random(),
southWest.lng() + lngSpan * Math.random());
map.addOverlay(new GMarker(latlng));
}
}
}

</script>

<div id="map_canvas" style="width: 500px; height: 300px"></div>


Customize the above code by :

1. Paste in the Google API key obtained in Step 1 where it says "PASTE_YOUR_GOOGLE_API_KEY_HERE".


2. Put in the latitude and longitude of your map center in this line :

map.setCenter(new GLatLng(37.4419, -122.1419), 13);

3. The above code will add 10 markers at random locations. For more information checkout the Google Maps documentation.


Save Gadget.



Read more On "Google Map with Markers in Blog."!

Add Google Calendar with Google Web Elements.

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 an easy way to add Google Calendar to your blog using Google Web Elements.



As shown above you can add it in a post or in a HTML gadget in the sidebar. You can also choose the Agenda view instead of the Monthly view shown above.


With Google Web Elements you can show Calendar, Conversation (Comments Gadget from Google Friend Connect), Custom Search, Map (Google Maps), News, Presentations, Spreadsheets and YouTube News at present and more will be added soon. They are all built by Google so no worries about third party hacks


You can also earn money with the The Custom Search element which displays Ads. by Google and you can choose to share in the revenue by associating your AdSense publisher ID..........................


Add Google Calendar Web Element


To add the Google Calendar Web Element follow these steps :

1. Login at Google Calendar.

2. Click the down arrow next to calendar name in sidebar.

3. Select 'Share This Calendar' from drop down menu.

4. In right hand pane click the 'Calendar Details' link/tab at the top.

5. Scroll down and click the orange XML button under Calendar Address.

6. Copy the link in the popup window.

7. Go to Google Web Elements.

8. Click Calendar link in sidebar.

9. Paste your calendar address copied in 6. above in the Calendar Address text box.

10. Customize options : Choose Monthly or Agenda view and size. Choose a width smaller than width of your posts column or you will have to increase blog width.

11. Copy the code given below and paste it in Edit Html tab of Post Editor and publish post or paste in a HTML gadget in sidebar.


Read more On "Add Google Calendar with Google Web Elements."!

Beware of the Post Feed Redirect URL Setting!

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

Blog Feeds are used to deliver blog updates to subscribers. The new Layout Blog Templates contain a big "Subscribe to Posts : Atom" link at the bottom of the post. However it is better to put a big orange RSS feed icon at the top of the sidebar to attract subscribers.


When Google bought Feedburner Blogger introduced a new setting in the Settings--->Site Feed subtab : The Post Feed Redirect URL (See picture below) :



This is a sensitive setting and due to lack of understanding of how it works many Bloggers are closing down their blog feed by putting wrong links in this box..........................


The Blog Feed URL


Each blog feed has a link or address where it is located. Subscribers have to enter this link in Google Reader or any other feed reader so they can read the latest blog updates. In Blogger your feed URL or link is :

(Atom Feeds)
http://MYBLOG.blogspot.com/feeds/posts/default
http://MYBLOG.blogspot.com/atom.xml

(RSS Feeds)
http://MYBLOG.blogspot.com/feeds/posts/default?alt=rss
http://MYBLOG.blogspot.com/rss.xml

Replace 'MYBLOG' with actual blog name. Blogger does not allow any customization of Feeds except for choosing 'Short', 'Full' or 'None'. Also you cannot know number of your subscribers. To customize your feed you have to 'burn' blog feed at Feedburner.com


Feedburner Feed URL


Feedburner takes your blog feed and gives the blog feed a new link or address. You can customize this address also. For instance the feedburner feed address for this blog is :

http://feeds.feedburner.com/DummiesGuideToGoogleBloggerBeta



The Post Feed Redirect URL


To get to this setting follow these steps :

Login at Blogger.com

Click Settings link for your blog on Dashboard.

Click Site Feed subtab.

Scroll down on page and paste the Feedburner Feed URL for your blog in this box :





What it does is to redirect all other feed addresses to the Feedburner feed address. So subscribers getting updates through :

http://MYBLOG.blogspot.com/atom.xml

or

http://MYBLOG.blogspot.com/rss.xml

or

http://MYBLOG.blogspot.com/feeds/posts/default

or

http://MYBLOG.blogspot.com/feeds/posts/default?alt=rss

are ALL redirected to the Feedburner Feed URL.




Precautions to Follow



1. Do NOT paste Blog Feed URLs in this box!


2. Copy and Paste the Feedburner Feed address for your blog here. Do NOT type it as typing is prone to typo errors.

3. Do NOT enter Feedburner address of some other blog here!

4. Do NOT enter any other URL here! It Is meant ONLY for the Feedburner Feed URL for the same blog. OR if you are using some other service like Feedblitz.com you can also enter their feed URL here.



Wrong URL Results In



If the wrong URL is entered in the Post Feed Redirect URL box it causes :

1. Prevent blog feeds from updating.

2. Gadgets dependent on blog feeds like Recent Comments Gadget, Previous Posts Gadget, Table of Contents gadget etc. will stop functioning.

3. Loss of blog traffic or visitors.

4. Gadgets on other blogs depending on your blog feed will stop functioning.

5. Yahoo Pipes or other Feed aggregators depending on your blog feed will break down.

6. The Blog List gadget depends on Blog Feeds. If someone has added your blog to their Blog List it will not show the latest blog update.

7. The Reading List on your Followers' Dashboard will stop getting blog updates.


Read more On "Beware of the Post Feed Redirect URL Setting!"!

Invite Viewers with Event Gadget.

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


The Followers Gadget has been integrated with Google Friend Connect. You can now add all the gadgets available in Google Friend Connect to your blog.


One of these is the Event Gadget. It shows information about any event you want to inform blog readers about. The description, time, location, map is included. Viewers can join the event and see who else has joined the event. See picture at left. Other gadgets like Members, Comment Wall and Social Bar gadget can also be added.


To add this and other such gadgets to blog follow these steps........


ADDING THE EVENT GADGET :




1. Login at Blogger.com and check the Remember Me box while doing so.


2. Go to Google Friend Connect. You will see all your blogs listed in left sidebar under 'Sites'.


3. Click your Blog Title and it will expand to show submenu below it.


4. Click on 'Social gadgets' link.


5. Click on 'Event Gadget' link.


6. Under Options select and choose the various options like Page, and fill in your Event's Title and Description. Choose the start and end dates and the Timezone. Fill in the Location, address and Media URL which is link of the picture or logo of your event.


7. Choose the gadget's size to fit your sidebar or you may have to increase blog width.


8. Lastly click Generate Code button.


9. Copy the code given and paste in a HTML gadget in your blog.


10. Similarly you can add any of the other gadgets available like Members gadget and Comment Wall gadget. You can see these gadgets in action at top of third column in this blog. The social Bar gadget is at the top of the blog.


Enjoy!


Read more On "Invite Viewers with Event Gadget."!

Add Twitter to Blog in 4 Clicks.

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


Now that we have started micro blogging with Twitter.com we would like to show off our Tweets on our blog. This helps in setting up a conduit between your blog and your Twitter. Visitors to your blog may get impressed enough with your tweets and start following you on Twitter also. See picture at left.


Here is how you can set up Twitter on your blog with four clicks only. No messy coding or copy and paste. Just four clicks to add Twitter to your sidebar ..............

4 Click Twitter Installer.


FIRST CLICK : Click the button below to start the installation process :





This is the popup window you will see :




SECOND CLICK : Fill in your Twitter Username instead of 'YourID' , customize title as you like instead of 'My Tweets' and type in the number of tweets you want shown instead of 'TweetNumber'. Then click Customize button.




THIRD CLICK : On clicking Customize button the 'Add Widget to My Blog' button will get activated. Click it. You will get the 'Add Page Element' window. See Picture below :





FOURTH CLICK : In the Add Page Element window select the blog you wish to add the gadget to (if you have multiple blogs in one account). Then type in a title "My Tweets" for the gadget. Lastly click 'Add Widget' button. The Page Elements subtab of Layout tab will open with the message that the widget has been added to the blog.




You can use this installer to add anyone else's tweets also. Just fill their Username instead of yours. The twitter gadget will adapt the styling of your blog. Enjoy!

Read more On "Add Twitter to Blog in 4 Clicks."!

Twitter and Increase Traffic to Blog.

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

The micro blogging site Twitter.com is in the news with rumors of Google trying to take it over flying fast and furious! Jay Leno and Ellen DeGeneres have started twittering. It is being used by everyone from revolutionaries storming the Moldovian parliament and Egyptian bloggers to protest an unlawful imprisonment.



Click above picture to follow me on Twitter. Here is how to get started on Twitter and increase traffic to your blog.....................


Get Started on Twitter.


The first step is to open an account on Twitter. Go to Twitter.com and click Join. Fill out the form. For Username enter a name related to your blog. Keep it short as everyone will know you by it.


In the next step you can check if any of your contacts are already on Twitter and follow them automatically. You can skip this step and land up on your Twitter home page. The status box is on top from where you type in your 'tweets' to tell the world what you are doing. Below that are the updates showing latest tweets from people you are following. If you had clicked the image at the top you will get my tweets showing up. Notice that they contain links to my blog posts.


In the sidebar is your profile at top followed by statistics (Number of followers, How many you are following and Updates) and icons of your followers. Now customize your twitter by clicking Settings link at the top of the page. Use the Picture tab to upload a picture. In the Account tab enter your real name and blog address in the fields provided and save settings.


Start Tweeting.


Click the Home link at the top of the page. Type what you are doing in the text field. Only 140 characters are allowed so Keep it Short. Click Update to see your own tweet at top. People who follow you will see this tweet on their page instantly.


Put Follow Me on Your Blog


Now you can use your blog to get followers. Put the Follow Me badge on your blog. Viewers clicking on it will become your Followers and have your tweets delivered to them in real time. To install this image on your blog click the button below :





Clicking the above button will result in this popup window :



Enter your Twitter Username instead of 'YourID' in the box and then click Customize button. This will activate the 'Add Widget to my Blog' button. Click it to get the 'Add Page Element' window as shown below :



Select your blog from the drop down list and click the 'Add Widget' button. This will add the Follow Me on Twitter badge at top of this post to your blog sidebar. No further coding is required. Any viewer clicking on the image will be added as Follower to your tweets.


In future posts I will discuss how to show your tweets on your blog, how to twitter blog posts automatically and tips on how to use Twitter more effectively without spamming.

Read more On "Twitter and Increase Traffic to Blog."!

Followers and Friends How they Connect?

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

Blogger first introduced the Followers gadget and it was a big success. At present it is being integrated with the Friend Connect gadget causing some confusion.
Here are some similarities and differences between the two gadgets :



Let me know if you can spot any more differences or similarities in the comments below.



Read more On "Followers and Friends How they Connect?"!

Comments Wall Gadget for Sidebar.

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


Comments in Blogger are made under and on posts. The Main Page has a Comments link under each post for the viewer to click and post his/her comments. There is no facility to put in a general comment on anything under the sun!


The Friend Connect Gadget provided a Comment Wall which you could put in the sidebar for inviting general comments. The Followers gadget is being upgraded to the Friend Connect gadget and hence it is now not possible to add the latter gadget in the usual manner. If you have Custom Domains then only you can add the Friend Connect gadget in the usual manner.


Here is a workaround to add the Comments Wall in the sidebar to a blogspot.com blog......................

1. Install Followers Gadget


If you do not have a Followers gadget in the blog the first step is to install it in the usual manner for adding gadgets to the blog. Login at Blogger.com and click Layout lik for your blog on Dashboard. On Page Elements subtab click Add Gadget link and in popup window click on Followers gadget. New blogs have this gadget by default.



2. Get Site Number for Blog.


The next step is to get the site number for your blog. To get it Login at Blogger.com and click on View Blog link on Dashboard for blog. Blog will open in browser. Go to View---->Page Source from browser menu. In Page Source do a Ctrl+F (Edit--->Find) for 'site' in the Followers gadget. It will appear like this :

......
......
google.friendconnect.container.renderMembersGadget(
{ id: "div-1238464215135",
site: "BIG_NUMBER" },
skin);
</script>

Copy down the 'BIG_NUMBER' in the page source.



COMMENTS WALL CODE


In this step copy the code for the comment wall gadget given below :

<!-- Include the Google Friend Connect javascript library. -->
<script type="text/javascript" src="http://www.google.com/friendconnect/script/friendconnect.js"></script>
<!-- Define the div tag where the gadget will be inserted. -->
<div id="div-comment-wall" style="width:210px;border:1px solid #cccccc;"></div>
<!-- Render the gadget into a div. -->
<script type="text/javascript">
var skin = {};
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_SECONDARY_LINK_COLOR'] = '#7777cc';
skin['CONTENT_SECONDARY_TEXT_COLOR'] = '#666666';
skin['CONTENT_HEADLINE_COLOR'] = '#333333';
skin['DEFAULT_COMMENT_TEXT'] = '- add your comment here -';
skin['HEADER_TEXT'] = 'Comments';
skin['POSTS_PER_PAGE'] = '5';
google.friendconnect.container.setParentUrl('/' /* location of rpc_relay.html and canvas.html */);
google.friendconnect.container.renderWallGadget(
{ id: 'div-comment-wall',
site: 'BIG_NUMBER',
'view-params':{"disableMinMax":"true","scope":"SITE","allowAnonymousPost":"true","features":"video,comment","startMaximized":"true"}
},
skin);
</script>


Put the site number from step 2 instead of 'BIG_NUMBER' in the code above. To customize it further change :

div id="div-comment-wall" style="width:210px;border:1px solid #cccccc;"></div>

width(210) in above code and border size(1px) and border color(cccccc). Change the colors by changing the hex numbers at the end of these lines :

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_SECONDARY_LINK_COLOR'] = '#7777cc';
skin['CONTENT_SECONDARY_TEXT_COLOR'] = '#666666';
skin['CONTENT_HEADLINE_COLOR'] = '#333333';

You can get hex color numbers here.

To change number of comments shown change '5' (any number from 1 to 15) in this line :

skin['POSTS_PER_PAGE'] = '5';


To prevent spam delete :

"allowAnonymousPost":"true",




Paste Code in HTML Gadget


Lastly copy the modified code and paste in a HTML gadget in sidebar. Login at Blogger.com and click Layout lik for your blog on Dashboard. On Page Elements subtab click Add Gadget link and in popup window click on HTML/Javascript gadget. In contents window paste the modified code and save. Here is what it looks like :



Read more On "Comments Wall Gadget for Sidebar."!

JSON Two Click Blog Archives Gadget for Bloggers.

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

Archives in the real world is a place where we deposit historical records and documents. In Blogger Layout Templates the Blog Archives is a place on your blog page showing all your blog post linked titles. The Classic Templates show only ten previous posts.


Since the default Archives gadget which comes with every Layout template shows only the latest month posts we have used various methods to create gadgets showing all post titles. The latest method uses JSON (JavaScript Object Notation) to extract linked post titles from your blog feed.


It can be installed with two mouse clicks (using the widget installer from Beautifulbeta) and no coding is required...........


How To Install


The installation process cannot get any simpler! Just click on the button below :




You will get a dialog window (disable any popup blocker) :



Click on picture to enlarge it.

Under 'Widget Title' type in whatever title you wish. Under 'Customize Widget' type in your blogspot subdomain (That is the part which appears before 'blogspot.com' in your blog address.) Then click Customize button. The 'Add Widget to my Blog' button will become active. Click it to get the next "Add Page Element' window :



Click on picture to enlarge it.

Here you can select the blog to add it in. You can add this to other blogs also to promote traffic to another blog. Type in a title for the widget and click the blue 'Add Widget' button at the bottom. Then click View Blog to see the result :



If you have lots of posts be ready for a long sidebar. If you want to have an archives widget in a smaller space check out Gadget No 29 - Scrolling Posts Gadget on My Gadget Showcase Blog.




Gadget Features



1. Easy to Install in two clicks only. Native Blogger Gadget/widget.

2. No coding knowledge required.

3. Uses Google Code.

4. Shows all (max of 1000) blog post titles.

5. Post titles linked to Posts.

6. The credit link is generated by Javascript and so does not generate a linkback to my blog. It is only for information for other bloggers who may wish to install it. So please do not remove it.


Read more On "JSON Two Click Blog Archives Gadget for Bloggers."!

The Blog Doctor2

Tips On Blogger and Latest News.



Skip to top of post.