Add Twitter to Blog in 4 Clicks.

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!

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!

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.

The Labels Gadget for Classic Templates in Blogger.

Happy Holidays, Merry Christmas and a Happy New Year to all readers of The Blogdoctor! As a sort of gift to all Ye Olde Classic Template users out there I decided to release The Labels Gadget for Classic Templates.


There are many bloggers who still persist with Classic templates for various reasons. It has been their oft repeated demand for a Labels gadget in the sidebar as can be added in the Layouts template. In Classic templates though the labels appear below the posts their links have to be added by manually coding in HTML in the template.


Those with Classic templates can do this by upgrading to Layouts. Those who wish to keep their classic templates can use this method to add Label links to the sidebar.........

ADD LABELS GADGET TO TEMPLATE

Follow these steps to add the Labels Gadget to Classic templates :

1. Login at Blogger.com.

2. Click 'Template' link on Dashboard under Blog Title. If there is a 'Layout' link instead then you can easily add the Labels Gadget to the sidebar.

3. On Template----->Edit Html subtab scroll down in Template Code box to the code for the sidebar. Depending on whether it is an official Blogger template or a customized one the code will differ. In the official Blogger Minima template the sidebar begins with this code :

<!-- Begin #sidebar left-->
<div id="sidebar-l"><div id="sidebar2">

Paste the code given in the next step immediately after the above code. You can also paste it immediately above this code :

<h2 class="sidebar-title">Links</h2>

THE LABELS GADGET CODE

The Labels gadget code depends on the Google Dynamic Ajax Feed Control which was used to create the Ajax Blog List Gadget with Post Preview.


Copy the code below into a Notepad file. Then modify it as shown below the code and paste it in the Classic template :

<h2 class="sidebar-title">Labels</h2>

<!-- ++Begin Dynamic Feed Wizard Generated Code++ -->
 <!--
 // Created with a Google AJAX Search and Feed Wizard
 // http://code.google.com/apis/ajaxsearch/wizards.html
 -->

 <!--
 // The Following div element will end up holding the actual feed control.
 // You can place this anywhere on your page.
 -->
 <div id="feed-control">
   <span style="margin:10px;padding:4px;">Loading...</span>
 </div>

 <!-- Google Ajax Api
 -->
 <script src="http://www.google.com/jsapi?key=notsupplied-wizard"
   type="text/javascript"></script>

 <!-- Dynamic Feed Control and Stylesheet -->
<script src="http://blogging-tips-gadget.googlecode.com/files/gfdynamicfeedcontrolMod2.js" type="text/javascript"></script>
 <style type="text/css">
   .gfg-root {
 width : 200px;
 height : auto;
 position : relative;
 overflow : hidden;
 text-align : center;
 font-family: "Arial", sans-serif;
 font-size: 12px;
 border: 1px solid #BCCDF0;
}

.gfg-title {
 font-size: 14px;
 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: 12px;
 font-weight : bold;
 color : #3366cc;
 background-color: #E5ECF9;
 line-height : 1.4em;
 overflow : hidden;
 white-space : nowrap;
 margin-bottom : 5px;
}

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

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

.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: 14px;
 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;
}
 </style>

 <script type="text/javascript">
   function LoadDynamicFeedControl() {
     var feeds = [
   {title: 'Labels',
   

url:'http://pipes.yahoo.com/pipes/pipe.run?_id=e7af483f40bb1d94a064bb2612e844f4&_render=rss&urlinput2=http://MYBLOG.blogspot.com'
   }];
     var options = {
       stacked : false,
       horizontal : false,
       title : ""
     }

     new GFdynamicFeedControl(feeds, 'feed-control', options);
   }
   // Load the feeds API and set the onload callback.
   google.load('feeds', '1');
   google.setOnLoadCallback(LoadDynamicFeedControl);
 </script>
 Gadget by <a href="http://www.blogdoctor.me">The Blog Doctor.</a>
<!-- ++End Dynamic Feed Control Wizard Generated Code++ -->

Replace "MYBLOG" with actual name of your blog.

Save Template and View Blog.

FEATURES

The Labels Gadget for Classic Templates has the following features :

1. Label Links added automatically. There may be a slight delay till the post feed is published.

2. Labels linked to their label pages.

3. Labels arranged in order of frequency.

4. It can be customized by changing the CSS code between <style type="text/css"> and </style >


Enjoy!

Show Top Labels Only In Labels Widget.

As you write more and more posts you will keep adding labels to them to categorize your posts. You can add more than one label to any single post. Labels are useful as they serve as keywords channelling traffic to your posts through search engines like Technorati.



