The Blog Doctor.

Blog Members

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.

Google Map with Markers in Blog.

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.

Add Google Calendar with Google Web Elements.

Beware of the Post Feed Redirect URL Setting!

Invite Viewers with Event Gadget.

Add Twitter to Blog in 4 Clicks.

Twitter and Increase Traffic to Blog.

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.

Followers and Friends How they Connect?

Comments Wall Gadget for Sidebar.

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 :

JSON Two Click Blog Archives Gadget for Bloggers.

Full Sitemap of The Blog Doctor.

The Blog Archive Google Gadget.

Labels Sitemap Gadget for Blogger.

Custom Slideshow Gadget for Blogger.

The Blogger slideshow gadget does not give the user many options like adjusting the size and style. Google AJAX Feed API (See Related Article link at bottom of this post)provides the full code behind the slideshow gadget and also the opportunity to customize it as you like.

You can edit the code directly to adjust the size and style and then paste it in a HTML gadget................

THE SLIDESHOW GADGET CODE

The gadget code loads the slideshow using AJAX Feed API and Javascript. Within the code a location on your page is defined to show the slideshow and style the dimensions. Lastly Javascript is used to create a slideshow control on your page. The full code is shown below :

<script src="http://www.google.com/jsapi" type="text/javascript"></script>
    <script src="http://www.google.com/uds/solutions/slideshow/gfslideshow.js" 
 type="text/javascript"></script>
    <style type="text/css">
      #picasaSlideshow {
        width:  250px;
        height: 200px;
        margin-bottom: 5px;
        padding: 5px;
      }
    </style>
    <script type="text/javascript">
    google.load("feeds", "1");
    function OnLoad() {
      var feed  = "PUT FEED URL HERE";
      var options = {
        displayTime:2000,
        transistionTime:600,
        numResults : 8,
        scaleImages:true,
        fullControlPanel : true
      };
      var ss = new GFslideShow(feed, "picasaSlideshow", options);
    }
    google.setOnLoadCallback(OnLoad);
    </script>
<div id="picasaSlideshow" class="gslideshow"><div class="feed-loading">Loading...</div></div>
<a href="http://www.blogdoctor.me/2009/02/custom-slideshow-gadget-for-blogger.html">Custom Slideshows.</a>

In the above code replace "PUT FEED URL HERE" with the link of the RSS feed of your pictures album at Flickr/Photobucket/Picasaweb as shown below.

FEEDING THE SLIDESHOW

The next step is to provide a stream of pictures to the slideshow. To provide this first create an account at Flickr.com or Photobucket.com or Picasaweb.google.com. Then upload all the photos you want to show to this account.

After uploading pictures you will get the RSS feed from the album created at Flickr :

http://api.flickr.com/services/feeds/photos_public.gne
?id=USERID&lang=en-us&format=rss_200

Replace USERID with your actual userid at Flickr.com.

RSS Feed from Photobucket.com :

http://feed266.photobucket.com/albums/ii244/USERNAME/feed.rss

Replace 'USERNAME' with your actual username.

RSS Feed from Picasaweb :

http://picasaweb.google.fr/data/feed/base/user/NAME/
albumid/NUMBER
?kind=photo&alt=rss&authkey=KEY&hl=en

Replace NUMBER, KEY and NAME with actual values.

Then copy the full feed url and paste in the code given for the slideshow gadget instead of "PUT FEED URL HERE".

CUSTOMIZING SLIDESHOW

To customize the slideshow modify the gadget code as shown below :

To Change Number of Images modify this line in gadget code and change the number to what you want :

numResults : 8,

To resize images add this line immediately below the numResults line :

scaleImages : true,

The images will be resized according to original aspect unless you add this line also :

maintainAspectRatio : false,

To change how long images are displayed modify the number in :

displayTime : 2000,

To link the images to their source add this line :

linkTarget : google.feeds.LINK_TARGET_BLANK,

To show images in medium thumbnail size use this line :

thumbnailSize : GFslideShow.THUMBNAILS_MEDIUM,

For small size thumbnail images :

thumbnailSize : GFslideShow.THUMBNAILS_SMALL,

Lastly to increase width and height change this code :

#picasaSlideshow {
width: 250px;
height: 200px;
.....
}

