Cara Membuat Menu bar Blog Bersusun 3

   tadi malam saya mencari tutorial bagaimana cara membuat menu bar dengan 3 susun dan saya mencoba mempraktekan nya kedalam blog teman saya dan hasilnya saya berhasil membuat menu bar bersusun 3 dan tampilanya akhirnya seperti ini

jika anda ingin membuat bentuk menu bar seperti diatas maka anda berada tepat di orang ahlinya hehe bercanda . hanya ingin berbagi apa yang saya pelajari semalam oke lasngsung saja kita simak dan pelajari bersama sama

1.silahkan masuk ke bloger
2.masuk ke desboard bloger anda
3.klik template lihat gambar

4.tunggu hingga loading selesai lihat tampilan di bawah ini jika loadingnya sudah selesai

5. klik edit html . lihat gambar diatas ,  maka tampilan berikutnya akan seperti ini

setelah itu anda copy kode berikut

<link rel="stylesheet" type="text/css" href="http://dsai.588.googlepages.com/slidemenu_hori.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://dsai.588.googlepages.com/slidemenu_horiz.js"></script>

6. anda cari kata </head> di html . lihat gambar 4 . untuk mempermudah pencarian anda tekan ctrl f . lalu pastekan tepat di atas kode  </head> simpan template jika sudah di paste .

7. lalu anda klik tata letak lihat gambar di bawah ini

dan tunggu hingga loading selesai jika sudah. langsung saja tambahkan gedget dan tambahkan html java script , lihat gambar di bawah ini untuk melihat jelas langkahnya

sambil meunggu loading selesai anda copy kode berikut ini

<div id="myslidemenu" class="jqueryslidemenu">

<ul>

<li><a href="http://assdfewewsds.blogspot.com/">Item 1</a></li>

<li><a href="#">Item 2</a></li>

<li><a href="#">Folder 1</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="#">Item 3</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://assdfewewsds.blogspot.com/">Item</a></li>

</ul>

<br style="clear: down" />

</div>

 jika loadingnya sudah selesai maka pastekan kode diatas tepat di html java script lihat gambar ini

sebelum disimpan perhatikan kode dibawah ini lalu ganti dengan kode html blog anda

CATATAN

li><a href="http://assdfewewsds.blogspot.com/">Item 1</a></li>

perhatikan kode yang diberi warna hijau,karena warna hijau lah yang akan kita rubah

menjadi

<ul>
<li><a href="http://warna hijau diatas ganti dengan nama blik anda">HOME</a></li

setelah itu simpan setelan anda , terletak di bagian kanan atas warna kuning . dan lihat blog anda
jika berhasil beri tahu kami ya

terimakasih telah berkunjung ke blog kami. jangan sungkan sungkan untuk datang lagi ya


silahkan di share jika artikel ini bermanfaat:

Tweet