These are my gadgets and hacks for wedsites, blogs, etc.
go to: World Clock gadget Calendar gadget Chuck Norris Facts gadget Blogger Hacks

Coming Soon - The World Clock Gadget
This one will have it all: the ability to see both the standard and daylight savings time in each time zone in the world, a list of the major cities in each time zone, and a list of the time exceptions in each time zone. All of this is contained in a narrow gadget that should fit easily into any blog sidebar.

  

******************************************************************************************************
go to: World Clock gadget Calendar gadget Chuck Norris Facts gadget Blogger Hacks

The Calendar gadget
Despite the illusion of borders, this gadget is built without the use of borders or padding so it should be crossbrowser compatible and maintain it's dimensions of 224px wide x 168px high. I have tested it in IE 6.0 and Firefox.

  


Copyright Garth Engwall 2009. This gadget has been built by me from the ground up. Any similarity in coding with other proprietary code is coincidental. The holiday calculators have been built by me except where noted by inclusion of the original owner/programmer information. You are free to use, distribute, or abuse this gadget in anyway you wish. However, it is provided without any (official) support.
******************************************************************************************************
go to: World Clock gadget Calendar gadget Chuck Norris Facts gadget Blogger Hacks

Chuck Norris Facts gadget
The header on this file is the actual flash from Chuck Norris' official web site. I have not been informed that they object to my linking to this flash file, but, then again, I am quite certain they don't know I am linking to it. If they take issue with this in the future, the header will have to change. Info in the html identifies that the copyright for the header resides with the Chuck Norris web site.

  
Downloads (make sure to change the url's in step 1 of the instructions if you are going to keep your own copy of scripts and styles):
http://gengwall.netau.net/chucknorrisfacts.js
(this file contains the facts, the whole facts, and nothing but the facts)

The warning and add buttons on the bottom right of the gadget link specifically to my blog where I track the facts. If you decide to download and maintain your own list of facts, you will need to either hide these buttons or create your own tracking mechanism for them to link to.


Copyright Garth Engwall 2009. Header flash copyright http://www.chucknorris.com. You are free to use, distribute, or abuse this gadget in anyway you wish. However, it is provided without any (official) support.
******************************************************************************************************
go to: World Clock gadget Calendar gadget Chuck Norris Facts gadget Blogger Hacks

Blogger Hacks
These are improvements I have made on my blog to some of the standard sidebar widgets.

WARNING! This involves changing the code within widgets in your blogger template. Make sure you save a copy of your complete template code before attempting these changes. Also, it is often easier if you copy the code for the entire widget out from the template, paste it into notepad, and work on it there. Once you have finished the work, copy and paste the entire widget REPLACING the original in the template.

Most of the work for all of these hacks occurs in your blogger template, which can be accessed by opening up the Edit HTML page of your blogger layout customization page. Make sure to click on the checkbox to "Expand Widget Templates".

The Hide/Show Widget Hack
Do you have 8 million labels that go on and on down the page? Do you have some widget that takes forever to scroll thru? Ever wish you could give your readers the option of hiding these long widgets to shorten your blog page up? That is what this hack will do. (See the blog archive and label widgets on my blog linked above for examples)

This is how you implement the Hide/Show Widget hack.

1. Open up the Edit HTML page of your blogger layout customization page. Make sure to click on the checkbox to "Expand Widget Templates"

2. Put the following code in the head section of your blog template:

3. Put the following styles inside the style tag in the head section of the template:
4. Find the section of code where the widget that you want to hide/show begins. It will look something like this:
<b:widget id='[widget type and instance]' locked='false' title='[whatever title you gave that widget]' type='[widget type like "BLogArchive" or "Label"]'>
5. Within the code for the widget, find the includable section with the id of "main". The section will begin something like:
<b:includable id='main'>
6. The first part of the main includable is where the title of the widget is generated. It looks something like this:
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
  <div>
    <h2 class='title'><data:title/></h2>
  </div>
</b:if>
Note: if there is no div tag surrounding the title "h" tags, then add the whole div as shown below instead of just adding the style element. MAKE SURE to include the closing div tag after the closing "h" tag.

7. You are going to make a few changes to the existing code and add a large block of additional code to this section. The first two changes are:

To the div tag that contains the title, add the following:
style='width:80%;float:left;'
Now Change the "H" tags from "h2" to "h3"
Using the example above, the whole section should now look like this (I have highlighted the addition):
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
  <div style='width:80%;float:left;'>
    <h3 class='title'><data:title/></h3>
  </div>
</b:if>
8. Now for the addition. After the div closing tag for the div you just made changes to, add the following code:
Note the section in brackets called [widgetname]. You must change that whole section (including the brackets) to a name of your choice, preferrably the name of this widget (for example - "Label1"). The entire block for our example should now look like this, with changes in red and additions in blue:

<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
  <div style='width:80%;float:left;'>
    <h3 class='title'><data:title/></h3>
  </div>
  <div style='width:20%;float:left;text-align:right'>
    <h3>
      <a class='expand1' expr:id='data:widget.instanceId + "_[widgetname]" + "||expand0"' href='' onClick='javascript:expander(this.id);return false'>
      [hide]</a>
      <a class='expand0' expr:id='data:widget.instanceId + "_[widgetname]" + "||expand1"' href='' onClick='javascript:expander(this.id);return false'>
      [show]</a>
    </h3>
  </div>
  <div class='sidebarTitleUnder' style='float:none;clear:both;'/>
 </b:if>

9. One last step. Right after the title section we have been working on should be the beginning of the content section. It will have a div tag that says something like:
<div class='widget-content'>
You need to add the following expression and style to that tag:
expr:id='data:widget.instanceId + "_[widgetname]"' style='display:block'
As in step 8, notice the bracketed part in green. That needs to be changed to the same name you used in step 8. The finished tag should look like this:
<div class='widget-content' expr:id='data:widget.instanceId + "_[widgetname]"' style='display:block'>
That's it! Now, for that widget, a small "hide" link will appear on the right side of the title bar. Clicking on it will hide the widget content and change the link to "show". Clicking again toggles the content back to visible. To review, there are three basic steps: add the script and style code from steps 2 and 3; make the changes to the existing code from steps 7 and 9; and add the code from step 8.

One more tip. If you would like the blog to open with the content already hidden, simply make the following changes to the last section of code that was added in steps 8 and 9 above. First, reverse the class in the two anchor tags, so that the first class="expand0" and the second class="expand1". Then switch the text within those anchor tags, so that the first says "show" and the second says "hide". Finally, on the content div tag from step 9, change the style to "display:none".

The Advanced "Read More" Post Summary Hack
There are plenty of "Read Only" hacks out there, including in the blogger help files. They all follow a basic pattern which involves manipulating styles in the template and adding a "fullpost" span to your default post html. I have taken that as a basis, and added two additional elements.

One of the annoying parts of these hacks is that even if you don't put the "fullpost" span on a blog post, the "read more" still shows up when the post is displayed in a post listing page. People have asked quite often for a fix so that if you leave "fullpost" out, your readers will not be fooled into thinking the post is summarized. In other words, they will know that they are looking at the whole post. Part A) of this hack accomplishes that goal.

Another thing people have asked for is the ability to expand the post to its full length on the spot, as it were, instead of having to go to the post's specific item page to read the whole thing. Part B) of this adds expand and contract functionality for any post that is summarized right on the post listing page.

A quick refresher on the standard "read more" hack. You can find the instructions for this hack at http://help.blogger.com/bin/answer.py?hl=en&answer=42215. The abbreviated instructions are:

1. Add a condition to the style sheet that interprets whether the page being displayed is a list or an individual blog post and displays or hides the "fullpost" span on the post itself:
<b:if cond='data:blog.pageType == "item"'>
   span.fullpost {display:inline;}
<b:else/>
   span.fullpost {display:none;}
</b:if>
2. Add the following code to your template, somewhere after the <data:post.body/> tag:
<b:if cond='data:blog.pageType != "item"'><br />
   <a expr:href='data:post.url'>Read more!</a>
</b:if>
3.Put a "fullpost" span in the defualt post HTML, and subsequently in individual posts, which will contain the hidden or "read more" part of the post. For example
Here is the beginning of my post.
<span class="fullpost">And here is the rest of it.</span>
That is the standard hack in a nutshell. Now on to the enhancements.

Part A - Supressing "read more". We need to be able to interpret whether or not the "fullpost" span has been added to a post from within the blog template. If there is, then step 2 above will be executed, otherwise, no "read more" link will be produced. In order to do this, we need to put the generation of the "read more" link within some javascript code so that we can programatically turn it on or off.

1. After the if condition and before the anchor tag in the instructions of step 2 above, put the following html code:

The resulting block should now look like this, with the new code in red:
<b:if cond='data:blog.pageType != "item"'><br />
<textarea expr:id='"ad" + data:post.id' style='display:none'><data:post.body/></textarea>
   <a expr:href='data:post.url'>Read more!</a>
</b:if>
The text area tag will hold the full html of the post but as text, not html code, so that javascript can easily scan that text for the "fullpost tag".

2. REPLACE the anchor tag in the code with the following script.
The resulting block should now look like this, with the previous addition in red and the new code in blue:
<b:if cond='data:blog.pageType != "item"'><br />
<textarea expr:id='"ad" + data:post.id' style='display:none'><data:post.body/></textarea>
<script>
if(document.getElementById('ad<data:post.id/>').innerHTML.indexOf('fullpost')>=0) {
   document.write("<a expr:href='data:post.url' target='_blank'>Read more....</a><br/>")
}
</script>
 </b:if>
Note that the previous pure html anchor has been replaced by the script and is now being generated based on the results of the test for "fullpost" within the script.

That's it for part A). Not too bad. It gets a little messier in part B).

Part B - Allow expand and collapse of post within post listing page. We will now add additional code to that just shown above, and some script in the header of the page, that will enable you to expand the post "on the spot".

1. First, paste the following script into the header section of the blog template.

2. Now we are going to add some javascript to what we already put in with Part A step 2. This new script goes within the same if clause in the javascript that currently has just the one line for generating the anchor tag. Although that anchor generation line stays in the script, some of the new code goes before it and some after, so it is probably best to just paste the whole block over it. Therefore, copy the code below and paste it over the code from above that reads:
   document.write("<a expr:href='data:post.url' target='_blank'>Read more....</a><br/>")
The new code is:

The final complete block of code should now look like this, with the coloring as before but the newest code in green:
<b:if cond='data:blog.pageType != "item"'><br />
<textarea expr:id='"ad" + data:post.id' style='display:none'><data:post.body/></textarea>
<script>
if(document.getElementById('ad<data:post.id/>').innerHTML.indexOf('fullpost')>=0) {
   idtxt='rmexp<data:post.id/>'
   document.write("<span id='" + idtxt + "' style='display:inline;'>")
    document.write("<a expr:href='data:post.url' target='_blank'>Read more....</a><br/>")
   document.write("[<a onClick='expandPostSummary(this)' style='cursor:pointer;'>expand post</a>]")
   document.write("</span>")
   idtxt='rmcol<data:post.id/>'
   document.write("<span id='" + idtxt + "' style='display:none;'>")
   document.write("[<a expr:href='"#" + data:post.id' onClick='collapsePostSummary(this)' style='cursor:pointer;'>collapse post</a>]")
   document.write("</span>")
 }
</script>
 </b:if>
There you go. Now each post will have the "read more" link to open the full post in a new window AND an "[expand post]" link to expand the full text of the post right in the current page. Once the post is expanded, a new link appears at the bottom to collapse it back to the summary.

Label Widget Post List Hack
I like how the blog archive widget has an expandable list of posts at the month level but always wondered why the label widget didn't do the same thing. After all, wouldn't it be nice to see a list of posts that have a particular label without having to go to a new page and scroll through/page through all the posts under that label? Well, this hack solves that problem. Now you can have an expandable list of posts under each label just like you do under each month in the blog archive.

The way this hack works is to first build the label list just like normal in the label widget, but with a few added tags which will hold the post titles and links. Then, once the whole page has loaded, we pull a post feed and loop through it, building the list under the label "on the fly". Because of the feed, this one is a little more involved than the others and requires a brief trip outside of blogger. Here are the instructions.

1. In order to pull the google blog feed, you need a jsapi key from goolge. Go to http://code.google.com/apis/ajaxfeeds/signup.html, click the terms agreement and enter in the url for your blog. Click the Generate API Key button and you will be presented with a Google Ajax Feed API page that lists your key in the first box. Copy and save this key because you will need it in the next step.

2. Copy the scripts below and past them in the head section of your blog template. MAKE SURE to replace the "[API KEY]", including the brackets, in the first script with the key you generated in step 1.

3. Now enter the styles below into the style tag within the head section of your blog template. (The first style can be eliminated if you do not want your post titles to be underlined when the mouse hovers over them.)
4. This hack will modify the standard label widget in blogger so make sure you have added that gadget to your blog's sidebar. Once that is done, find that section of code in your blog template.

5. We will be changing the content section of the widget. This usually begins with a div tag like this: <div class='widget-content'>. Find that section and copy it to a separate location (i.e. notepad) to work on.

6. First, remove all of the list tags from the code. These tags are: <ul>, <\ul>, <li>, <\li>. There should be one of each. We use a list structure for the post list now, and therefore will create the label list in a different manner.

7. You will notice that there is a loop tag which loops through the labels to create them in the widget. In between the loop beginning and closing tags is a section of code. This section will remain, but we are going to add code before and after it. To begin with, add the following code right after the loop beginning tag and right before this section of code.
Example...
<b:loop values='data:labels' var='label'>
---> new code goes here
   <b:if cond='data:blog.url == data:label.url'>
   ...rest of standard code
   <span dir='ltr'>(<data:label.count/>)</span>
</b:loop>
New code

8. Now, add the following code right before the loop closing tag tag and right after the afore mentioned section of code.
Example...
<b:loop values='data:labels' var='label'>
---> code from step 7 went here
   <b:if cond='data:blog.url == data:label.url'>
   ...rest of standard code
   <span dir='ltr'>(<data:label.count/>)</span>
---> new code goes here
</b:loop>
New code

The whole content section should now look like this, with new content in red:
<div class='widget-content'>
   <b:loop values='data:labels' var='label'>
      <div>
         <span expr:id='"close" + data:label.name' onclick='javascript:toggleLbl(this,"open_")' style='display:none;cursor:pointer;font-size:12px;line-height:.6em'>&#9660; </span>
         <span expr:id='"open_" + data:label.name' onclick='javascript:toggleLbl(this,"close")' style='display:inline;visibility:hidden;cursor:pointer;font-size:12px'>
            <b:if cond='data:blog.languageDirection == "rtl"'>
               &#9668;
            <b:else/>
               &#9658;
            </b:if>
         </span>
          <b:if cond='data:blog.url == data:label.url'>
            <span expr:dir='data:blog.languageDirection'>
                <data:label.name/>
            </span>
         <b:else/>
            <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'>
               <data:label.name/>
            </a>
         </b:if>
         <span dir='ltr'>(<data:label.count/>)</span>
      </div>
      <div>
      <ul class='posts' expr:id='"posts" + data:label.name' style='display:none;'>
      </ul>
      </div>
      <br />
    </b:loop>
</div>
Now, your label list should appear with the same kinds of arrows found on the blog archive. Click on a right (or left depending on text orientation) facing arrow and the list of posts for that label will display below the label. Click on a down facing arrow for an open list and the list will collapse back up. Good luck!