Bikin List Menu

List menu biasa kita lihat tampilannya di website profesional. Indahkan?
Bukan cuma indah tapi juga memudahkan pengunjung situs dalam mengakses dan
mencari apa yang diperlukannya. Bisa berisi informasi tentang yang punya web
atau menu contact sebagai jembatan penghubung juga menu untuk product yang
dijual. Dari semua itu ternyata blogger belum mempunyai widget untuk hal ini (kecuali
template yang telah tersedia list menu), kita bisa liat list menu ada di
worpress tapi wordpress sampe tulisan ini diturunkan belum juga bisa pake
untuk adsense sebagai penghasilan tambahan buat kita para blogger.


Gimana caranya membuat LIST MENU? Oke, langsung saja
kita akan buat list menu menggunakan css.maxdesign. Klik
Disini kemudian
pilih menu seperti apa yang Anda inginkan; vertikal atau horizontal. Apapun
pilihan Anda sesuaikan dengan template blog. Misalkan Anda memilih tipe
horizontal Dive into Mark Pure CSS Tabs. Klik disana kemudian kita akan diberi
dua kode; satu kode HTML dan satu lagi CSS.


Untuk kode CSS copy dan paste di edit html blog anda jangan lupa untuk
menceklis EXPAND TEMPLATE WIDGET simpan kode CSS tersebut tepat di atas kode:
]]></b:skin> lalu SAVE.


Untuk kode HTMLnya kita masukan ke ADD PAGE ELEMENT/Elemen Halaman -
HTML/JavaScript dan simpan dimana Anda ingin menunya terlihat. Biasanya kode
HTML umumnya seperti dibawah ini:



<div id="navcontainer">

<ul id="navlist">

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

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

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

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

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

</ul>

</div>



Nah Anda tinggal menyimpannya di page element html Anda dan mengganti tanda
kruis (#) dengan link tujuan dan ITEM ONE sampe ITEM FIVE dengan nama link
dari tujuan tersebut. Contoh list menu saya di atas:



<div id="navcontainer">

<ul id="navlist">

<li><a href="http://hakimtea.blogspot.com/">HOME</a></li>

<li><a href="http://hakimtea.blogspot.com/2006/01/tentang-saya.

html">TENTANG</a></li>

<li><a href="http://hakimtea.blogspot.com/2006/12/hubungi-saya.

html">KONTAK</a></li>

<li><a href="http://hakimtea.blogspot.com/search/label/Tutorial">

TUTORIAL</a></li>

<li><a href="http://hakimtea.blogspot.com/search/label/Tips">

TIPS</a></li>

</ul>

</div>



Mudahkan?

Silahkan dicoba…!

Kalo masih ada yang kurang dan masih pusing jangan sungkan hubungi sayah atau

tinggalkan comment di postingan inih.

Artikel Terkait Lainnya



0 Responses to "Bikin List Menu"

Poskan Komentar