PANDUAN,TIPS,TRIK DAN CARA MEMBUAT BLOG DENGAN MUDAH SERTA GRATIS

  • RSS
  • Delicious
  • Digg
  • Facebook
  • Twitter
  • Linkedin
  • Youtube

You need to upgrade your Flash Player to version 10 or newer.

MULTI MENU DROP DOWN

Karena terlalu banyak link yang mau kita pasang maka dengan sedikit usaha  anda bisa membuat  Multi Level Drop-Down Menu Dengan 'CSS dan JQuery' untuk web dari Dinamic Drive ( seperti nampak pada gambar), sebagaimana kebanyakan web atau blog yang telah banyak memasang menu multi .

Langkah pembuatan 'menu multi'

1. masuk blogger dasbor anda
2. Klik rancangan >> Edit HTML
3. Copy pastekan kode script JQuery dibawah ini sebelum (diatas) kode  </head>

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

4.   catatan: bagi sobat yang sudah pernah menambahkan atau pada templatenya sudah terdapat scrip Jquery maka langkah kedua abaikan saja
5. Tambahkan juga script berikut setelah script JQuery tadi

<script src='http://sites.google.com/site/kipluxer/js-qminutes/menu.js' type='text/javascript'/>

6. Selanjutnya tambahkan kode CSS berikut diatas  ]]></b:skin>:

div#menu {
background: transparent url(http://sites.google.com/site/kipluxer/image/menu_m.png) repeat-x scroll 0 0;
position: absolute;
top: 0;
left: 0;
color: #646464;
font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 150%;
}

ul.menu {
clear: both;
float: none;
cursor: pointer;
z-index: 1;
position: relative;
}

div#menu ul {
margin: 0px;
padding: 0px;
list-style: none;
float: left;
z-index: 2;
position: relative;
}

div#menu li {
position: relative;
margin: 0px;
padding: 0px;
display: block;
overflow: visible;
float: left;
height: 30px;
z-index: 3;
}
/* menu::level1 */
div#menu li a {
height: 30px;
display: block;
float: left;
line-height: 30px;
text-decoration: none;
color: #646464;
overflow: hidden;
z-index: 4;
position: relative;
}

div#menu li span {
color: #646464;
display: block;
padding: 0 15px;
background-repeat: no-repeat;
background-position: 95% 0px;
z-index: 6;
position: relative;
}

div#menu li span.bg {
display: block;
background: transparent url('http://sites.google.com/site/kipluxer/image/menu_level1_item.png') repeat-x scroll 0pt 100%;
padding: 0;
height: 30px;
z-index: 5;
position: relative;
float: left;
}

div#menu li.current {
font-weight: bold;
}

div#menu li.current ul {
font-weight: normal;
}

/* menu::level2 */
div#menu ul.menu ul {
padding: 0px 0px 10px;
background: transparent url('http://sites.google.com/site/kipluxer/image/menu_dropdown_bg.png') no-repeat scroll 0pt 100%;
_background: transparent url('http://sites.google.com/site/kipluxer/image/menu_dropdown_bg.gif') no-repeat scroll 0pt 100%;
left: -999em;
width: 165px;
position: absolute;
top: 30px;
}

div#menu li:hover ul, div#menu li.sfhover ul {
left: 0px;
z-index: 100;
visibility: visible;
}

div#menu li li {
width: 100%;
text-indent: 0px;
float: none;
height: auto;
}

div#menu li li a, div#menu li li span.separator {
margin: 0px 1px;
padding: 0px;
background: url('http://sites.google.com/site/kipluxer/image/menu_level2_item.gif') no-repeat scroll 100% bottom;
height: auto;
float: none;
display: block;
line-height: 25px;
width: 163px;
}

div#menu li li a.parent {
background: url('http://sites.google.com/site/kipluxer/image/menu_level2_item_parent.gif') no-repeat scroll 100% bottom;
}

/* menu::level3 */
div#menu li ul ul {
margin: -31px 0 0 164px;
}

div#menu li:hover ul ul, div#menu li.sfhover ul ul {
border-top: 1px solid #ccc;
}

