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!

Add a Country Map to your Blog.

To add a country map to your blog............

first you willhave to follow the instructions in Add a Google Map to your blog. (Step 1) After having added the map to your blog you need the Latitude and Longitude of the point on earth where you want to center your map. Do this by entering the place name in Google along with the words 'latitude longitude' and pressing Search.

Google will give the coordinates of Latitude and Longitude for that place. Enter these figures in the following line of code in your template (Step 2). This line of code is there in your template because you entered it in Step 1 above.

map.setCenter(new GLatLng(37.4419, -122.1419), 5);

The figures in brackets are the Latitude and the Longitude of the place where you want to center the map. The next figure - 5 - is the zoom factor. NOTE that Google does not have the same detailed maps of the entire planet. If you enter a very large number here the map will not come up on the page. So start with a small figure like 5 and increase it till Google says it does not have more detailed maps.
I have added the map of India as shown in following picture :



Click on Image for larger preview.

Now you will want to add some place markers to the map. First create an image representative of the place where you will place the marker and save in PNG format. Then upload the image to a freeserver like Googlepages and copy down the url (Step 3). Then in your blog template add the following lines just after the line you added in Step 2 to the template :


var point = new GLatLng(18.96,72.82);
var marker = createMarker(point,'<div style="width:240px">NAME OF PLACE<br /><a href="MY SITE URL">Link</a> to my home page<br /><img src="URL OF PLACE IMAGE" width=XXX height=YYY></div>')
map.addOverlay(marker);


Enter the Latitude and Longitude of the place where you want to place the marker in line 1 of the above code. Enter the place name instead of 'NAME OF MY PLACE'. Enter your site link url instead of 'MY SITE URL'. Enter the url of the image you noted down in Step 3 instead of 'URL OF PLACE IMAGE'. Enter the width and height of the image in pixels instead of XXX and YYY.

Save Template. See the image above where I have added it to Delhi. To see this map in action go to Google Ajax Made Easy. and click on the marker for Delhi.

Technorati Tags:ajax search, country map, google map, map marker

Add a Google AJAX Search to your Blog.

To add a Google AJAX Search to your Blog go to.............

http://code.google.com/apis/ajaxsearch/ and get a Google AJAX Search API key. Click on
Sign up for a Google AJAX Search API key button and you will be taken to this page:
http://code.google.com/apis/ajaxsearch/signup.html. Put a check in the box where it says I have read and agree with the terms and conditions and paste your blog url in the textbox below and click on Generate API Key button.

Your API Key and code is generated. Paste this code (blue lines only) :

<link href="http://www.google.com/uds/css/gsearch.css" type="text/css" rel="stylesheet"/>

<script src="http://www.google.com/uds/api?file=uds.js&v=1.0&key=YOUR API KEY CODE HERE" type="text/javascript">
IN THE ABOVE LINE ADD amp; AFTER BOTH THE & CHARACTERS OR YOU WILL GET ERROR MESSAGE.
</script>
<script language="Javascript" type="text/javascript">
//<![CDATA[

function OnLoad() {
// Create a search control
var searchControl = new GSearchControl();

// Add in a full set of searchers
var localSearch = new GlocalSearch();
searchControl.addSearcher(localSearch);
searchControl.addSearcher(new GwebSearch());
searchControl.addSearcher(new GvideoSearch());
searchControl.addSearcher(new GblogSearch());

// Set the Local Search center point
localSearch.setCenterPoint("New York, NY");

// Tell the searcher to draw itself and tell it where to attach
searchControl.draw(document.getElementById("searchcontrol"));

// Execute an inital search
searchControl.execute("Google");
}

//]]>
</script>

in your template just after the title tags and save. Type in your Google API key code where it says 'YOUR API KEY CODE HERE' above.



Then paste this code inyour template just after <body> tag :

<body onload="OnLoad()">
<div id="searchcontrol"/>
</body>

and Save.



Paste this code in the css part of your template :

#searchcontrol {
float:right;
margin-right: 95px;
}



See how I have added it to my test site :http://testbetatemplate.blogspot.com/
Click on image below for larger view.





IMPORTANT : It is necessary to have an empty space in the right hand part of the body of your template to add this in the way I have done.

Technorati Tags:ajax search, google