Decrease width number to fit in your sidebar width. You can get the width of the sidebar from your blog template code :

#sidebar-wrapper {
width: 220px;
...
}

INSTALLING SLIDESHOW

After modifyng and customizing the slideshow code as shown above :

Login at Blogger.com
Click Layouts link on Dashboard.
Click Add Gadget link on Layouts--->Page Elements subtab.
In Popup window scroll down and click on HTML gadget.
Paste the modified code in Contents window.
Save gadget.

Enjoy!

Yet Another Table of Contents YATOC.

Here is Yet Another Table of Contents - The YATOC Gadget. It is based on the Google AJAX API. You can use it to Make a Sitemap Page for your blog. See picture below :

You can see the demo at top of posts column in My Gadget Showcase blog. It shows all the post titles in the blog linked to respective posts. It is based on official Google AJAX code. Here are the steps to install it..................

INSTALLATION

To install this gadget follow these steps :

1. Login at Blogger.com.

2. Click Layouts link under blog title on Dashboard.

3. Click 'Add Gadget' link on Layout---->Page Elements subtab.

4. In popup window scroll down and click Html/Javascript gadget.

5. Copy all the code below :

<!--
  Copyright (c) 2008 Google Inc.

  You are free to copy and use this sample.
  License can be found here: http://code.google.com/apis/ajaxsearch/faq/#license
-->
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
    <script type="text/javascript">
      google.load("gdata", "1.x", { packages : ["blogger"] });
    </script>
    <script type="text/javascript">
      function _run() {
        var content = document.getElementById('content');
        var bloggerService =
            new google.gdata.blogger.BloggerService('com.appspot.interactivesampler');
        var feedUri = 'http://MYBLOG.blogspot.com/atom.xml?redirect=false&start-index=1&max-results=999';
        var handleBlogPostFeed = function(postsFeedRoot) {
          var posts = postsFeedRoot.feed.getEntries();
          var html = '';
          html += '<dl>'
               + '<dt><strong>Blog:</strong> '
               + '<a href="'
               + postsFeedRoot.feed.getLink('alternate').getHref()
               + '">'
               + postsFeedRoot.feed.getTitle().getText()
               + '</a></dt>';
          html += '<dd><ul>';
          for (var i = 0, post; post = posts[i]; i++) {
            var postTitle = post.getTitle().getText();
            var postURL = post.getHtmlLink().getHref();
            html += '<li><a href="' + postURL + '" target="_blank">'
                      + postTitle
                      + '</a></li>';
          }
          html += '</ul></dd>';
          content.innerHTML = html;
        };
        var handleError = function(error) {
          content.innerHTML = '<pre>' + error + '</pre>';
        };
        
        bloggerService.getBlogPostFeed(feedUri, handleBlogPostFeed, handleError);
      }
      google.setOnLoadCallback(_run);
    </script>
<div id="content" style="width:100%;">Loading...</div>
Get This Gadget at <a href="http://www.blogdoctor.me/2009/01/yet-another-table-of-contents-yatoc.html">Yet Another Table of Contents-YATOC.</a>

6. Paste in contents window on HTML gadget popup window.

7. Change 'MYBLOG' in the code to actual subdomain of your blogspot.

8. Save Gadget.

9. View Blog. Wait for page to load completely for gadget to load.

10. Enjoy your sitemap!

Make Sitemap Page in Blogger.

Rotating Post Titles Gadget.

This is a smaller version of the Random Rotating Post Gadget. This shows only the post titles linked to their posts in the blog. It has less height and saves more space. It would look good just below the blog header or above the posts column. See picture below :

It shows all post titles in the blog by rotating through them. If you hover the mouse over it the titles will pause rotating. It is also based on Google AJAX code. Here is how to install it......................

INSTALLATION STEPS

1. Login at Blogger.com.

2. Click Layout link on Dashboard under blog title.

3. Click Add Gadget link in sidebar on Layout----->Page Elements tab.

4. Scroll down in popup window and click on Html/Javascript gadget.

5. Copy the code below :

<style type="text/css">
    .gfg-root {
  width : 100%;
  height : auto;
  position : relative;
  overflow : hidden;
  text-align : center;
  font-family: "Arial", sans-serif;
  font-size: 20px;
  border: 1px solid #BCCDF0;
}

