4 Totorial untuk diri sendiri : macam mana nak buat drop down menu pada header

PERHATIAN: segala bentuk totorial dalam nih just untuk pemplet aku sahaja dan sedang digunapakai .. untuk totorial baru google sendiri.. hehhe :p


kalo ada banyak menu page
korang leh guna cara ni untuk kurangkan menu2 yang banyak kat header tu
macam ni..namanya dropdown menu
ni kira susun atur la jugak kan..
susun ikut kategori kekdahnya...

contoh:-






LANGKAH 1


1. Masuk ke akuan blogger macam biasa
2. Pilih Template > Edit HTML 

Ayat2 pelik macam nih akan kuar and kena 

3. Cari code </head>, Guna Ctrl + F untuk search

copy code di bawah, and pastekan di atas code </head>

<style>

#coolMenu,

#coolMenu ul {

    list-style: none;

}

#coolMenu {

width:980px;

    float: left;

}

#coolMenu > li {

    float:left;

}

#coolMenu li a {

display: block;

    padding: 5px 10px 5px 10px;

    text-decoration: none;

}

#coolMenu ul {

    position: absolute;

    display: none;

        z-index: 999;

}

#coolMenu ul li a {

    width: 30px;

 float:left;

padding: 5px 10px 5px 10px;

}

#coolMenu li:hover ul { 

}

/* Main menu

------------------------------------------*/

#coolMenu {

    font-family: Arial;

    font-size: 12px;

    background: #2f8be8;

margin:0 auto;padding:0 auto;

background: #02b0cf;

padding-left:3px;

border-bottom:1px solid #ccc;border-top:2px solid #ccc;

}

#coolMenu > li > a {

    color: #fff;

    font-weight: bold;

padding:8px 10px 8px 10px;

}

#coolMenu > li:hover > a {

    background: #f09d28;

    color: #000;

    -webkit-transition: all .2s ease-in-out;

    -moz-transition: all .2s ease-in-out;

    -ms-transition: all .2s ease-in-out;

    -o-transition: all .2s ease-in-out;

    transition: all .2s ease-in-out;

}

/* Submenu

------------------------------------------*/

#coolMenu ul {

    background: #f09d28;

padding:3px 5px 3px 5px;

}

#coolMenu ul li a {

    color: #000;

width:100px;

}

#coolMenu ul li:hover a {

    background: #ffc97c;

    -webkit-transition: all .2s ease-in-out;

    -moz-transition: all .2s ease-in-out;

    -ms-transition: all .2s ease-in-out;

    -o-transition: all .2s ease-in-out;

    transition: all .2s ease-in-out;

}

</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>

<script>

$(function(){

    $('#coolMenu').find('> li').hover(function(){

        $(this).find('ul')

        .removeClass('noJS')

        .stop(true, true).slideToggle('fast');

    });

});

</script>

---------------------------------------------------------------------------------------------------

code Biru (Code lebar menu)

code Merah (warna background menu)

code Ungu (warna background sub Menu)

boleh gantikan code-code tadi  kat sini (cikgu kacamata)

Simpan Templet

-------------------------------------------------------------------------------

LANGKAH 2

Pergi kat layourt

Add Gadget

HTML/Java Script

paste code dibawah ni

--------------------------------------------------------------------------------

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Blazer Blog (Header)' type='Header'/>
</b:section>
</div><!-- end header-wrapper -->

<ul id="coolMenu">
    <li><a href="#">Tajuk</a></li>
    <li><a href="#"></a></li>
    <li>
    <a href="#">Tajuk</a>
    <ul class="noJS">
        <li><a href="#">Tajuk</a></li>
        <li><a href="#">Tajuk</a></li>
        <li><a href="#">Tajuk</a></li>
    </ul>
</li>
<li>
    <a href="#">Service</a>
    <ul class="noJS">
        <li><a href="#">Tajuk</a></li>
        <li><a href="#">Tajuk</a></li>
        <li><a href="#">Tajuk</a></li>
<li><a href="#">Tajuk</a></li>

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

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

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

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

    </ul>
</li>
    <li><a href="#">Tajuk</a></li>
  <li>
    <a href="#"></a>
    <ul class="noJS">
        <li><a href="#"></a></li>
        <li><a href="#"></a></li>

    </ul>
</li>
</ul>

-----------------------------------------------------------------------------------

LANGKAH 3

Korang tukar tanda # tu and gantikan dengan link blog yang ingan dipaut..

tukar jugak Tajuk and masukan tajuk korang..

simpan and cuba jadi tak

ok tu jew.. 

selamat men'try' hehe

kalo korang tak faham cara aku, leh study kat sini membuat-buat)