Navigation


RSS : Articles / Comments


Membuat Menu Fulldown

18.08, Posted by Blog SMP Negeri 2 Karawang Barat, No Comment

Cara membuat menu navigasi horisontal bercabang (nested)

1. Edit template anda - Dashboard ->Tataletak -> Edit html

cari kode berikut:

]]> </b:skin>
</head>


Copy code di bawah ini


<link rel="stylesheet" type="text/css" href="http://www.hotlinkfiles.com/files/2653479_dvw8c/jqueryslidemenu.css" / >

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

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script >
<script type="text/javascript" src="http://www.hotlinkfiles.com/files/2653478_crwsk/jqueryslidemenu.js"></script >


Masukkan kode di atas dibawah (setelah) kode berikut:

]]></b:skin>
</head>





2. Masukkan script pada Tata Letak -> Elemen halaman


Kode di bawah ini bisa anda masukkan ke gadget html javascript

<div id="myslidemenu" class="jqueryslidemenu">
<ul>
<li><a href="http://smpn2krwbarat.blogspot.com">Home</a></li>
<li><a href="#">Artikel Umum</a>
<ul>
<li><a href="#">Tanaman Obat Keluarga (TOGA)</a></li>
<li><a href="#">Internet</a></li>
<li><a href="#">Ilmu dan Teknologi</a></li>
<li><a href="#">Artikel Harun Yahya</a></li>
</ul>
</li>
<li><a href="#">Tutorial Komputer</a>
<ul>
<li><a href="#">Windows</a></li>
<li><a href="#">Microsoft Excel </a></li>
<li><a href="#">Microsoft Word</a></li>
<li><a href="#">Setting Modem Nokia</a></li>
</ul>
</li>
<li><a href="#">Download Ebook</a>
<ul>
<li><a href="#">Ebook Islami</a></li>
<li><a href="#">Ebook Komputer</a></li>
<li><a href="#">Wallpaper kucing</a></li>
<li><a href="#">Download software hp gratis</a></li>
<li><a href="#">Download software hp symbian</a></li>
</ul>
</li>
<li><a href="#">Cari Uang di internet</a>
<ul>
<li><a href="#">Goggle Feed</a></li>
<li><a href="#">Tips cari Duit di Internet</a> </li>
<li><a href="#">Amazon Book</a> </li>
<li><a href="#">Amazon PC</a></li>
<li><a href="#">Astore Amazon</a></li>
<ul>
</ul></ul></li>
<li><a href="http://smpn2krwbarat.blogspot.com/search/label/belajar">Tutorial Blog</a>
</li>
<br style="clear: left"/>
</ul></div>


Kemudian Klik Simpan.

catatan:
Pada bagian : href="#" , tanda # anda ganti dengan url tujuan anda
teks setelah tanda # seperti Home, Artikel Umum, dst bisa anda ganti dengan teks sesuai dengan keinginan anda.

No Comment