.gfg-title {
  font-size: 20px;
  font-weight : bold;
  color : #3366cc;
  background-color: #E5ECF9;
  line-height : 1.0em;
  overflow : hidden;
  white-space : nowrap;
  text-align : center;
  margin-bottom:40px !important;
}

.gfg-title a {
  color : #3366cc;
}

.gfg-subtitle {
  font-size: 20px;
  font-weight : bold;
  color : #3366cc;
  background-color: #E5ECF9;
  line-height : 1.4em;
  overflow : hidden;
  white-space : nowrap;
  margin-bottom : 0px;
}

.gfg-subtitle a {
  color : #3366cc;
  display:none !important;
}

.gfg-entry {
  background-color : white;
  width : 100%;
  height : 6.9em;
  position : relative;
  overflow : hidden;
  text-align : left;
  margin-top : 3px;
}

/* To allow correct behavior for overlay */
.gfg-root .gfg-entry .gf-result {
  position : relative;
  background-color : white;
  width : auto;
  height : 100%;
  padding-left : 20px;
  padding-right : 5px;
}

.gfg-list {
  position : relative;
  overflow : hidden;
  text-align : left;
  margin-bottom : 5px;
  display:none !important;
}

.gfg-listentry {
  line-height : 1.5em;
  overflow : hidden;
  white-space : nowrap;
  text-overflow : ellipsis;
  -o-text-overflow : ellipsis;
  padding-left : 15px;
  padding-right : 5px;
  margin-left : 5px;
  margin-right : 5px;
}

.gfg-listentry-odd {
  background-color : #F6F6F6;
}

.gfg-listentry-even {
}

.gfg-listentry-highlight { 
  background-image : url('garrow.gif');
  background-repeat: no-repeat;
  background-position : center left;
}

/*
 * FeedControl customizations.
 */

.gfg-root .gfg-entry .gf-result .gf-title {
  font-size: 24px;
  line-height : 1.2em;
  overflow : hidden;
  white-space : nowrap;
  text-overflow : ellipsis;
  -o-text-overflow : ellipsis;
  margin-bottom : 2px;
}

.gfg-root .gfg-entry .gf-result .gf-snippet {
  height : 3.8em;
  color: #000000;
  margin-top : 3px;
}

/*
 * Easy way to get horizontal mode, applicable via js options to gadget.
 */

.gfg-horizontal-container {
  position : relative;
  width:600px;
  height:40px;
}

.gfg-horizontal-root {
  height : 1.5em;
  _height : 100%;
  position : relative;
  white-space : nowrap;
  overflow : hidden;
  text-align : center;
  font-family: "Arial", sans-serif;
  font-size: 13px;
  border: 1px solid #AAAAAA;
  padding : 5px;
  margin-right : 80px;
}

.gfg-horizontal-root .gfg-title {
  font-weight : bold;
  background-color: #FFFFFF;
  line-height : 1.5em;
  overflow : hidden;
  white-space : nowrap;
  float : left;
  padding-left : 10px;
  padding-right : 12px;
  border-right: 1px solid #AAAAAA;
}

.gfg-horizontal-root .gfg-title a {
  color : #444444;
  text-decoration : none;
}

.gfg-horizontal-root .gfg-entry {
  width : auto;
  height : 1.5em;
  position : relative;
  overflow : hidden;
  text-align : left;
  margin-top : 0px;
  margin-left : 0px;
  padding-left : 10px;
}

/* To allow correct behavior for overlay */
.gfg-horizontal-root .gfg-entry .gf-result {
  position : relative;
  background-color : white;
  width : 100%;
  height : 100%;
  line-height : 1.5em;
  overflow : hidden;
  white-space : nowrap;
}

.gfg-horizontal-root .gfg-list {
  display : none;
}

/*
 * FeedControl customizations.
 */

.gfg-horizontal-root .gfg-entry .gf-result .gf-snippet,
.gfg-horizontal-root .gfg-entry .gf-result .gf-author {
  display : none;
}

.gfg-horizontal-root .gfg-entry  .gf-result .gf-title {
  color: #0000cc;
  margin-right : 3px;
  float : left;
}

