//Mr. Ariff Nizamuddin Vs Mrs. Amira Najwa
The Intro
Entries About Linkies Stuff



Hi, Assalamualaikum. Saya sayang "gulahati" saya, saya perlukan "gulahati" saya, walaupun kekadang buat perangai jugak. mihmihmih :love:


My Tagboard
  • URL blog only
  • Click Go once only
  • Don't ever you want to SPAM
    • )!-- BEGIN CBOX - www.cbox.ws - v001 -->


    Credits!
    Template: Us Us
    Inspired By: arezayreen
    Basecode By: Mrs.Ayreen Mrs.Ayreen
    Others: ♥ ♥ ♥

    Older Post | Newer Post
    Tutorial 51 : Drop- Down Tab Menu
    Tuesday, December 13, 2011 • Permalink • Add comment {0}
    Drop-Down menu ni memudahkan reader korang untuk tahu isi kandungan dalam blog korang. Hanya click-click jer dah boleh open. Sebelum try, better korang download full template terlebih dahulu sbg back-up kang jahanam blog korang kang.
    Jom try buat!
    1. Sign in blogger > Design > Edit HTML
    2. Cari code ini, nak mudah tekan Ctrl F, masukkan code dalam kotak find dan enter!

    ]]></b:skin>
    3. Dah jumpa? copy code dibawah dan paste sebelum/di atas code yang dicari tadi.



            #jsddm {
    margin: 0;
    padding: 15px;
    z-index:1000000000;
    position:relative;
    }

    #jsddm li {
    float: left;
    list-style: none;
    font: 12px Tahoma, Arial;
    }

    #jsddm li a {
    display: block;
    white-space: nowrap;
    margin:1px 3px;
    border: 1px solid #AAAAAA;
    background: #cccccc;
    background: -webkit-gradient(linear, left top, left bottom, from(#ebebeb), to(#cccccc));
    background: -moz-linear-gradient(top, #ebebeb, #cccccc);
    padding: 5px 10px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    text-shadow: #ffffff 0 1px 0;
    color: #363636;
    font-size: 15px;
    font-family: Helvetica, Arial, Sans-Serif;
    text-decoration: none;
    vertical-align: middle;
    }

    #jsddm li a:hover {
    background: #C8C8C8;
    }

    #jsddm li ul {
    margin: 0;
    padding: 0;
    position: absolute;
    visibility: hidden;
    border-top: 1px solid white;
    }

    #jsddm li ul li {
    float: none;
    display: inline;
    }

    #jsddm li ul li a {
    width: auto;
    background: #CAE8FA;
    }

    #jsddm li ul li a:hover {
    background: #A3CEE5;
    }


           


    4. Dah selesai cara di atas, cari code ini pula, nak mudah tekan Ctrl F, masukkan code dalam kotak find dan enter!

    </head>

    5. Lepas itu, copy code di bawah dan paste sebelum/di atas code </head>

    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js' type='text/javascript'/>
      <script type='text/javascript'>
      //<![CDATA[

    var timeout    = 500;
      var closetimer = 0;
      var ddmenuitem = 0;

    function jsddm_open()
      {  jsddm_canceltimer();
      jsddm_close();
      ddmenuitem = $(this).find('ul').css('visibility', 'visible');}

    function jsddm_close()
      {  if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');}

    function jsddm_timer()
      {  closetimer = window.setTimeout(jsddm_close, timeout);}

    function jsddm_canceltimer()
      {  if(closetimer)
      {  window.clearTimeout(closetimer);
      closetimer = null;}}

    $(document).ready(function()
      {  $('#jsddm > li').bind('mouseover', jsddm_open)
      $('#jsddm > li').bind('mouseout',  jsddm_timer)});

    document.onclick = jsddm_close;
      //]]>
      </script>
    6. Dan bolehlah SAVE.


    Opppss jangan lari, belum habis lagi ni. Step di atas adalah cara settingnya. So Tab menu kena ikut cara ini pulak.

    1. Sign in Blogger > Design > Add Gadget > Html / JavaScript
    2. Sila copy dan paste ke dalam ruangan HTML/ Java Script

    <ul id="jsddm">
      <li><a href="#">Home</a>
      <li><a href="#">Menu 1</a>
      <ul>
      <li><a href="#">Drop 1-1</a></li>
      <li><a href="#">Drop 1-2</a></li>
      <li><a href="#">Drop 1-3</a></li>
      </ul>
      </li>

     <li><a href="#">Menu 2</a>
      <ul>
      <li><a href="#">Drop 2-1</a></li>
      <li><a href="#">Drop 2-2</a></li>
      </ul>
      </li>

     <li><a href="#">Menu 3</a>
      <ul>
      <li><a href="#">Drop 3-1</a></li>
      <li><a href="#">Drop 3-2</a></li>
      <li><a href="#">Drop 3-3</a></li>
      <li><a href="#">Drop 3-4</a></li>
      </ul>
      </li>

     <li><a href="#">Menu 4</a></li>
      <li><a href="#">Menu 5</a></li>
      <li><a href="#">Menu 6</a></li>
      </li></ul>
    3. Korang cuma tukar :
    #          Link menu korang
    Menu  Tajuk utama
    Drop   Sub Tajuk/ drop menu
    4. Dah tukar semua. SAVE.

    Labels:


    Written by me @ Tuesday, December 13, 2011 | ♥ 0 add comment(s)