Create Your Own Google Toolbar Buttons
These quick and easy instructions will show you how to create your own custom buttons for the Google Toolbar. If you have a web site or a Blog and you want to share your custom icon or search function for the Google Toolbar button to the world, this tutorial includes step-by-step instructions for you. By creating a custom icon or search function, you make it convenient for others to return to your site or search it. Take command of the toolbar and add a personal touch with icons and useful functions.
The following tutorial provides simple and easy to follow instructions for novice web developers and Blog enthusiasts who would like to create a personalized button and share it with the world. The process can take a little time if you want to create unique and nice looking icons that have a personal touch. When you are done, you will have a custom button that anyone can add to the Google Toolbar.
I. EXAMPLE
1. Install the Google Toolbar (http://toolbar.google.com/T4/index_xp.html) upgrade if you do not have it already
2. The following is an example of the how the link and icon may function from your page. Use your own font style and web site placement, or include the link in the signature block of your email messages. This makes it very easy for people utilize your custom button on their own Google Toolbar.
"Add this button to your Google Toolbar for Quick Reference"
Go to http://www.ExecutiveBlueprints.com to see how the sample link on a host web site offers the option to install a custom button on the Google Toolbar.
II. COPY CODE TO CREATE YOUR BUTTON
1. Copy and paste the following code as an XML file. Name the file "slashdot_buttom.xml". Be sure SAVE AS an XML file, not as an HTML page.
<?xml version="1.0" encoding="utf-8"?>
<custombuttons xmlns="http://toolbar.google.com/custombuttons/">
<button>
<site>http://www.executiveblueprints.com/</site>
<title>Executive Blueprints</title>
<description>Executive Blueprints</description>
<search>http://www.google.com/search?q={query}</search>
<icon>
R0lGODlhEAAQAPcAAAAAAGgAAJkAAMAAAOEAAP8AAABoAGhoAJloAMBoAOFoAP9oAACZAGiZAJmZ
AMCZAOGZAP+ZAADAAGjAAJnAAMDAAOHAAP/AAADhAGjhAJnhAMDhAOHhAP/hAAD/AGj/AJn/AMD/
AOH/AP//AAAAaGgAaJkAaMAAaOEAaP8AaABoaGhoaJloaMBoaOFoaP9oaACZaGiZaJmZaMCZaOGZ
aP+ZaADAaGjAaJnAaMDAaOHAaP/AaADhaGjhaJnhaMDhaOHhaP/haAD/aGj/aJn/aMD/aOH/aP//
aAAAmWgAmZkAmcAAmeEAmf8AmQBomWhomZlomcBomeFomf9omQCZmWiZmZmZmcCZmeGZmf+ZmQDA
mWjAmZnAmcDAmeHAmf/AmQDhmWjhmZnhmcDhmeHhmf/hmQD/mWj/mZn/mcD/meH/mf//mQAAwGgA
wJkAwMAAwOEAwP8AwABowGhowJlowMBowOFowP9owACZwGiZwJmZwMCZwOGZwP+ZwADAwGjAwJnA
wMDAwOHAwP/AwADhwGjhwJnhwMDhwOHhwP/hwAD/wGj/wJn/wMD/wOH/wP//wAAA4WgA4ZkA4cAA
4eEA4f8A4QBo4Who4Zlo4cBo4eFo4f9o4QCZ4WiZ4ZmZ4cCZ4eGZ4f+Z4QDA4WjA4ZnA4cDA4eHA
4f/A4QDh4Wjh4Znh4cDh4eHh4f/h4QD/4Wj/4Zn/4cD/4eH/4f//4QAA/2gA/5kA/8AA/+EA//8A
/wBo/2ho/5lo/8Bo/+Fo//9o/wCZ/2iZ/5mZ/8CZ/+GZ//+Z/wDA/2jA/5nA/8DA/+HA///A/wDh
/2jh/5nh/8Dh/+Hh///h/wD//2j//5n//8D//+H//////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAANcALAAAAAAQABAA
QAjeAK8JvBbtGjRWgkyxgnZtlkBWgaBYCSTIypVA0ARBYWHFCkNWHa08YcGKhYoSVp6R2MPQWqBA
AFboeQINypMVewKxGshqDys9EHXqhGbto6kVXaIJuiJIEICYpUwGugZyRSkrT1VAMxVoz9U9A6+t
epnHlJ5AqxCFFQgt2kIrUFiVCqQw7JUVK0rolGFlxUI9pQpG1cnqypU9KwCQCFTFijVWXQBYaVV4
opU9mEUqhHgQrmRTpqzI2MNVLNYAekiUeKJHzwoSEncaXNVXT5WtgYAGsrb22uNSwFnJChsQADs=
</icon>
</button>
</custombuttons>
2. Modify the URL, Name and Description from the above code to reflect your own web page or Blog, Name and Description. The Name and Description must be 30 characters or less. For Example, if your web site is http://www.FirstOCHomes.com, then you might replace the above references to "Executive Blueprints" as follows:
<site>http://www.firstochomes.com/</site>
<title>FirstOCHomes</title>
<description>FirstOCHomes: Real Estate</description>
So far you have only copied basic code into an XML file and personalized three lines of text. This is pretty easy!
3. Post your XML File to your domain server on the Internet. The file should be in your root (main) directory.
4. Create a link from your Home Page to your personal slashdot_buttom.xml file. (For example: Link text: "Add this button to your Google Toolbar for Quick Reference", Link like this: http://toolbar.google.com/buttons/add?url=http://www.firstochomes.com/slashdot_button.xml)
Now you should have a functioning link that will offer visitors the option to create an icon on the Google Toolbar that links directly to your web page or Blog. This custom button is a simple and convenient shortcut.
III. CREATE YOUR PERSONAL ICON
The following steps will help you to create a personalized icon for your custom button. You will need an image editing application. If you do not have any custom software, you can use Microsoft Paint program that is typically included as a free accessory with Microsoft Windows. (Programs > Accessories > Paint).
The following instructions are useful tips for using the Microsoft Paint Program to create your personalized icon:
The Icon size must be 16x16. 16 pixels high by 16 pixels wide is a small and simple logo, don't plan on using words or phrases.
- View > Zoom > Large Size: Get a better view.
- View > Zoom > Show Grid: Start at the top left corner and count 16 pixels to the right and 16 pixels down, this is your working area.
- SAVE AS: "myicon.gif" Save your icon as a GIF file, so it will have a clear background.
- POST your "myicon.gif" file to your web site or use it on your blog. This will help people to recognize the icon as your custom button!
IV. TURN YOUR ICON INTO A GOOGLE TOOLBAR BUTTON
1. Go to: http://www.motobit.com/util/base64-decoder-encoder.asp
2. Scroll down the page and look for the option to "or select a file to convert to a base64 string"
3. Click BROWSE and search for the "myicon.gif" personal icon that you created and saved on your computer.
4. When you have clicked on your icon, then click the button to "CONVERT the source Data". Your icon image will be converted into Base 64 Code.
5. Copy ALL of the Base 64 code text that appears in the top box on the web site and PASTE this code into the slashdot_button.xml file that you created. This Base 64 Code for your icon should be pasted between the existing <icon> and </icon> on your XML page (see the above sample XML page as reference). Be sure to replace all of the previous code, and be sure to use all of the Base 64 Code from the top white box on the Base 64 web site (you may have to scroll to see all of the code).
6. SAVE your updated slashdot_button.xml file to your web site.
Now you should have a shortcut for the Google Toolbar and a Custom Button icon that you created yourself! You can create links on your web site or Blog, include the shortcut in emails, and submit it to the Google API gallery at http://www.google.com/support/toolbar/bin/request.py?contact_type=button
V. MORE INFORMATION
For information on how to create more sophisticated search tool and RSS feed functions, go to http://www.google.com/tools/toolbar/buttons/apis/howto_guide.html
Email the URL for your XML file to submit your custom button to the gallery at www.BizRolodex.com
______________________________________________________
Words of Wisdom
"The Internet is like alcohol in some
sense. It accentuates what you would do anyway. If you want to be a loner, you
can be more alone. If you want to connect, it makes it easier to connect."
- Esther Dyson
"You can't just ask customers what they want and then try to give
that to them. By the time you get it built, they'll want something
new."
- Steve Jobs
"We've heard that a million monkeys at a million keyboards could produce the
complete works of Shakespeare; now, thanks to the Internet, we know that is not
true."
- Robert Wilensky
______________________________________________________
You may distribute this article freely, print it, sell it, or include it as part of a package as long as it is intact, unchanged and delivered in the original format with acknowledgement to Executive Blueprints Inc.
About the Author:
John Mehrmann is a freelance writer and President of
Executive Blueprints Inc., an organization devoted to improving
business practices and developing human capital.
www.ExecutiveBlueprints.com provides resource materials for
trainers, sample Case Studies, educational articles and references
to local affiliates for consulting and executive coaching.
http://www.InstituteforAdvancedLeadership.com
provides self-paced tutorials for personal development and tools for
trainers. Presentation materials, reference guides and exercises are
available for continuous development.
Send an Email to
ExecBlue@aol.com with the Subject: Subscribe, and you will be
automatically added to our permission based mailing list.
This email was sent by Executive Blueprints, Inc, Aliso Viejo,
California. You are subscribed to a permission-based list. To
change preferences or to unsubscribe, simply send an email to
Unsubscribe@executiveblueprints.com
©
Copyright 2006-2007 Executive Blueprints, Inc