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!

List all the posts in alphabetical order in Blogger.

PROBLEM : How can you list all the posts in your blog in alphabetical order?

SOLUTION :................


We will use Yahoo Pipes to solve this problem as we did in How to Display Combined Labels in Blogger?

GET BLOG FEED

First we get the blog feed URL. In this case we will use :

http://betabloggerfordummies.blogspot.com/atom.xml

Then to include all posts we add this parameter to the above feed url :

?redirect=false&start-index=1&max-results=999

This will fetch 1000 posts from the blog. Now the complete feed url is :

http://betabloggerfordummies.blogspot.com/atom.xml?redirect=false&start-index=1&max-results=999

To get your feed url simply replace 'betabloggerfordummies' in the above url with your blog name.

YAHOO PIPES

Next get a Yahoo account and go to Yahoo Pipes. Click Create a Pipe to open the interface. In the sidebar click Source and from drop down list drag and drop a Fetch Feed module onto the Interface. In the Fetch Feed module paste the URL for the blog feed shown in above step. See Picture below






Next click on arrow next to 'Operators' in the sidebar. From the drop down list choose 'Sort' module and drag and drop that onto the interface. See Picture below



In the Sort Module choose Sort by "item title" in "ascending" order. Drag the blue circle on the bottom border of the Fetch Feed module and connect it to the Sort Module. Then connect the Sort Module to the Pipe Output Module.



Wait for the results to appear in the bottom grey Debugger pane. Click Save Pipe at the top right of the interface. Give it a name and OK it. Next click Run Pipe link at the top center of the interface. You can see the pipe I made here.


Open the pipe by clicking the link above. Click Clone link at top and a copy of this pipe will be added to your Yahoo Pipes. Click Edit Source link and it will open in your interface just as shown in above diagrams. Then in the Fetch Feed Module paste in your Blog Feed url as shown in first step and you have your own pipe. Save it with your own title/name. Click Run Pipe and you will see the output of all posts sorted alphabetically from your blog.



At the top click the 'Get as Badge' link and in popup window click Blogger and the Add Page Element window will open and you can add this list to any of your blogs.

SORT LABEL POSTS ALPHABETICALLY

To sort Label Posts alphabetically paste the Label Feed url in the Fetch Feed module. See the Sort Label Posts Alphabetically Yahoo Pipe I made for the label Template in this blog. Clone it as shown above. In the Fetch Feed module text box replace 'betabloggerfordummies' and 'Template' with your blog name and label name to make your own label pipe.



Enjoy!

How to Display Combined Labels in Blogger?

Labels are used in the new Blogger to categorize posts according to categories. Clicking on a Label in the sidebar displays all posts associated with that label.


Click another label and all posts from that label will be displayed. Here is a method by which two labels can be combined..........

GET LABEL PAGES URL

Label Pages in Blogger have the following type of address :

http://MYBLOG.blogspot.com/search/label/LABEL_NAME

Replace the CAPS. The Feed for the label is :

http://MYBLOG.blogspot.com/feeds/posts/default/-/LABEL


For instance the URL of the Label 'Widgets' in this blog is :

http://betabloggerfordummies.blogspot.com/search/label/Widgets

and the Feed URL for it is :

http://betabloggerfordummies.blogspot.com/feeds/posts/default/-/Widgets

USING YAHOO PIPES

We will combine these two Labels from my blog using Yahoo Pipes. The two Label URLs are :

http://betabloggerfordummies.blogspot.com/search/label/Template

for the 'Template' Label, and :

http://betabloggerfordummies.blogspot.com/search/label/Widgets

for the 'Widgets' Label.

To combine the above two go to Yahoo Pipes and register. Click 'Create a Pipe' link at the top. The drag and drop interface will open. Click arrow before 'Sources' in the sidebar. From the drop down list drag and drop two 'Fetch Site Feed' modules from the sidebar onto the interface. Copy and paste the Label URLs of the Labels you wish to combine in the modules.


If you want to use Label Feeds use the Fetch Feed module and paste in them the Label Feed URLs.


Add a third module from the sidebar : Click the arrow pointing to Operators in the sidebar. In the drop down drag the 'Union' operator module from sidebar onto the interface. Link the two Site Feed Modules to the 'Union' module and the Union module to the 'Pipe Output' module. See picture below :



Save the pipe by clicking the 'Save' link at the top right of the interface and give it a name.

ADDING PIPE TO BLOG

Click the 'Back to My Pipes' link at the top of the interface. The pipe will now be listed under your account. Click on the pipe name to open it and see the result of the pipe output. Click on 'Get As a Badge' link at the top of the output. In the pop up window under "Where will you put this badge?" click on the Blogger symbol. The Add Widget to Blogger window will open and you can add the pipe to any of your blogs. See picture below :





Enjoy!