div#menu li:hover ul ul, div#menu li.sfhover ul ul, div#menu li:hover ul ul ul, div#menu li.sfhover ul ul ul, div#menu li:hover ul ul ul ul, div#menu li.sfhover ul ul ul ul {
left: -999em;
}
div#menu li li:hover ul, div#menu li li.sfhover ul, div#menu li li li:hover ul, div#menu li li li.sfhover ul, div#menu li li li li:hover ul, div#menu li li li li.sfhover ul { left: 0pt; z-index: 100; }

div#menu a:hover {
color: #000;
}
div#menu span:hover {
color: #000;
}
div#menu li ul span:hover {
color: #000000;
}

7. Terakhir tambahkan kode HTML berikut diatas <div id='header-wrapper'>

<div id="menu">
<ul class="menu">
<li><a href="#" class="parent"><span>Home</span></a>
<div><ul>
<li><a href="#" class="parent"><span>Sub Item 1</span></a>
<div><ul>
<li><a href="#" class="parent"><span>Sub Item 1.1</span></a>
<div><ul>
<li><a href="#"><span>Sub Item 1.1.1</span></a></li>
<li><a href="#"><span>Sub Item 1.1.2</span></a></li>
</ul></div>
</li>
<li><a href="#"><span>Sub Item 1.2</span></a></li>
<li><a href="#"><span>Sub Item 1.3</span></a></li>
<li><a href="#"><span>Sub Item 1.4</span></a></li>
<li><a href="#"><span>Sub Item 1.5</span></a></li>
<li><a href="#"><span>Sub Item 1.6</span></a></li>
<li><a href="#" class="parent"><span>Sub Item 1.7</span></a>
<div><ul>
<li><a href="#"><span>Sub Item 1.7.1</span></a></li>
<li><a href="#"><span>Sub Item 1.7.2</span></a></li>
</ul></div>
</li>
</ul></div>
</li>
<li><a href="#"><span>Sub Item 2</span></a></li>
<li><a href="#"><span>Sub Item 3</span></a></li>
</ul></div>
</li>
<li><a href="#"><span>Product Info</span></a>
<div><ul>
<li><a href="#" class="parent"><span>Sub Item 1</span></a>
<div><ul>
<li><a href="#"><span>Sub Item 1.1</span></a></li>
<li><a href="#"><span>Sub Item 1.2</span></a></li>
</ul></div>
</li>
<li><a href="#" class="parent"><span>Sub Item 2</span></a>
<div><ul>
<li><a href="#"><span>Sub Item 2.1</span></a></li>
<li><a href="#"><span>Sub Item 2.2</span></a></li>
</ul></div>
</li>
<li><a href="#"><span>Sub Item 3</span></a></li>
<li><a href="#"><span>Sub Item 4</span></a></li>
<li><a href="#"><span>Sub Item 5</span></a></li>
<li><a href="#"><span>Sub Item 6</span></a></li>
<li><a href="#"><span>Sub Item 7</span></a></li>
</ul></div>
</li>
<li><a href="#"><span>Help</span></a></li>
<li class="last"><a href="#"><span>Contacts</span></a></li>
</ul>
</div>

8. Kode  "#"  anda ganti dengan link yang kamu inginkan selanjutnya   Simpan template

 Salam Blogger

  • Share this
  • Sumbit to Digg
  • Sumbit to StumbleUpon
  • Sumbit to Delicious
  • Sumbit to Technorati
  • Sumbit to Reddit
  • Sumbit to Mixx
  • Sumbit to Twitter
  • Sumbit to Furl
  • Sumbit to Design Float
  • Sumbit to Blinklist
  • Sumbit to Yahoo Buzz
  • Sumbit to Google Bookmarks

Artikel Terkait

1 comments:

Jony Juniran said...

klu mo buatt, animasi header kaya blog ini gmn ya?

Post a Comment

SILAHKAH COMEN DULU...
MAKASIH TELAH MEMBERI COMEN DAN WUKTUNYA....
SALAM PERSAHABATAN.....
edy putra Jl.cik lanang62 Kauman Rt04/05 Jepara-59417

CARI ARTIKEL DISINI By Google

Loading

    COMENTATOR

    CHAT ROOM

    CONTAC Edy putra