Popular Games

CARA MEMBUAT DAFTAR MENU DAN SUB MENU DI WEB BLOG

Di kesempatan ini saya akan share turoturial, CARA MEMBUAT DAFTAR MENU DAN SUB MENU DI WEB BLOG. Biar gax panjang lebar langsung saja ikuti Turoturial di bawah ini:


  1.  Pertama Copy semua Code no 2. di bawah ini:
  2. <style>
    /* -- Menu Horizontal + Sub Menu-- */
    #cat-nav {background:#156994;margin:0 15px;padding:0;height:35px;}
    #cat-nav a { color:#eee; text-decoration:none; text-shadow: #033148 0px 1px 0px;border-right:1px solid #156994;}
    #cat-nav a:hover { color:#fff; }
    #cat-nav li:hover { background:#000; }
    #cat-nav a span { font-family:Verdana, Geneva, sans-serif; font-size:11px; font-style:normal; font-weight:400; color:#fff; text-shadow:none;}
    #cat-nav .nav-description { display:block; }
    #cat-nav a:hover span { color:#fff; }
    #secnav, #secnav ul { position:relative; z-index:100; margin:0; padding:0; list-style:none; line-height:1; background:#0d5e88; }
    #secnav a { font-family:Georgia, "Times New Roman", Times, serif; font-style:italic; font-weight:700; font-size:14px; display:block; z-index:100; padding:0 15px; line-height:35px; text-decoration:none;}
    #secnav li { float:left; width: auto; height:35px;}
    #secnav li ul  { position: absolute; left: -999em; width: 200px; top:35px}
    #secnav li ul li  { height:30px; border-top:1px solid #fff; }
    #secnav li ul li a  { font-family:Verdana, Geneva, sans-serif; width:180px; line-height:30px; padding:0 10px; font-size:11px; font-style:normal; font-weight:400; color:#eee; }
    #secnav li ul ul  { margin: -30px 0 0 180px; }
    #secnav li:hover ul ul, #secnav li:hover ul ul ul, #secnav li.sfhover ul ul, #secnav li.sfhover ul ul ul { left:-999em; }
    #secnav li:hover ul, #secnav li li:hover ul, #secnav li li li:hover ul, #secnav li.sfhover ul, #secnav li li.sfhover ul, #secnav li li li.sfhover ul { left: auto; }
    #secnav li:hover,#secnav li.hover  { position:static; }
    #cat-nav #secnav {width:100%;margin:0 auto;}
    </style>
    <div id='cat-nav'>
    <ul class='fl' id='secnav'>
    <li><a href= href='LINK'>HOME</a></li>
    <li><a href='LINK '>MENU</a>
    <ul id='sub-custom-nav'>
    <li><a href= 'LINK'>SUB.1</a></li>
    <li><a href='LINK'>SUB.2</a></li>
    </ul>
    </li>
    <li><a href='LINK'>MENU2</a>
    <ul id='sub-custom-nav'>
    <li><a href='LINK'>SUB.2</a></li>
    <li><a href='LINK'>SUB.3</a></li>
    </ul>
    </li>
    <li><a href='LINK'>MENU3</a>
    <ul id='sub-custom-nav'>
    <li><a href='LINK'>SUB.1</a></li>
    <li><a href='LINK'>SUB.2</a></li>
    <li><a href='LINK'>SUB.3</a></li>
    </ul>
    </li>
    <li><a href='LINK'>MENU4</a>
    <ul id='sub-custom-nav'>
    <li><a href='LINK'>SUB.1</a></li>
    <li><a href='LINK'>SUB.2</a></li>
    <li><a href='LINK'>SUB.3</a></li>
    <li><a href='LINK'>SUB.4</a></li>
    </ul>
    </li>
    <li><a href='LINK'>MENU5</a>
    <ul id='sub-custom-nav'>
    <li><a href='LINK'>SUB.1</a></li>
    <li><a href='LINK'>SUB.2</a></li>
    <li><a href='LINK'>SUB.3</a></li>
    </ul>
    </li>

    </ul></div>

  3. Silahkan Login ke Blog anda
  4. Cari dan klik Menu Opsi Lainnya => Klik Tata Letak => Klik Tambah Gadget
  5. Kemudian Cari dan klik tanda + (tambah) pada HTML/Javascript, Seperti gambar di bawah:
  6. Paste Code yang sudah anda copy tadi ke dalam konten HTML/Javascript.
  7. Silahkan ganti Tulisan yang berwarna merah dengan link URL anda dan ganti tulisan yang berwarna hijau dengan nama menu yang anda inginkan.
  8. Jika sudah selesai klik save/simpan.
Okehhh sekian dulu yang bisa saya sharee,, Semoga Bermanfaat.......!!!!!!!!!!!!!!!!!!
Share this post :

Post a Comment

 
Support : Creating Website | Johny Template | Mas Template
Copyright © 2011. INFORMASI KEREN - All Rights Reserved
Template Created by Creating Website Published by Mas Template
Proudly powered by Blogger