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!

Upgrade Classic Template without the "UPGRADE YOUR TEMPLATE" button.

Authentic Blogger Statement :

"I would like to change my 'Template' to 'Layout' but on the tab 'Customize Design' I don't even see the button of 'Upgrade', what should I do? "

Recently have seen many such appeals in the Blogger Help Group so I decided to investigate. Apparently the Blogger Team is working on a fix. Till then you can try out what I discovered..............


Blogger blogs have either Classic Templates or Layouts with widgets/gadgets. Classic templates are retained by those who wish to have the Ye Olde Blogger look. Layouts are preferred by those who do not want to be bothered too much with code and want a click and drag graphical user interface.


Those who wish to switch between Template and Layout could do easily using the UPGRADE YOUR TEMPLATE button (See picture below)



Many bloggers have reported the abscence of this button and hence the inability to upgrade their blogs to layout templates.

THE FIX

1. First Backup your blog to be on the safe side. This can be done using the export-backup function or the old backup method.

2. Backup blog Template using select-all-copy-paste from your Template Code box (Template---->Edit Html tab) to a Notepad file and save it on your disk.

3. Find your BlogID Number : This is essential as it will be used in the next step. To find it login at Blogger.com and click New Post button on Dashboard under the title of the blog you want to upgrade to Layouts. The Create Post page will open with a blank Post Editor. Copy the content of the address bar. It will look something like this :

http://www.blogger.com/post-create.g?blogID=BIG_NUMBER

Copy the BIG_NUMBER at the end of the address/URL.

4. Login at Blogger.com if you are not already logged in and open a new tab in your browser. Copy the URL below and paste in the address bar :

http://www.blogger.com/customize-template-choose.g?blogID=BIG_NUMBER&templateName=Minima

Replace BIG_NUMBER with your BlogID Number you copied in Step 3 above. Hit Enter key on keyboard.

If you have followed all steps correctly the Select New Template tab will open. Select your template and click the "Save Template" button.





NOTE : This is not same as picking another Classic template for your blog. The URL for that is :

http://www.blogger.com/template-choose.g?blogID=BIG_NUMBER

The URL for picking a new Layout is :

http://www.blogger.com/choosetemplate?blogID=BIG_NUMBER


Enjoy!

Make Three Column Classic Template.

Bloggers who are on ftp are forced to use the Classic Template as Blogger does not provide Layout Templates to blogs outside Google servers. A reader wanted to add a third column to his blog hosted on ftp and hence this post. Readers with Layout Templates can refer to How to Add Third Column To Blog.


In this example I was able to transform the two column Minima Classic Template into a Three Column template in only three steps. See picture below :


Click on Image to enlarge it.................

INCREASE BLOG WIDTH

The first step is to increase the width of the blog so that it can accomodate the space for an extra column. To do this login at Blogger.com and click Template link on the Dashboard. The Edit Html subtab of Template tab will open.



BACKUP TEMPLATE FIRST :First copy all the code in the Template Code box and paste into a Notepad file. Save that file as ClassicTemplateBackup.txt.


You can see the various columns in your blog by giving them temporary borders. In the Classic Minima template this is what they look like :


Click on Picture to enlarge it.



To alter the code in the Template Code box scroll down to this code :


@media all {
#content {
width:660px;
margin:0 auto;
padding:0;
text-align:left;
}
.......

CHANGE ABOVE CODE TO :

@media all {
#content {
width:880px;
margin:0 auto;
padding:0;
text-align:left;
}
.......

Notice that the width has been increased to 880px. Now I can introduce a new column sized upto 220px. This is because the 'content' container contains the posts 'main' column and the sidebar column. This is how it looks after increasing the width :

DEFINE THIRD COLUMN IN CSS

The next step is to define the size and name of your third column in the CSS part of your template. In your Template code box add this code :

#sidebarL {
width:220px;
float:left;
}

immediately after the code for the 'content' box altered in the first step above.

ADD THIRD COLUMN IN BODY

To add the third column in the body scroll down in the template till you come to this line :

<!-- End #main -->

Immediately after the above line paste the following code :

<!-- Begin #sidebarL -->
<div id="sidebarL">
<p>Spacefiller Nonsense Text to Outline New Column</p>
</div>
<!-- End #sidebarL -->

Preview and Save Template. Clear Cache and View Blog. This is how it will look like :




If you want you can increase the width of the header by increasing the width in this code :

#header {
width:660px;
margin:0 auto 10px;
border:1px solid #ccc;
background:#ff0000;
}

Use Preview to see what it looks like before saving.