However the list of labels in your blog can get to be very long stretching your sidebar until your blog post looks like a flag on top of a long sidebar. To prevent this you can modify the code of your Labels widget to show only the topmost labels in your blog..............

LIMIT LABEL NUMBER

To limit the number of labels shown in your Labels sidebar widget login at Blogger.com and click 'Layout' link on Dashboard. The Page Elements subtab of Template tab will open. If you do not have a Labels widget in the sidebar Add a Labels Page Element to it.



After the Labels widget is added click on Edit Html subtab of Template tab. This will open the Template code box on the Edit Html subtab. Click the Expand Widgets Template checkbox on top of the Template code box to put a check mark in it. The Template code box will show the expanded widgets templates.



Scroll down in the Template code box to locate the code for the Labels widget. This will look like this :

<b:widget id='Label1' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
  <b:if cond='data:title'>
    <h2><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <ul>
    <b:loop values='data:labels' var='label'>
      <li>
        <b:if cond='data:blog.url == data:label.url'>
          <span expr:dir='data:blog.languageDirection'>
            <data:label.name/>
          </span>
        <b:else/>
          <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'>
            <data:label.name/>
          </a>
        </b:if>
        <span dir='ltr'>(<data:label.count/>)</span>
      </li>
    </b:loop>
    </ul>

    <b:include name='quickedit'/>
  </div>
</b:includable>
</b:widget>

REPLACE THE WHOLE ABOVE CODE WITH THE CODE BELOW :

<b:widget id='Label1' locked='false' title='Labels' type='Label'>
<b:includable id='main'> 
<b:if cond='data:title'>
    <h2><data:title/></h2>
  </b:if>
    <ul>
      <script type='text/javascript'>
        var labelnum = 0;
        <b:loop values='data:labels' var='label'>
        if (<data:label.count/> &gt; 2) {
           document.write(&quot;<li><a expr:href='data:label.url +  "?max-results=100"' 
rel='nofollow'><span><data:label.name/></span></a>(<data:label.count/>)</li>&quot;);
        }
        </b:loop>
      </script>
    </ul>
 <b:include name='quickedit'/>
</b:includable>
</b:widget>

The code above will only show labels with more than two posts. To increase number of labels increase the number two in this code :

if (<data:label.count/> &gt; 2) {

Preview. Save Template. Clear Cache. View Blog.



In the screenshot at right you can see two label widgets. The Modified Labels widget at the top shows only the top two most frequently applied labels. The Normal Labels widget at the bottom shows all the labels in the blog. If you have such a widget and lots of labels it can get terribly long making your blog stand on it's long sidebar!!

LIMIT NUMBER OF POSTS SHOWN FOR LABELS

When a label is clicked in the sidebar the default number of posts loaded is 20. You can also decrease this number by modifying the code show above. Take a look at these code lines within the above code :

<a expr:href='data:label.url +  "?max-results=100"' rel='nofollow'>

Change '100' in the above line to the number of posts you wish to load. Remember that if you select a higher number the page will take too long to load and you may lose traffic.


Happy Blogging!

Put a Digg Widget in your Blog.

You can now put the latest Digg news in your blog. Digg has launched a widget which you can add in your blog. You can customize it to fit the look of your blog and configure it to display whatever you want to show from Digg............

So what are widgets you ask? Widgets are portable chunk of code that can be installed and executed within any separate HTML-based web page by an end user without requiring additional compilation. In Blogger they are called Page Elements when they make up parts of the web page and the code executing these is the widget. You can move these to rearrange the appearance of your web page or blog through the Page Elements subtab of the Template tab. To access them directly click on Layout of your blog after logging in to the Blogger Dashboard.




Blogger has it's own stable of widgets. You can also add third party widgets from other sites. Widgets like the Poll widget add interactivity to your blog. You can add pictures and other multimedia elements through the Picture and Video bar widgets. You can display the contents of another site in your blog by converting the site feed into Javascript code. The widget is published on your blog and pulls content from other sites to display on your blog.




To display the Digg Widget in your blog go to http://digg.com/add-digg. Here you can choose the styling of the widget and what content it will display. There is no need to register or even login. Just choose from the choices : See picture below :


After selecting your choices copy the entire code at the bottom. Login to your Blogger Dashboard and click on Layout. Then click Add Page Element link in sidebar and choose Html/Javascript option. Paste the code from the Digg site in the content window and save. See the Digg Widget at the bottom of the right hand column in this blog. This is a Javascript widget so the only disadvantage is that it will not work if Javascript is disabled in viewer's browser.