The Labels Gadget for Classic Templates in Blogger. ~ The Blog Doctor.
Loading...

The Labels Gadget for Classic Templates in Blogger.

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

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!

11 comments:

laurie in maine said...

I may be one of yer YE OLD CLASSIC users? :) Because when I see the "this may change everything" preview I chicken out!
I would like to add "Older Posts" link at the bottom so you don't have to scroll back to the top and look for a new month. HOW? Exactly...not a shiny new blog - a cranky 2 year old!

And a shiny new picture behind a wider title header would be cool. If I stop chickening out would my problems be solved?

Vin said...

laurie in maine,

What is your blog address?

laurie in maine said...

http://sockshavenothumbs.blogspot.com/

(Socks have NO Thumbs! :)

AND why do they make their damn verification letters so squiggly? I fail the eye test every other day!!!

Laurie in Maine said...

Never mind :) I finally closed my eyes and just hit UPGRADE! Now I need to figure out how to put the button logos back in and fix some font...

Virgil said...

hi vin,

i actually had the exact same question laurie had about adding the "older posts" link at the bottom of my page so that my visitors don't have to browse via month in my archives.

i'm currently in classic mode with my own layout. any help would be appreciated.

i'm at bookofvirgil[dot]blogspot

thanks!

Vin said...

Virgil,

The easiest method is the one Laurie followed : Upgrade to Layouts.

Anna Marie said...

I found this link on a Google Groups help page which suggested that this gadget was able to overcome the 20-post-per-label limit. Is this true?

(The reason I'm not updating to layouts is because they're not available for FTP users.)

Vin said...

Anna Marie,

At present label links in the gadget when clicked load 100 posts maximum. I do not advise a higher limit as it may crash the browser.

Taso g. said...

Just wanted to say thank you so much for this guide.

It was simple and well explained, it is very much appreciated.

Also, just a heads up, your link to the RGB chart is broken.

Akshay Jain said...

i want to know about how to remove dotted line display between two labels in categories.

Ingrid Wilson said...

Vin,
I have searched your site to no avail. I am having Label problems. Even though I have "Labels" selected in the "Configure Blog Posts" window, the labels are not showing up under my posts. I had the same problem with the share buttons, but found a code for that and now that is fixed. Is there a simple code to fix this problem too?
Bless you.

CLICK TO LEAVE A COMMENT..... :-)



Skip to top of post.

Search Blog Before Commenting

Loading...

Post a Comment

Please use the above search box to search this blog before posting your valuable comments.

Comments posted on Dummies Guide to Google Blogger (Beta) are moderated and will be approved only if they are on-topic and not abusive. Try not to include website URLs/links in your comments. You can email me : drbhatns at gmail dot com for any blogging question. Thanks,

Vin.

The Blog Doctor The Blog Doctor2 Blog Doctor Home

SUGGESTED READING

Tips On Blogger and Latest News.



Skip to top of post.