Membuat JQuery Slide Menu

Salam Sejahtera teman - teman blogger sekalian, kali ini saya sedikit membahas untuk memperindah tampilan blog kita agar lebih menarik dan nyaman untuk pengunjung tentunya, bagi anda yang memiliki blog dengan banyak macam kategori pada postingan anda, maka tips kali ini cocok untuk blog yang anda miliki sekarang, anda dapat menambahkan beberapa link kedalam menu ini, entah itu untuk kategori, halaman profil, atau halaman - halaman lain yang anda inginkan,lebih dari archieve blog, menu ini cukup simple dan mudah pengoperasiannya, dan menggunakkan JQuery agar proses slide / munculnya submenu dengan tampilan yang menarik.berikut cara pembuatannya, simak dengan seksama karena cukup banyak kode / script yang kita masukkan kedalam blog.

1. Login pada Blogger.
2. Klik pada Layout pada Dashboard.
3. Pada Layout klik Edit HTML .
4. Temukan kode </b:skin>
5. Letakkan kode dibawah ini sebelum kode </b:skin> tersebut

.jqueryslidemenu{
font: bold 12px Verdana;
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;
}

6. Temukan kode berikut </head>

7. Letakkan kode dibawah ini sebelum kode </head> tersebut.

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

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/>
<script src='http://sites.google.com/site/amatullah83/js-indahnyaberbagi/Dropdownmenuwithjquery.js' type='text/javascript'/>

8.Selanjutnya temukan kode dibawah ini

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

9. Letakkan kode dibawah ini setelah kode tersebut pada langkah

<div class='jqueryslidemenu' id='myslidemenu'>
<ul>
<li><a href='http://exzhadhian.blogspot.com/'>Home</a></li>
<li><a href='#'>Daftar Isi</a></li>
<li><a href='#'>Tutorial</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>
<li><a href='#'>Sub Item 1.4</a></li>
</ul>
</li>
<li><a href='#'>Download</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>
<li><a href='#'>Sub Item 3.1.1.5</a></li>
</ul>
</li>
<li><a href='#'>Sub Item 2.1.4</a></li>
</ul>
</li>
</ul>
</li>
<li><a href='http://exzhadian.blogspot.com/'>About</a></li>
</ul>
<br style='clear: left'/>
</div>

10. Save dan lihat hasilnya.

NB : ganti tulisan berwarna Merah dengan tulisan / kategori yang anda inginkan,anda juga bisa mengganti warna - warna yang sudah saya sediakan didalam script tersebut.

Jika anda gagal dalam tutorial ini silahkan baca artikel aslinya : Download
Sekian tutorial kali ini, cukup mudah bukan? memang benyak scriptnya, namun untuk sekali ini cukup untuk memudahkan pengunjung untuk menelusuri blog anda.

Terimakasih untuk para pembaca,saya harap anda dapat meluangkan waktu sejenak untuk berkomentar pada postingan ini.
Salam blogger.