Custom website bookmarks toolbar tutorial
The tutorial shown here will give you step by step instructions for creating your own website bookmarks toolbar. Follow the steps outlined below and then start using the toolbar to navigate between your most used Internet websites and I guarantee you will see a huge increase in your overall Internet productivity.
Make sure you pay attention to the last few steps of this website bookmarks toolbar tutorial that explain a few ways to back up and save your bookmarks toolbar in the event of unexpected emergencies. One important thing you should remember to do when finished making your toolbar is to export your bookmarks to a file and email that file to yourself so you can access it if you are on a computer other than your own.
Picture of my completed website bookmarks toolbar showing in my web browser
This first picture is a screen shot that shows what my completed website bookmarks toolbar looks like when showing in my web browser. The folders within the toolbar are home to about 200 of my most used websites which are categorized and tucked away neatly inside of each folder.
Surprisingly, it only took a short amount of time to become familiar with my toolbar and now I can even open up many of the sites inside of it without even having to look at the mouse pointer. You can create any type of folder and populate it with any site that you choose.
Here's what the folder abbreviations stand for on my website bookmarks toolbar:
- Sites - My websites, blogs, and online properties
- Mail - All of my email accounts
- SiteMgr - Website control panels, blogging interfaces, and hosting controls
- KW - Keyword tools I use
- PIC - Picture tools, graphic design tools and my online photo galleries
- REV - Revenue streams
- STATS - Online statistics sites, search trends and data reporting websites
- PND - Pending folder (aka the closet or the garage)
- MEDIA - Video sites, music sites, radio stations
- TOOLS - Search tools, Internet tools and any other online tool I use
- ARTDIRS - Article directories frequently used.
- BKMK - Social bookmark websites like Digg, Reddit, and DropJack
- Q-A - Question and answer websites I participate in
- SONET - Social networking sites like Twitter plus IM, and social networking tools
Step 1: Open your web browser's bookmarks menu
The first step in creating your own custom website bookmarks toolbar is to start your web browser and open up the bookmarks or favorites menu. For this tutorial I'll be using the FireFox web browser but if you are using something else don't worry because just about everything will remain the same.
Step 2: Find and right-hand click on Bookmarks Toolbar
Once your bookmarks menu is open you'll want to find and right-hand click on the bookmarks toolbar tab. If the folders inside of your bookmarks menu are different from what I have in mine don't worry, all you need is the bookmarks toolbar folder to complete this tutorial.
In the event that you already have some bookmarks sitting inside the folder by default just delete them unless you use them.
Step 3: Select and create a new folder
Select the option for creating a new folder and then move on to the next step.
Step 4: Choose a name for your first bookmarks folder
Choose a name for your first website bookmarks folder. The only thing you should be aware of is that the shorter the folder name, the more folders you can fit on your web browsers toolbar. If you work online and visit a ton of websites then you want to keep your folder names as short as possible.
Step 5: Save your first bookmarks folder
The picture above shows what I named the first folder on this tutorial's bookmarks toolbar. Again, feel free to name your website bookmark folders what ever you want, just remember to select the 'add' button to save the folder.
Step 6: Adding your next website bookmarks folder
Adding another folder to your toolbar is easy. Right-hand click anywhere on the screen where it is white and then select the new folder option from the menu. Proceed to the next step now.
Step 7: Choose a name for your second bookmarks folder and save it
Now select a name for your second bookmarks folder and then click on the add button to save it. As you can see in the screen shot above, I chose to call my second folder 'music sites'.
Step 8: Continue adding folders based upon your needs
Keep on adding folders to your bookmarks toolbar until you have enough folders to suit your needs. As I mentioned earlier, the shorter of the folder name, the more folders you will be able to display on the bookmarks toolbar in your web browser.
You can see all of the folders I created for this example. Feel free to name your folders what ever you want.
Step 9: Example of bookmarks folders for this tutorial
Another screen shot example of what the created folders will look like inside of your bookmarks toolbar menu. The reason for this picture is so that you can see the entire contents of my bookmarks/favorites folder. Do you have any junk in your favorites folder that you are not using?
Step 10: Add a separator line for appearance
Your next step is to add separator lines between all the folders in your bookmarks toolbar. My reasons for adding separator lines between folders is simply the appearance. I've found that if I don't take the time to create dividers between folders, the folder names seem to become one giant name when showing in my web browser.
Step 11: Example of what a separator line looks like
Step 12: Use copy & paste to create multiple separator lines
This step is for creating multiple separator lines quickly. Once you have your first separator line in your folder right-hand click on it and select, 'copy'. Then click anywhere on the white part of your screen and press CTRL + V to paste the separator line you just copied.
Continue pasting separator lines until you have enough to place in between all your folders. Even though it is not mandatory, I like to add two or three separator lines in between each of my folders that located in my bookmarks toolbar. See the picture above for more information.
Step 13: Example of what separator lines will look like when pasted
Step 14: Drag each separator line into place between each bookmarks folder
The easiest way to put the separators between your bookmarks folders is to simply drag them with your mouse. Click on a separator line and without letting go of the mouse button and drag them into position.
Step 15: Picture of completed bookmarks toolbar for this tutorial
Here is a screen shot that shows what your bookmarks toolbar folder should look like after you are finished adding dividers or separators.
Step 16: Making your bookmarks toolbar appear in your web browser
Follow the steps shown in the screen shot above to make your website bookmarks toolbar show on your web browser. Open up the 'view' menu that sits at the top of your web browser inside the navigation toolbar. Once opened, choose the 'toolbars' option and then the 'bookmarks toolbar'.
Step 17: Example of what the completed bookmarks toolbar looks like in web browser
Step 18: How to add website bookmarks to your toolbar
Now it's time to add your favorite website bookmarks to the folders in your toolbar. Start by visiting a website you want to bookmark. As you can see in the picture, I am adding a few search engines to the search tools folder on the toolbar.
When you are on a site that you want to add to your bookmarks toolbar, grab and drag the tab (as seen in picture) and drop it directly onto your desired folder. Alternatively, you can right-hand click on a tab and select the 'bookmark this' option. Just make sure you choose the correct folder location when you are prompted to do so.
Step 19: Picture of an opened bookmarks toolbar folder showing websites
If you want to get an idea of how powerful this website bookmarks toolbar really is, check out the picture above that shows one of the folders on the toolbar expanded. You can put as many sites in a folder as you want but if you focus on only adding the ones you use the most, you'll be just fine.
Step 20: Picture of what my completed bookmarks toolbar looks like in web browser
Here's the same picture you saw at the beginning of this tutorial. Again the picture shows what my bookmarks toolbar looks like in my web browser. I created this picture to give you ideas of what to call and what sites to put in your custom website bookmarks toolbar. The folder I have expanded is the picture tools folder and inside of their you can see various online picture tools, photo galleries, and color tools that I use.
Step 21: Saving your bookmarks toolbar folder (IMPORTANT)
This step is so important so make sure you take the 30 seconds it takes to complete it. Save your bookmarks toolbar folder so that you have a backup in case of an emergency in the future.
Start off by opening your bookmarks organizer that is located inside of the 'bookmarks' menu at the top of your web browser. Select 'organize bookmarks' to open the bookmarks organizer and select 'Export HTML'. You will be prompted to choose a download location next. Your bookmarks will be saved under the name, 'bookmarks.html' but you can rename the file to what ever you want.
If you are taking the time to create a bookmarks toolbar for yourself then please take a little extra time to email your exported bookmarks.html file to yourself so that you have a copy for the future. In the email subject line, enter in bookmarks back up or something similar so that you can search for it in the future.
Step 22: Importing your saved bookmarks toolbar on another computer
When you need to add your bookmarks toolbar on another computer just start by opening up the computer's web browser. Next, you will need to open up the 'bookmarks' menu again and then select the 'Import HTML' option. A window will open asking you to choose where the file is located at. Find and select your bookmarks.html file and you are finished!