Hi bloggy readers,
Anyway, in my other post about
Making a Blogger Menu to your blog,
you can see that the blogger menu in that article can only show you 1 link per 1 navigation. So i decide to write this article.
Now, we will be able to make a dropdown menu that will drop many links when being pointed by the mouse cursor. By moving the mouse cursor inside the area of one of the menus, it will drop you another dropdown submenu along with the links, just like being shown in the picture below.
First method ofAdding Drop-Down Menu
1. Login to Blogger Account
Now to begin this tutorial, let's go to Blogger.com and then Log in to your Blogger account using your own username along with the password.
2. Go to Layout and Edit HTML
In the Dashboard page, go to Layout/Design of your blog, and in the Page Element, press the sub-tab Edit HTML to begin editing the whole code of your template.
3. Find the code
By pressing the Ctrl + F buttons at the same time, you will enter the find mode. In this mode, you will be able to find any specific code in the template. Now find the code below:
Anyway, before doing any kind of customization, i strongly suggest you to save your current template just in case you did something wrong with the template. Now click at the link Download Full Template.
4. Copy the code
Now copy the code of dropdown menu, and then paste it over ]]></b:skin>
5. Find the code
Now enter again the search mode by pressing Ctrl + F at the same time. And then go to the bottom and find this header section on the bottom position of the HTML code:
6. Replace the code
And then, replace the whole code on number 5 by using the code below:
7. Save the current change and go to Page Element
Now press the Save Template button to save the current changes! And after that, switch back the sub-tab to Page element to begin embedding the HTML code of Drop-Down Menu.
8. Find the suitable area for the Drop-Down Menu
In the Page Element, now your task is to find the best position of the dropdown menu. I suggest you to use the top position of the layout because that is the suitable place for this widget.
9. Press the Add a Gadget link
10. Save the change
Now save the template by pressing the Save button and it's now done. Now you can see the result directly to your blog.
Troubleshooting: What if the Dropdown Menu i've already added to my blog doesn't have a good look on certain browsers?
After finished adding the dropdown menu into your blog, you might be baffled with why the dropdown menu you've added doesn't look good on other browser. Okay, this is the solution. By repeating the step from number 1 to 7 in the first method, the second method below will show you how to put the HTML codes for the dropdown menu when we still in the Edit HTML page, without having to enter the Page Element to Add a Gadget.
2nd method: Adding the Drop-Down Menu through the Edit HTML page
1. Remove the Dropdown Menu from the Page Element
In order to apply the second method, you only need to delete the HTML code you've already added (number 9 on the first method). Just go to Page Element and delete the existing widget you've just added with the dropdown menu code.
2. Go to Edit HTML
And then switch back the sub-tab to the Edit HTML again.
3. Find the code
By pressing the Ctrl + F again and find the code below
4. Replace the code
Now block the whole codes on number 3 and then replace it with the code below:
5. Save the change
Save the template and now you can see the result.
Configuration of the Dropdown Menu
After finished adding this dropdown menu to your blog, now i want to show you how to customize the dropdown menu you've already added.
Inside the code on number 9 of the first method or number 4 of the second method, there are some specific codes i've already marked for you. Let's start with the code Link URL address and Sub-Menu I.
As you can see in that code, the code Link URL address code must be changed with the URL address of your own blog or other websites. For example, try to change the code Link URL address with the code http://www.whatmakesblog.com.
And then for the code Sub-Menu I is the code of what title do you want to display on the dropdown menu. This Sub-Menu I code must be replaced with your preferred title. For example, try to change the code Sub-Menu I with the code "Blogger Team" or any title you really want.
How to differ the code for the Menu Title with the code of Sub-Menu Title?
Anyway, there is something i must tell you to finish this tutorial. You must also know how to differ the part for the Main Title and the part of the Sub-Menu Title. Menu Title is the anchor part from the dropdown menu, it's the part of the menu that will be shown without being pointed by mouse cursor. On the other side, The Sub-Menu Title is the part from the menu that will be shown when our mouse cursor is moved to the area of the menu. By doing so, the dropdown menu contains many links will be shown. Okay, now pay attention to this code:
and also the code:
If you can see those codes in the HTML code of dropdown menu, the code which begins with the tag codes <dt> <dt> indicates the main title or the main menu, not the sub-menu. And then for the tag code which begins with <dd> </dd> is the Sub-Menu title.
Okay, that's it for now. Hope you like this tutorial and consider to share it to Digg.com and other Social Media around the web. If you have something to ask to me, just type your question on the comment section below and i'll try my best to give you the best solution for your problem.
Good luck bloggers!