.gfg-horizontal-root .gfg-entry .gf-result .gf-spacer {
  float : left;
}

.gfg-horizontal-root .gfg-entry .gf-result .gf-spacer,
.gfg-horizontal-root .gfg-entry .gf-result .gf-relativePublishedDate {
  display : block;
  color: #AAAAAA;
}

.gfg-branding {
  white-space : nowrap;
  overflow : hidden;
  text-align : left;
  position : absolute;
  right : 0px;
  top : 0px;
  width : 80px;
}

.gfg-collapse-open, .gfg-collapse-closed {
  background-repeat : no-repeat;
  background-position : center;
  cursor : pointer;
  float : right;
  width : 17px;
  height : 20px;
}

.gfg-collapse-open {
  background-image : url('arrow_open.gif');
}

.gfg-collapse-closed {
  background-image : url('arrow_close.gif');
}

.gfg-collapse-href {
  float : left;
}

.clearFloat {
  clear : both;
}

    #feedGadget { 
      margin-top : 5px;
      margin-left: auto;
      margin-right: auto;
      width : 440px;
      font-size: 16px;
      color: #9CADD0;
    }
#feedGadget2 { 
      margin-top : 5px !important;
      float:left;
      width : 440px;
      
      color: #9CADD0;
    }
.feedGadget2 {

}
#big {
width : 440px;
font-size: 10px;
}
</style>
<script src="http://www.google.com/jsapi/?key=PASTE AJAX KEY HERE" 
 type="text/javascript"></script>
  <script src="http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.js" type="text/javascript"></script>

  <script type="text/javascript">

    function showGadget() {
      var feeds = [
       {title:'BLOG_TITLE',
        url:'http://MYBLOG.blogspot.com/atom.xml?redirect=false&start-index=1&max-results=999'},
       
       ];

      new GFdynamicFeedControl(feeds, 'feedGadget',
                               {numResults : 1000, horizontal : true,
                               });
    }
    google.load("feeds", "1");
    google.setOnLoadCallback(showGadget);
  </script>
<div id="big">
<div id="feedGadget">Loading...</div>
  <div id="feedgadget2">Gadget by <a href="http://www.blogdoctor.me" target="_blank">The Blog Doctor</a>.</div></div>

6. Paste it in Contents window of the HTML gadget popup window.

7. Change "BLOG_TITLE" to actual title of blog. Also change "MYBLOG" to actual subdomain of your blogspot. Also sign up for an AJAX key for your blog. Then paste the key where it says "PASTE AJAX KEY HERE".

8. Save the HTML gadget.

9. Click on the HTML gadget in the sidebar and drag it to top of posts column.

10. Click Save button at top of sidebar.

View Blog. Wait for page to load fully before gadget starts to operate.

Enjoy!

Table of Contents Autoscroll Gadget.

Here is another gadget for those who wish to display all their posts in as little space as possible. The Random Rotating Post Gadget shows only one post at a time. The Table of Contents Autoscroll gadget shows all posts in you blog scrolling automatically in a small place. You can see it in action above the posts in Tips for Bloggers. (Wait for page to load fully) See picture below :

The Table of Contents is from Beautifulbeta. To save space I have added autoscrolling function to it. Features of the gadget are : .....................

FEATURES

1. Shows all Posts in blog.
2. Scrolls the posts list upwards automatically.
3. Mouseover will pause the autoscrolling.
4. Saves space.

INSTALLATION

To install it in your blog follow these steps :

1. Login at Blogger.com.

2. Click Layouts link on Dashboard.

3. Click 'Add Gadget' link in sidebar on Layout>>Page Elements subtab.

4. In popup window scroll down and click Html Javascript gadget.

5. In Contents paste the following code :

