Cara Membuat Graphic Menu Dengan Rollovers

Menu ini berbentuk grapik dengan rollover yang akan memancarkan sinar (spot light) pada bagian menu bila mouse di arahkan kebagian menu tersebut.graphik menu rollovers ini di buat dengan css murni dan potongan-potongan background image (menggunakan Photoshop).

Lihat Demo
dan adapun cara pembuatanya adalah :
1 Sign in ke blogger dengan ID anda
2 Click layout tab
3 Click Edit HTML tab
4 Click Download Full Template, simpan template anda untuk backup data.
5 Letakan CSS code di bawah ini diatas kode ]]></b:skin>

* {margin:0; padding:0;}

div#menu {width:184px; background:url(http://gm-menu-file.googlecode.com/files/menu_1.gif) top no-repeat; padding-top:44px;}

div#menubody {background:url(http://gm-menu-file.googlecode.com/files/menu_2.gif) repeat-y; padding-left:21px;}

div#menubottom {height:26px; background:url(http://gm-menu-file.googlecode.com/files/menu_4.gif) bottom no-repeat;}

ul#menulist {width:144px; list-style-type:none;}

ul#menulist li {height:27px; background:url(http://gm-menu-file.googlecode.com/files/menu_3.gif) bottom repeat-x;}

ul#menulist a {width:122px; height:20px; border-left:#75c5de 10px solid; font:bold 10px Verdana, Arial, sans-serif; color:#ffffff; text-decoration:none; padding:5px 0 0 10px; display:block !important; display:inline-block;}

ul#menulist a:hover {background:url(http://gm-menu-file.googlecode.com/files/menu_5.jpg) left repeat-y;}

2.Kode Html copy kode di bawah ini dan pastekan diantara kode <body> dan kode </body> di mana anda ingin menampilkan menu tersebut.

<div id="menu">
<div id="menubody">
<ul id="menulist">
<li><a href="#">Position 1</a></li>
<li><a href="#">Position 2</a></li>
<li><a href="#">Position 3</a></li>
<li><a href="#">Position 4</a></li>
<li><a href="#">Position 5</a></li>
</ul>
</div>
<div id="menubottom"></div>
</div>

7.Klik save templete button

8.selesai....

Gudang Menu

Gudang