1. Install the Custom Buttons² Firefox extension

2. Go to View -> Add New Button in Firefox’s menu bar (screenshot)

3. Add the following text into the Code box (screenshot)

/*Code*/
const toolbar = document.getElementById("gtbToolbar");
toolbar.collapsed = !toolbar.collapsed;

4. Add the following text into the Initialization Code box (screenshot)

/* Custom Buttons Attributes Block Start */
this.setAttribute('author','Deadman36g, jw25, others');
this.setAttribute('version','20080313.00');
this.setAttribute('homepage', 'http://bit.ly/9OuW6');
this.setAttribute('dependency','null');
this.setAttribute('status','Dev');
this.setAttribute('public',true);
this.setAttribute('help','0,null');
// this.tooltipText += '';
/* Custom Buttons Attributes Block End */

5. Fill in a name for your button, choose a custom image if you want, and save it. For my image I searched for “google favicon” in Google Images and picked one that was 16×16 pixels.

6. Now go to View -> Toolbars -> Customize and drag your new button to a place of your choosing. Mine is on my bookmarks toolbar. (screenshot)

And you’re done! If you need to edit the button further you can right-click on it to get a menu with more options.

Source: custombuttons2.com (the site is currently down, but here’s Google’s cache of the page)

Technorati Tags: firefox, google, toolbar, toggle, howto, button