<script type="text/javascript">
// <!--
var speed = 2;
function init(){
  var el = document.getElementById("marquee_replacement");
  el.style.overflow = 'hidden';
  scrollFromBottom();
}
var go = 0;
function scrollFromBottom(){
  var el = document.getElementById("marquee_replacement");
  if(el.scrollTop >= el.scrollHeight-150){
    el.scrollTop = 0;
  };
  el.scrollTop = el.scrollTop + speed;
  if(go == 0){
    setTimeout("scrollFromBottom()",50);
  };
}
function stop(){
  go = 1;
}
function startit(){
  go = 0;
  scrollFromBottom();
}
// -->
</script>
<script style="text/javascript" src="http://blogging-tips-gadget.googlecode.com/files/TableOfContentsJS.js"></script>
<script src="http://MYBLOG.blogspot.com/feeds/posts/default?alt=json-in-script&max-results=999&callback=loadtoc"></script>
<script type="text/javascript">showToc();</script>
<style type="text/css">
#marquee_replacement{
 border:1px solid #000;
 width:100%;
 height:250px;
 overflow:auto;
 background:#fff;
}
#marquee_replacement p.spacer{
 height:150px;
}
</style>
<div id="marquee_replacement" onmouseover="stop();" onmouseout="startit();">
<div id="toc">
</div></div><div id="feedGadget">Gadget by <a href="http://www.blogdoctor.me" target="_blank">The Blog Doctor</a>.</div>

In above code change "MYBLOG" to the url (subdomain) of your blogspot and save.

Enjoy!

Random Rotating Post Gadget with Excerpt.

If you have a blog with more than 20 posts than this gadget is just the thing your blog needs :

Click on above picture to enlarge it. You can see it above the posts column in this blog when the page is completely loaded. Features :

1. Shows one post title at a time.
2. Links to the post.
3. Shows post excerpt also.
4. Every 5 seconds shows a new post.
5. Cycles through all the posts in the blog.
6. Starts a new cycle at the end of the list.
7. Once loaded continues cycling even when not connected to the Internet.
8. Uses official Google AJAX technology.
9. Can be used on other blogging platforms (not tested).
10. Hovering with mouse cursor over the post title halts the rotation till mouse moves off the gadget.

............................................

Bloggers with plenty of posts in their blogs face a major problem in showing all of them to the viewers. Some solve this by changing the settings to show all the posts in Main Page. This slows down the loading speed of the blog and can turn away visitors.

The Blog Archive gadget which comes as a default with the standard Blogger Layouts shows only the posts in the blog for the present month. The rest of the posts are hidden and can be seen only by clicking the black arrows to expand the archives. This saves the real estate on the blog page but to the new visitor hides the previous months blog posts.

One can eliminate the dates in the Blog Archive and show all your posts in a blogger gadget but this makes a very long sidebar and if you have posts with little content this may make the blog seem lopsided.

To save space and yet show all posts one by one this gadget uses official Google AJAX API Feed technology and the Dynamic Feed Control. It fetches the post titles and data from your blog and displays it in the gadget. To install this on your blog :

1. Login at Blogger.com.
2. Click Layouts link on Dashboard.
3. Click Add Gadget link in sidebar on Page Elements subtab of Layout tab.
4. In popup window scroll down and click Html/Javascript gadget.
5. In Contents window copy the code below and paste after modifying it :

<style type="text/css">
    .gfg-root {
  width : 100%;
  height : auto;
  position : relative;
  overflow : hidden;
  text-align : center;
  font-family: "Arial", sans-serif;
  font-size: 20px;
  border: 1px solid #BCCDF0;
}

.gfg-title {
  font-size: 24px;
  font-weight : bold;
  color : #3366cc;
  background-color: #E5ECF9;
  line-height : 1.4em;
  overflow : hidden;
  white-space : nowrap;
}

.gfg-title a {
  color : #3366cc;
}

.gfg-subtitle {
  font-size: 20px;
  font-weight : bold;
  color : #3366cc;
  background-color: #E5ECF9;
  line-height : 1.4em;
  overflow : hidden;
  white-space : nowrap;
  margin-bottom : 0px;
}

.gfg-subtitle a {
  color : #3366cc;
  display:none !important;
}

.gfg-entry {
  background-color : white;
  width : 100%;
  height : 6.9em;
  position : relative;
  overflow : hidden;
  text-align : left;
  margin-top : 3px;
}

/* To allow correct behavior for overlay */
.gfg-root .gfg-entry .gf-result {
  position : relative;
  background-color : white;
  width : auto;
  height : 100%;
  padding-left : 20px;
  padding-right : 5px;
}

.gfg-list {
  position : relative;
  overflow : hidden;
  text-align : left;
  margin-bottom : 5px;
  display:none !important;
}

