TrickBlogger: The Labels Gadget for Classic Templates in Blogger.

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

Enjoy!