Cara Membuat Menu Dropdown Horizontal, dengan mudah dan unik baru 2012 dengan HTML dan Jquery tutorial yang cepat

Satria Perwira    3/09/2012    Article , Berita Pilihan , New News , Trixs Blogging   

Cara Membuat Menu Dropdown Horizontal, dengan mudah dan unik baru 2012 dengan HTML dan Jquery tutorial yang cepat

Hello, sahabat ROG....
Mau punya menu Dropdown Horizontal seperti gambar diatas, contohnya-???
Emmzzz...
Pati iyea donk.

Saya sebenarnya agak sedikit malas dengan code HTML ini yang terlalu panjang, tapi demi permintaan sahabat Rafi Orilya Groups, saya jadikan semangat.
Baiklah kalau begitu.

Demi mempersingkat artikel ini.
Langsung saja dengan tutorial dan caranya.
Untuk Sahabat ROG pasti kami berikan dengan rinci agar mudah dipahami.

Ikuti langkah-langkah dibawah ini :
Menu ini cukup panjang dan berhubungan dengan template, jadi saya sarankan untuk “Download Template Lengkap” terlebih dahulu.

1.      Login ke Blogger.

2.      Klik Tata Letak.

3.      Klik Edit HTML.

4.      Backup template sobat terlebih dahulu, silahkan klik Download Template Lengkap.

5.      Contreng Expand Widget Template.

6.      Cari kode </b:skin> dan letakkan kode berikut sebelum kode </b:skin>

.jqueryslidemenu{
font: bold 12px Trebuchet MS; background: #414141; width: 100%;}

.jqueryslidemenu ul{
margin: 0; padding: 0; list-style-type: none;}

/*Top level list items*/
.jqueryslidemenu ul li{
position: relative; display: inline; float: left;}

/*Top level menu link items style*/
.jqueryslidemenu ul li a{
display: block;
background: #414141; /*background of tabs (default state)*/
color: white;
padding: 8px 10px;
border-right: 1px solid #778;
color: #2d2b2b;
text-decoration: none;}

* html .jqueryslidemenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/
display: inline-block;}

.jqueryslidemenu ul li a:link, .jqueryslidemenu ul li a:visited{
color: white;}

.jqueryslidemenu ul li a:hover{
background: black; /*tab link background during hover state*/
color: white;}

/*1st sub level menu*/
.jqueryslidemenu ul li ul{
position: absolute;
left: 0; display: block; visibility: hidden;}

/*Sub level menu list items (undo style from Top level List Items)*/
.jqueryslidemenu ul li ul li{
display: list-item; float: none;}

/*All subsequent sub menu levels vertical offset after 1st level sub menu */
.jqueryslidemenu ul li ul li ul{top: 0;}

/* Sub level menu links style */
.jqueryslidemenu ul li ul li a{
font: normal 13px Verdana;
width: 160px; /*width of sub menus*/
padding: 5px;
margin: 0;
border-top-width: 0;
border-bottom: 1px solid gray;}

.jqueryslidemenuz ul li ul li a:hover{ /*sub menus hover style*/
background: #eff9ff;color: black;}

/* CSS classes applied to down and right arrow images */

.downarrowclass{
position: absolute; top: 12px; right: 7px;}

.rightarrowclass{
position: absolute; top: 6px; right: 5px;}

7.      Kemudian letakkan kode berikut sebelum kode </head>

<!--[if lte IE 7]>
<style type="text/css">
html .jqueryslidemenu{height: 1%;} /*Holly Hack for IE7 and below*/
</style>
<![endif]-->

<script src='http://miscah.googlecode.com/files/jquery.min.js' type='text/javascript'/>
<script src='http://miscah.googlecode.com/files/slidemenu_horizontal.js' type='text/javascript'/>

8.      Cari kode yang mirip seperti ini

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Judul Blog Sobat (Header)' type='Header'/>
</b:section>
</div>

kenapa saya bilang cari yang mirip, karena setiap template mempunyai karakter yang berbeda-beda dan tulisan yang saya tandai dengan warna merah adalah judul blog sobat.

9.      Kemudian letakkan kode berikut tepat setelah kode diatas

<div class='jqueryslidemenu' id='myslidemenu'>
<ul>
<li><a href='/'>Home</a></li>
<li><a href='#'>Daftar Isi</a></li>
<li><a href='#'>Tutorial Blog</a>
<ul>
<li><a href='#'>Sub Item 1.1</a></li>
<li><a href='#'>Sub Item 1.2</a></li>
<li><a href='#'>Sub Item 1.3</a></li>
</ul>
</li>
<li><a href='#'>Islam</a></li>
<li><a href='#'>Folder 2</a>
<ul>
<li><a href='#'>Sub Item 2.1</a></li>
<li><a href='#'>Folder 2.1</a>
<ul>
<li><a href='#'>Sub Item 2.1.1</a></li>
<li><a href='#'>Sub Item 2.1.2</a></li>
<li><a href='#'>Folder 3.1.1</a>
<ul>
<li><a href='#'>Sub Item 3.1.1.1</a></li>
<li><a href='#'>Sub Item 3.1.1.2</a></li>
<li><a href='#'>Sub Item 3.1.1.3</a></li>
<li><a href='#'>Sub Item 3.1.1.4</a></li>
</ul>
</li>
<li><a href='#'>Sub Item 2.1.4</a></li>
</ul>
</li>
</ul>
</li>
<li><a href='http://rafi-orilya.blogspot.com’>Link Exchange</a></li>
</ul>
<br style='clear: left'/>
</div>

10. Setelah itu Simpan Template sobat.

Keterangan :

Perhatikan code <li><a href='#'>Sub Item 3.1.1.4</a></li>
Ganti karakter # dengan alamat yang anda ingin tuju.
Ganti Sub Item 3.1.1.4 dengan nama yang anda inginkan.
Contoh :

<li><a href='http://rafi-orilya.blogspot.com '> ROG Home</a></li>

Bagaimana-???? Sudah cukup Jelas-????
Hehehehe..........

Kalau masih bingung komentar yeah.

(Artikel Dilindungi)
Sertakan alamat blog ini jika mengcopy paste
Hak Cipta Dilindungi

Terima Kasih
Rafi Orilya Groups
by Rafi Aldiansyah Asikin