Sunday 9 March 2008

HORISONTAL GREEN DROPDOWN MENU

This is the first of our article in this blog.so, beforehand we apologize about our bad english because we are learning english and also in writing. we hope that you don't find any dificullties in understanding our english.

ok, on first article we want give you a navigatian menu that you can apply on your blogs, we called this menu with " green dropdown navigation menu". we think that this is a familiar navigation menu. when you're visiting sites and you find navigation menus where you put your mouse over it and bum!!!!!!!other menus fall down.it's interesting, isn't? now you can apply navigation like that on your blog. we will always give you menus like that


ok..on this green dropdown menu. the color of this menus is green. for applying sample of this menu klik here: you will be brougth to other blog.( our blog too...)


let's we start make this menu: here the ways:

#STEP 1



  1. first, download the greenmenu.css here. then open with your web editor. you can use macromedia dreamweaver or ms.frontpage or notepad instead

  2. sign in to blogger with your account

  3. then click “layout” menu

  4. klik menu “edit html”

  5. for safety, download your template first by click "download full template"link, up side of edit html page

  6. copy code that you've downloaded and then paste it precise code below:



Paste your code here!!!




]]></b:skin>

</head>



<BODY>






  1. copy code below and put above </head> code






  2. <script type="text/javascript" src="http://lukman.oke.googlepages.com/dropdowntabs.js">

    </script>


  3. click "save changes" button



#STEP 2



  1. click " page element " menu

  2. click " add page element"

  3. choose the html/javascript menu then click add to blog

  4. copy code below and paste it in the page that emerge. change the links with your own link


  5. <!--kode horiontalgreenddmenu dimulai. link dibawah bisa anda tambah atau kurangi seperlunya-->

    <div id="menuhijauku" class="greenmenu">

    <ul>

    <li id="current"><a href="#">home </a></li>

    <li><a href="#" rel="awal">menu utama</a></li>

    <li><a href="#" rel="menu1">menu utama </a></li>

    <li><a href="#" rel="menu2">menu utama </a></li>

    <li><a href="#">tidakadsubmenu</a></li>

    </ul>

    </div>

    <!--indonesia>isi menu pertama kode awal,englih>>1st dropdown menu content with code:awal-->

    <div id="awal" class="dropmenudiv_e">

    <a href="http://cominfo-english.blogspot.com">kunjungi dong..</a>

    <a href="http://contoh link saya....">sub menu</a>

    <a href="#">sub menu</a>

    <a href="#">sub menu</a>

    <a href="#">sub menu</a>

    <a href="#">sub menu</a>

    </div>

    <!--indonesia>isi menu1, english> "menu1" dropdown menu contents-->

    <div id="menu1" class="dropmenudiv_e">

    <a href="http://freetemplateforyou.blogspot.com">freewebtemplate </a>

    <a href="http://best-song.blogspot.com">free music and lyrics download </a>

    <a href="#">sub menu</a>

    <a href="#">sub menu</a>

    <a href="#">sub menu</a>

    <a href="#">sub menu</a>

    </div>

    <!--isi menu2, "menu2" dropdown menu content-->

    <div id="menu2" class="dropmenudiv_e">

    <a href="#">sub menu</a>

    <a href="#">sub menu</a>

    <a href="#">sub menu</a>

    <a href="#">sub menu</a>

    <a href="#">sub menu</a>

    <a href="#">sub menu</a>

    </div>

    <!--jangan di hapus kode di bawah ini, don't replace code bellow!-->

    <script type="text/javascript">

    //SYNTAX: tabdropdown.init("menu_id", [integer OR "auto"])

    tabdropdown.init("menuhijauku", 3)

    </script>

    <!--KODE HORISONTALGREENDDMENU BERAKHIR DISINI-->


  6. click PUBLISH POST button

  7. FINISH!!!

it's easy, isn't? here the explanation.

#explanation

probably, step 2 number 4 will be difficult for newby (blog's beginner), but don't worry just follow these explanations.



  1. on code:

    <div id="menuhijauku" class="greenmenu">


    text " menuhijauku" are anycode or anyname. the most importan is the name same with code on bottom of this codes"





    <script type="text/javascript">

    //SYNTAX: tabdropdown.init("menu_id", [integer OR "auto"])

    tabdropdown.init("menuhijauku", 3)

    </script>



    however, you can change this name or code with anything; greenmenu, frog, dog, cat,for example. remember...both must be same

    class="greenmenu">. greenmenu is the code to call css script that you've downloaded before.





    ]]></b:skin>


    </head>

    <BODY>


    don't change th code.



  2. Setelah itu perhatikan kode berikut:





    <ul>

    <li id="current"><a href="#">home </a></li>

    <li><a href="#" rel="awal">menu utama</a></li>

    <li><a href="#" rel="menu1">menu utama </a></li>

    <li><a href="#" rel="menu2">menu utama </a></li>

    <li><a href="#">yang initidakadddmenunya</a></li>

    </ul>

    the rel=”….” is the code that must be inserted if you want get effect of dropdown menu, if you wan't show this effect, leave it empty ( don't insert rel='....' code).



  3. inside of rel=".... code, filled by anynaming. most importan it must same with submenu naming that want to be appeared as dropdown. see code bellow:





    <div id="awal" class="dropmenudiv_e">

    <a href="http://cominfo-english.blogspot.com">kunjungi dong..</a>

    <a href="http://contoh link saya....">sub menu</a>

    <a href="#">sub menu</a>

    <a href="#">sub menu</a>

    <a href="#">sub menu</a>

    <a href="#">sub menu</a>

    </div>

    links inside of codes above means will appear as dropdown in tabmenu:
    <li><a href="#" rel="awal">menu utama</a></li>

    you can add as much as link, one hundred it's oke!!! .




i hope that you don't find any trouble when use this menu. also, if you want to change this menu appeareance. just open the code that you downloaded, we have added many notes where codes that can be changed.


happy blogging and g' luck!

Your cOmment"s Here! Hover Your cUrsOr to leave a cOmment.