Saturday, August 11, 2012

How to Create a Custom Toolbar for Website

A customized toolbar of your blog or website may increase visitors loyalty. If they found your toolbar useful they can use it in browser. And this is also important for your site's ranking. There may be hundred ways to build a toolbar. Some of them are free or some may be premium. 

For creating toolbar, my personal choice is Alexa. Why? 
  • Because it's free and easy to use. 
  • You can easily monitor the usage statistics. 
  • And most importantly, alexa is a ranking site. It measures websites ranking from 1 to the last. 
  • Alexa considers the site most that has its toolbar and widget in the page. 
Let's build a toolbar now. 

1.  First go to the Alexa and register an account. It takes 2 or 3 minutes. If you already have 
     an account then proceed to the next step. 
2.  Now go to the toolbar creator page.
3.  A pop up window will ask you to enter the toolbar name. Type the name or skip it. 
     You can write a name later.


4.  Now look at the image below. Here you can edit toolbar name and choose a logo. 


5.  Have a look at the Add buttons that drive traffic to your website. There are 4 buttons.  
     Only add the buttons that is necessary for you. Because you can't add 
     all the buttons due to the space limitations. 
6.  Now move to the Add social networking buttons section. Add only the first 2 buttons. 
     Show tweets button is not necessary. Click Next. 
7.  Add buttons for things that your users do everyday. This is the most useful part for 
     the users. I recommend you to add the Personal Twitter and Gmail button. Click Next.
8.  This step let you add an icon for the toolbar. You can either choose an icon made earlier 
     or use the default. I prefer to use the custom image. Click Next.



You're almost done. Publish it to make the toolbar available for download. But how can your visitors will get it? 

Go to the dashboard and click on your toolbar. Then you'll find different shapes and colors. Choose the color and shape as your choice from step 1 and 2. Then add a HTML gadget in your blog by the html code from the step 3. Place the gadget in a part of the page where the visitor can easily find it.


Currently the alexa toolbar works with Chrome, Firefox and IE. Hope it will support more browsers in the future. 

Have a look at the sample toolbar below: 

Click to enlarge
If you have any query regarding toolbar creator then leave a comment. 


Stay with Marks PC Solution to get more interesting IT topics!