Friday, June 27, 2014

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)


4 comments:

  1. yeay..mmg dlm perancangan nih..tq Yana

    ReplyDelete
    Replies
    1. heheh...dah lama study.. yang nih yer yang paling senang faham
      and paling mudah la bg i..
      sesetengah tu tak support kita punya templet.. hehe
      ok selamat mencuba...

      Delete
  2. itu yang lama. utk blog baru dah tak sama

    ReplyDelete
    Replies
    1. heheh..:) mungkin la kot.
      kira nasib baik la ni, pemplet yana yg lama.. so still leh pakai..

      Delete

Terima kasih yer coz sudi komen-komen kat sini, semua komen2 anda sangatlah dihargai.. hehhe :P

Maaf, if yana terlepas pandang komen-komen anda, sesungguhnya daku hanyalah insan biasa.. (hehhe ayat) salam kenalan U all's...

Related Posts Plugin for WordPress, Blogger...

NUFFNANG

Close