.gfg-listentry {
  line-height : 1.5em;
  overflow : hidden;
  white-space : nowrap;
  text-overflow : ellipsis;
  -o-text-overflow : ellipsis;
  padding-left : 15px;
  padding-right : 5px;
  margin-left : 5px;
  margin-right : 5px;
}

.gfg-listentry-odd {
  background-color : #F6F6F6;
}

.gfg-listentry-even {
}

.gfg-listentry-highlight { 
  background-image : url('garrow.gif');
  background-repeat: no-repeat;
  background-position : center left;
}

/*
 * FeedControl customizations.
 */

.gfg-root .gfg-entry .gf-result .gf-title {
  font-size: 24px;
  line-height : 1.2em;
  overflow : hidden;
  white-space : nowrap;
  text-overflow : ellipsis;
  -o-text-overflow : ellipsis;
  margin-bottom : 2px;
}

.gfg-root .gfg-entry .gf-result .gf-snippet {
  height : 3.8em;
  color: #000000;
  margin-top : 3px;
}

/*
 * Easy way to get horizontal mode, applicable via js options to gadget.
 */

.gfg-horizontal-container {
  position : relative;
}

.gfg-horizontal-root {
  height : 1.5em;
  _height : 100%;
  position : relative;
  white-space : nowrap;
  overflow : hidden;
  text-align : center;
  font-family: "Arial", sans-serif;
  font-size: 13px;
  border: 1px solid #AAAAAA;
  padding : 5px;
  margin-right : 80px;
}

.gfg-horizontal-root .gfg-title {
  font-weight : bold;
  background-color: #FFFFFF;
  line-height : 1.5em;
  overflow : hidden;
  white-space : nowrap;
  float : left;
  padding-left : 10px;
  padding-right : 12px;
  border-right: 1px solid #AAAAAA;
}

.gfg-horizontal-root .gfg-title a {
  color : #444444;
  text-decoration : none;
}

.gfg-horizontal-root .gfg-entry {
  width : auto;
  height : 1.5em;
  position : relative;
  overflow : hidden;
  text-align : left;
  margin-top : 0px;
  margin-left : 0px;
  padding-left : 10px;
}

/* To allow correct behavior for overlay */
.gfg-horizontal-root .gfg-entry .gf-result {
  position : relative;
  background-color : white;
  width : 100%;
  height : 100%;
  line-height : 1.5em;
  overflow : hidden;
  white-space : nowrap;
}

.gfg-horizontal-root .gfg-list {
  display : none;
}

/*
 * FeedControl customizations.
 */

.gfg-horizontal-root .gfg-entry .gf-result .gf-snippet,
.gfg-horizontal-root .gfg-entry .gf-result .gf-author {
  display : none;
}

.gfg-horizontal-root .gfg-entry  .gf-result .gf-title {
  color: #0000cc;
  margin-right : 3px;
  float : left;
}

.gfg-horizontal-root .gfg-entry .gf-result .gf-spacer {
  float : left;
}

.gfg-horizontal-root .gfg-entry .gf-result .gf-spacer,
.gfg-horizontal-root .gfg-entry .gf-result .gf-relativePublishedDate {
  display : block;
  color: #AAAAAA;
}

.gfg-branding {
  white-space : nowrap;
  overflow : hidden;
  text-align : left;
  position : absolute;
  right : 0px;
  top : 0px;
  width : 80px;
}

.gfg-collapse-open, .gfg-collapse-closed {
  background-repeat : no-repeat;
  background-position : center;
  cursor : pointer;
  float : right;
  width : 17px;
  height : 20px;
}

.gfg-collapse-open {
  background-image : url('arrow_open.gif');
}

.gfg-collapse-closed {
  background-image : url('arrow_close.gif');
}

.gfg-collapse-href {
  float : left;
}

.clearFloat {
  clear : both;
}
body {
      background-color: white;
      color: black;
      font-family: Arial;
      font-size: small;
      margin: 0;
    }
    #feedGadget { 
      margin-top : 5px;
      margin-left: auto;
      margin-right: auto;
      width : 440px;
      font-size: 16px;
      color: #9CADD0;
    }
