-->

This Is My Story

Followers

Thursday, August 18, 2011

PostHeaderIcon Tutorial 78 : Drop-Down Tab Menu

11:26 PM | Ditulis Daripade limz | Edit Post

Thank kepada semua yang suka kat tutorial kita.
Ok, kali ni aku nak ajar cara-cara untuk buat drop-down tab menu dalam blog. Macam gambar di bawah :

 

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. 

p/s : Nanti komenlah bila dah cuba k. :)
Labels: Tutorial

0 Meh Komen Disini !:

Post a Comment

Newer Post Older Post Home
Subscribe to: Post Comments (Atom)

Awak Orang Yang Ke

hit counter
Stranger Check This Blog

♥Myself♥



I know as Limz . I blow my candles on 3rd September . I born on the year 1997 . I'm just a simple person always smile . I'm taken by Someone . Wanna know me more just add me on facebook :) . Anything Shoutbox me k ? Maybe if you follow me , I'll follow you back :)

Labels

Tutorial (96)

Read This

hello bloggiehello , thanks melawat blog saya :) jika awak suka blog saya , tlg like okay . tiada paksaan pun :) papew hal bg tau kt shoutbox atau pun fb lim yea ! awak ialah - 4 budak comel yg sedang melawat blog saya terima kasih sbb melawat yea , jgn segan utk dtg lagi tau ! baiboi

