JavaScript Kit Cool CSS Menu

Kali ini saya akan menjelaskan bagaimana cara memasang JavaScript Kit Cool CSS Menu. CSS menu ini adalah buatan JavaScript Kit (www.javascriptkit.com) namun mudah sekali memasangnya.

HomeTipsPengetahuan UmumGambar UnikOther

Sebenarnya tampilan menu CSS itu tidak seperti tadi, warna border yang hitam menyatu dengan gambar background blog saya. Tampilan seharusnya adalah seperti ini


Cara pasang :

Buka Tata Letak>Edit HTML

Letakkan kode CSS berikut diatas tag </head>

<style type="text/css">

#coolmenu{

border: 1px solid black;

border-bottom-width: 0;

width: 170px;

background-color: #E6E6E6;

}

* html #coolmenu{ /*IE only rule, to negate the padding below IE includes in menu width.*/

width: 164px;

}

#coolmenu a{

font: bold 13px Verdana;

padding: 2px;

padding-left: 4px;

display: block;

width: 100%;

color: black;

text-decoration: none;

border-bottom: 1px solid black;

}

html>body #coolmenu a{ /*Non IE rule*/

width: auto;

}

#coolmenu a:hover{

background-color: black;

color: white;

}

</style>

Setalah itu, taruh kode ini di tempat dimana ingin ditampilkan

<div id="coolmenu">
<a href="URL">Nama-tampilan</a>
</div>

Jangan lupa ganti teks warna merah dengan URL tujuan dan teks warna biru menjadi nama tampilan


Bagaimana cara menambah link-nya?
Tambahkan <a href="URL">Nama-tampilan</a>

Menjadi seperti ini

<div id="coolmenu">
<a href="URL">Nama-tampilan</a>
<a href="URL">Nama-tampilan</a>
<a href="URL">Nama-tampilan</a>
<a href="URL">Nama-tampilan</a>
</div>


Contoh :

<div id="coolmenu">

<a href="http://www.orazatachi.co.cc/">Home</a>

<a href="http://www.orazatachi.co.cc/search/label/Tips">Tips</a>

<a href="http://www.orazatachi.co.cc/search/label/Pengetahuan%20Umum">Pengetahuan Umum</a>

<a href="http://www.orazatachi.co.cc/search/label/Gambar%20Unik">Gambar Unik</a>

<a href="http://www.orazatachi.co.cc/search/label/Other">Other</a>

</div>

Posted in: Komputer,Pelajaran