</style>
<script src="http://www.google.com/jsapi/?key=PUT_AJAX_KEY_HERE" 
 type="text/javascript"></script>
  <script src="http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.js" type="text/javascript"></script>

  <script type="text/javascript">

    function showGadget() {
      var feeds = [
       {title:'title',
        url:'http://MYBLOG.blogspot.com/atom.xml?redirect=false&start-index=1&max-results=999'},
       
       ];

      new GFdynamicFeedControl(feeds, 'feedGadget',
                               {numResults : 1000, stacked : true,
                               title: "BLOG_TITLE ~ Random Posts."});
    }
    google.load("feeds", "1");
    google.setOnLoadCallback(showGadget);
  </script>
<div id="feedGadget">Loading...</div>
  <div id="feedGadget">Gadget by <a href="http://www.blogdoctor.me" target="_blank">The Blog Doctor</a>.</div>

In the above code make changes in the following parts :

 <script type="text/javascript">

    function showGadget() {
      var feeds = [
       {title:'title',
        url:'http://MYBLOG.blogspot.com/atom.xml?redirect=false&start-index=1&max-results=999'},
       
       ];

      new GFdynamicFeedControl(feeds, 'feedGadget',
                               {numResults : 1000, stacked : true,
                               title: "BLOG_TITLE ~ Random Posts."});
    }

Change "MYBLOG" to actual blog subdomain and "BLOG_TITLE" to actual title of your blog. Then paste the modified code in the Html gadget and save the gadget.

Get your AJAX API key and put it in above code instead of 'PUT_AJAX_KEY_HERE'.

Lastly click and drag the HTML gadget from the sidebar to above the posts column. See picture below.

This is because the width of the gadget is more suited for the posts column than the sidebar. Save the Layout. View Blog.

If you do not want to save space you can show the whole Table of Contents with post preview.

Calling all Newbie Bloggers!

Welcome to 2009 and your spanking new blog you created at Blogger.com.

Photo by Ben30

What are the next steps you should follow to make blogging an instantaneous and painless experience? How to be a successful blogger using only point and click and some fast keyboarding? Here are some fast tips for the ultra n00b................

The first thing when creating a blog is to select a short and sweet URL or blog address. You can change this afterwards also by login at Blogger.com and then go to Settings>>Publishing>>Blog Address. If the address is not available you can get a Custom Domain Dot Com address for only 10$ US and also get rid of the 'blogspot' in the address.

Do not change the blog address if more than two months have elapsed because you will have to start all over again from scratch with respect to the search engines. You will also lose the traffic going to the old address!

After creating a blog speed up getting it on the search engines by submitting blog to them and verify ownership using Google Webmaster Tools.

Creating posts and inserting pictures in your blog is made easy thanks to Windows Live Writer.

For optimum blogging experience download Firefox browser on a PC with a broadband connection. For checking your emails use Thunderbird. To follow and subscribe to latest blog updates use Google Reader. All are free!

Never delete the account used to create your blog. DELETING ACCOUNT DOES NOT DELETE YOUR BLOG.

After creating a post open the post page in browser by clicking on the post title. Then from browser menu click File>>Save Page As and save it to a backup folder on your hard drive. You should also backup your entire blog periodically. Backup your blog template (Login>>Layouts>>Edit Html>>Download Full Template)and widgets in same folder. Periodically record the folder to CD or DVD-ROM to insure against hard disk failure. Invest in a USB drive and synchronize backup folders to it. This will prevent piling up of backup CD/DVD-ROMs.

Keep passwords secure with Keep Pass - a free password encryptor and manager. In your Google or Gmail account settings enter a secondary email account.

Open a Paypal account and put in some donation links in your blog.

On the Main Page of the blog show only an expandable summary of the posts followed by a Read More link. This makes the main page load faster.

Burn your blog feed at Feedburner.com and copy the new feed url and paste it in Settings>>Site Feed>>Post Feed Redirect box and save. Now you will be able to know your full subscriber count. Put in a prominent Feed Icon at the top of your blog sidebar so viewers can subscribe to blog updates.

Lastly add content regularly at least thrice weekly. Do not make very long posts and add pictures and videos inbetween to break the monotony. Add Labels and social bookmarks to all posts.

Enjoy!