Blog Archive

  • ► 2013 (1)
    • ► March (1)
  • ▼ 2011 (144)
    • ▼ August (97)
      • Tutorial 95 : Ambil Url Link Gambar (Photobucket)
      • Tutorial 94 : Jquery Tab Menu.
      • Tutorial 93 : Cute Profile.
      • Tutorial 92 : Icon Comel di tepi Komen.
      • Tutorial 91 : Pasang Top commentator.
      • Tutorial 90 : Tukar Blog Archive Kepada Calendar.
      • Tutorial 89 : Gambar di Footer Blog.
      • Tutorial 88 : Delete / Buang Subscribe Atom.
      • Tutorial 87 : Buang Underline di bawah Link.
      • Tutorial 86 : Animated Link di Hover
      • Tutorial 85 : Fieldset Box
      • Tutorial 84 : Meningkatkan SEO Blog.
      • Tutorial 83 : Simbol Comel-comel
      • Tutorial 82 : Fireworks / Bunga Api di Blog
      • Tutorial 81 : Snow Ball Effect
      • Tutorial 80 : Ucapan "Good Bye" kepada Reader.
      • Tutorial 79 : Pasang Button Twitter di Entry.
      • Tutorial 78 : Drop-Down Tab Menu
      • Tutorial 77 : Text Berkelip-Kelip
      • Tutorial 76 : Ucapan Sebelum Komen.
      • Tidak Perlu Tahu .
      • Tutorial 75 : New Tab Menu Semasa Click Link.
      • Tutorial 74 : Delete Navigation Bar
      • Tutorial 73 : Follow Guna Gambar.
      • Tutorial 72 : Entry/Posting Berpassword
      • Tutorial 71 : Double Dashed bila diHover
      • Tutorial 70 : Membuat Read More
      • Tutorial 69 : Letak Iklan Nuffnang Terapung
      • Tutorial 68 : Letak Iklan Nuffnang dalam Post Entry.
      • Tutorial 67 : Letak Iklan Nuffnang Atas Header.
      • Tutorial 66 : Cara Pasang Button Share Facebook.
      • Tutorial 65 : Cara untuk Link kan Tab Menu
      • Tutorial 64 : Scroll Box untuk Blog List
      • Tutorial 63 : Button Follower dan Dashboard
      • Tutorial 62 : Cari Blog ID
      • Tutorial 61 : Marquee Codes
      • Tutorial 60 : Scroll Box untuk Blog Archive
      • Tutorial 59 : Cara Ubah Warna Highlight
      • Tutorial 58 : Link Within
      • Tutorial 57 : Membuat Double Underline
      • Tutorial 56 : Shadow di Tajuk Entry dan Sidebar
      • Tutotial 55 : Gambar Membulat Ketika Disentuh
      • Tutorial 54 : Link Membesar Semasa Disentuh.
      • Tutorial 53 : Bubbles Cursors
      • Tutorial 52 : Cara untuk Print Screen
      • Tutorial 51 : Membuat Search Engine pada Blog
      • Tutorial 50 : Membuat Bloglist di Blog
      • Tutorial 49 : Burung Twitter Terbang Melayang
      • Tutorial 48 : Cursor Bergerak dengan Perkataan
      • Tutorial 47 : Cursor Comel-comel
      • Tutorial 46 : Sparkling Cursor
      • Tutorial 45 : Automatic Recent Post dan Previous P...
      • Tutorial 44 : Membuat Floating Button
      • Tutorial 43 : Membuat Wish List
      • Tutorial 42 : Membuat Header Transparent
      • Tutorial 41 : Menukar Perkataan Older, Newer Pages...
      • Tutorial 40 : Senarai Tutorial Adobe Photoshop yan...
      • Tutorial 39 : Membuang Border pada header
      • Tutorial 38 : Membuat Divider di Sidebar
      • Tutorial 37 : Jom pasang Energy Saving Mode pada Blog
      • Tutorial 36 : Membuat [ Reply ] pada kotak komen +...
      • Tutorial 35 : Meletakkan background pada blog
      • Tutorial 34 : Pop up window when open blog
      • Tutorial 33 : Background berbeza untuk setiap page
      • Tutorial 32 : Autohide Shoutbox plus Float
      • Tutorial 31 : Membuat Arrow Back to Top
      • Tutorial 30 : Note di Bawah Setiap Post / Entry
      • Tutorial 29 : Mencantikkan Comment Box
      • Tutorial 28 : Mengambil Code Warna
      • Tutorial 27 : Membuat Favicon Sendiri
      • Tutorial 26 : Meletakkan Divider di setiap post entry
      • Tutorial 25 : Membuat blog bersalji
      • Tutorial 24 : Meletak Disable highlight Text
      • Tutorial 23 : Meletak Disable Right Clik NON pop u...
      • Tutorial 22 : Membuat background di sidebar
      • Tutorial 22 : Membuat background di sidebar
      • Tutorial 21 : Menambah background dan border di ta...
      • Tutorial 20 : Membuat Copyright blog
      • Tutorial 19 : Membuat Tab Menu Cantik ( dekorasi s...
      • Tutorial 18 : Membuat icon di sebelah Title post/e...
      • Tutorial 17 : Membuat icon di sebelah Bloglist
      • Tutorial 16 : Mengambil URL Glitter Graphics
      • Tutorial 15 : Membuat Title Bar Animated
      • Tutorial 14 : Cara Membuat Kotak Blockquote
      • Tutorial 13 : Cara Meringankan BLOG
      • Tutorial 12 : Memasang butang LIKE untuk Facebook
      • Tutorial 11 : Membuat Tab Menu / Blog Tab
      • Tutorial 10 : Membuat Link Rainbow/ Pelangi
      • Tutorial 9 : Membuat Scroll Bar
      • Tutorial 8 : Membuat Menu Bar Link
      • Tutorial 7 : Membuat Button di Blog
      • Tutorial 6 : Cara Membuat Title Blog Bergerak
      • Tutorial 5 : Cara Membuat Floating Up & Home Button
      • Tutorial 4 : Meletak Disable Right Click Pop Up Mesej
      • Tutorial 3 : Membuat Pages Pada BLOG
      • Tutorial 2:Membuat Welcome Blog
      • Tutorial 1:Timbang berat blog.
    • ► May (1)
    • ► April (14)
    • ► March (32)

Recent Post

get this widget here

Don' t Copy Oke !

Don\
Limz. Powered by Blogger.

Shoutbox






Blogger Template designed by Limz