Introduction: Make a Google Tool-bar Button
Learn how to make a "Button" for the Google tool-bar.
Step 1: Get the Tool-bar
Go to http://toolbar.google.com/T4/ to pick-up the Google tool-bar Beta.
Step 2: Find the Folder
The default folder where we will be storing our buttons is located at:
"C:\Documents and Settings\Administrator\Local Settings\Application Data\Google"
Step 3: See an Example
A good example of a button file is file-named:
If you right click it and select edit you will see the following text (DO NOT BE AFRAID):
<?xml version="1.0" encoding="utf-8"?>
<description>Look up a definition</description>
<icon mode="base64" type="image/x-icon">
looks scary, huh?
Step 4: Lay-out of the Button
The button's XML is broken into five main parts:
1. Site- Where the button will link it's user to.
2. Title- What the name of the button will be
3. Description- Displayed when user hover's mouse over button.
4. Icon- the Base 64 icon code (will explain later)
5. Where it will be stored (optional)
The Basic "template" will look like this:
<site>http://YOUR SITE HERE</site>
<icon mode="base64">YOUR ICON CODE GOES HERE (WILL EXPLAIN LATER)=</icon>
<update>http://WHERE IT IS HOSTED (OPTIONAL)</update>
Step 5: Write the Button
First, open up notepad. If you haven't alread, go ahead and copy and paste the template i have provided in the previous step. Fill in all the Cap letters with your own desired info. Now comes time to do the icon. You will need to convert a 64x64 icon into a base64 string (dont worry its simple). First get your icon. I have found that the best way to do this is to type in the name of the site and inject "/favicon.ico" after the site URL. For example:
Right click the icon and select "Save image as...". Once saved on to your HDD, go to http://www.motobit.com/util/base64-decoder-encoder.asp and simply upload your image and press "Convert the source data". After it is done be sure and copy ALL of the BASE64 text. Now simply go to your notepad and paste all the base64 between the "<icon mode="base64">" and "</icon>" tags.
Step 6: Final Stages and Tips
We have a be nice policy.
Please be positive and constructive.