Dropdown menus with JavaScript
For my friend who likes to knick-knacks blog, there is good news nih. At this opportunity I will discuss about how to create dropdown menus using JavaScript.


How was the try yet? if not, try the discussion deh let a little fun! Well if so, how the response, not exciting? when my friend exclaimed please read this article until complete (rich bullfighting aja pake what exciting events kagak), well, if if not exciting, yes another topic search mending let the spirit of reading.

Okay let me not digress, we went straight to the topic. To make the menu as above, we need to put the JavaScript code and CSS stylesheet to the template of our blog, but because of the bloggers there are two templates that use classic templates and new template, then of course in making the dropdown menu is way different. Therefore, the discussion would be me for two also are for classic templates and for the new template. But because the discussion is too long, so this time I will discuss for a new template only, and for classic templates I will discuss in subsequent posts.

To make it, please follow the steps below:

The first step is to create two buttons for the menu background of writing, should the color or style to differentiate it, is intended for the main menu with sub menu will be visible differences. as an example see figure below button:

The second step is to store the image file on the hosting button to save the picture, could the bloggers themselves or with other hosting. To be more focused, I take the example of using other hosting that is www.photobucket.com.

I take the example of the two buttons I had already uploaded and have the URL address is as follows:
http://i162.photobucket.com/albums/t253/rohman24/tombol_03.gif
http://i162.photobucket.com/albums/t253/rohman24/tombol_06.gif

The third step is to enter the JavaScript code and CSS stylesheet to your blog template code, please follow these steps:

1. Sign in at blogger.com with your id
2. Click the Layout menu
3. Click the Edit HTML
4. Click Download Full Template and save the data. This is a precaution in case of an error in editing the template code
5. Click the little box next to Expand Widget Templates to check. Once again do not forget to click the little box next to Expand Widget Templates
6. Wait a while until the process is complete
7. Save the following code


under the code

8. Enter the following code in the CSS stylesheet, or to more easily please find this code

and save the code on it berkut



9. Click the SAVE TEMPLATE
A little steam, the above code certainly is not one hundred percent absolutely have to be so, but can be adjusted to the conditions sobat.Contoh blog: width: 90%; -> number "90" means the width of the image that will appear at 90% , this value can be changed and adjusted by your blog, for example in the change to "80 " or whatever.
10. Click the Page Elements
11. Click Add a Page Element
12. Click ADD TO BLOG in HTML / JavaScript
13. Enter the following code:

14. Click the Save Changes button
15. Click on the new element in the make, hold and then move on somewhere like (in drag & drop)
16. Click the SAVE button
17. Completed

Description: the code above there is a hash mark (#), the sign should be replaced with a URL that would in pairs.


If viewed from this menu reactions that are open and push the content underneath, then this menu is only suitable in the store on the sidebar and not suitable if stored in the header.

Hopefully can be understood. Good luck!

  • Followers

    Counter

    free counters
  • Site Map