Jun 2, 2010

Top Menu

Contoh top menu untuk template Notepad.

contoh menu dan pautannya pada pos:

MenuPautan
Anecdotehttp://99rasa.blogspot.com/2010/02/mukadimah.html
Nur's Shophttp://99rasa.blogspot.com/2010/04/salam-sejahtera.html
Careerhttp://99rasa.blogspot.com/2010/06/career.html
Book Storehttp://99rasa.blogspot.com/2009/12/book-store.html
Fiqhhttp://99rasa.blogspot.com/2010/01/fiqh.html
Deco-decohttp://99rasa.blogspot.com/2010/01/deco-deco.html
Jejalanhttp://99rasa.blogspot.com/2010/01/jejalan.html

Dalam kod template cari dalam bahagian CSS kod #Menu macam dalam table di bawah ni.
Cuma taip pinda satu sahaja yang warna merah 20px; tu jadikan 15px;. Ini sahaja dalam bahagian CSS.


#menu {position:relative; text-align:center; margin:0px 15px; padding:0px 0px 3px 0px; background: url(http://img399.imageshack.us/img399/8387/menubgvq1.png);}
#menu ul {display:table; padding:0px; margin:0 auto; list-style-type:none; white-space:nowrap;}
#menu ul li {display:table-cell;}
* html #menu ul {display:inline;}
*:first-child+html #menu ul {display:inline;}
* html #menu ul li {float:left;}
*:first-child+html #menu ul li {float:left;}
#menu ul li a {display:block; width:auto; color:#ebede9; text-decoration:none; font:12px/24px Verdana; padding:0px 9px 0px 20px;}
#menu ul li a:hover {text-decoration:none;}
#menu ul li.current_page_item a {text-decoration:none; font-weight:bold;}
.container {clear:both; text-decoration:none;}
* html .container {display:inline-block;}
*:first-child+html .container {display:inline-block;}
#menu ul li.menu_i1 {background: url(http://4.bp.blogspot.com/_qTWVg4q5lCo/SMqnPYLqQGI/AAAAAAAAAnY/Y5z9ZadKo8Q/s1600/menu-red-r.gif) 100% 100% no-repeat;}
#menu ul li.menu_i1 a {background: url(http://3.bp.blogspot.com/_qTWVg4q5lCo/SMqnflCYf5I/AAAAAAAAAng/BpMRZmES_Vw/s1600/menu-red-l.gif) 0 100% no-repeat;}
#menu ul li.menu_i2 {background: url(http://2.bp.blogspot.com/_qTWVg4q5lCo/SMqnupwbdcI/AAAAAAAAAno/9aV2ZWSLIuU/s1600/menu-green-r.gif) 100% 100% no-repeat;}
#menu ul li.menu_i2 a {background: url(http://1.bp.blogspot.com/_qTWVg4q5lCo/SMqn51bl6kI/AAAAAAAAAnw/90OhTH-ljqc/s1600/menu-green-l.gif) 0 100% no-repeat;}
#menu ul li.menu_i3 {background: url(http://4.bp.blogspot.com/_qTWVg4q5lCo/SMqoGHnDiJI/AAAAAAAAAn4/bEfrq8_4f9E/s1600/menu-blue-r.gif) 100% 100% no-repeat;}
#menu ul li.menu_i3 a {background: url(http://1.bp.blogspot.com/_qTWVg4q5lCo/SMqoRnv6JwI/AAAAAAAAAoA/d14VH7l3XeU/s1600/menu-blue-l.gif) 0 100% no-repeat;}
#menu ul li.menu_i4 {background: url(http://2.bp.blogspot.com/_qTWVg4q5lCo/SMqoeYO4iHI/AAAAAAAAAoI/WvX7IYcK93o/s1600/menu-dgreen-r.gif) 100% 100% no-repeat;}
#menu ul li.menu_i4 a {background: url(http://1.bp.blogspot.com/_qTWVg4q5lCo/SMqoqH5wZcI/AAAAAAAAAoQ/2wfv0eZTV24/s1600/menu-dgreen-l.gif) 0 100% no-repeat;}
#menu ul li.menu_i5 {background: url(http://4.bp.blogspot.com/_qTWVg4q5lCo/SMqo9SA2NMI/AAAAAAAAAoY/7U2jL-a0A4g/s1600/menu-yellow-r.gif) 100% 100% no-repeat;}
#menu ul li.menu_i5 a {background: url(http://2.bp.blogspot.com/_qTWVg4q5lCo/SMqpJS3ES_I/AAAAAAAAAog/bapAcjk64M0/s1600/menu-yellow-l.gif) 0 100% no-repeat;}

kemudian telusur ke bawah lagi cari kod bawah ni.

Copy kod warna biru (daripada <ul> sampai </ul>) masukkan betul-betul di bawah kod <div id='menu'> exactly ikut contoh bawah ni.

kod warna merah delete buang (dari <b:section.... sampai </b:section>). Hati-hati jangan delete satu </div> bawah dia tu.


<div class='sheet-shadow png'><div class='sheet'><div class='sheet-top-grad'>
<div id='menu'>


<ul>
<li><a style='text-decoration: none;' href='http://99rasa.blogspot.com/2010/02/mukadimah.html'>Anecdote</a></li>
<li><a style='text-decoration: none;' href='http://99rasa.blogspot.com/2010/04/salam-sejahtera.html'>Nur's Shop</a></li>
<li><a style='text-decoration: none;' href='http://99rasa.blogspot.com/2010/06/career.html'>Career</a></li>
<li><a style='text-decoration: none;' href='http://99rasa.blogspot.com/2009/12/book-store.html'>Book Store</a></li>
<li><a style='text-decoration: none;' href='http://99rasa.blogspot.com/2010/01/fiqh.html'>Fiqh</a></li>
<li><a style='text-decoration: none;' href='http://99rasa.blogspot.com/2010/01/deco-deco.html'>Deco-deco</a></li>
<li><a style='text-decoration: none;' href='http://99rasa.blogspot.com/2010/01/jejalan.html'>Jejalan</a></li>
</ul>


<b:section id='menusection' maxwidgets='1' showaddelement='no'>
<b:widget id='LinkList1' locked='true' title='Top Menu' type='LinkList'>
<b:includable id='main'>
<del class='container'>
<ul>
<b:loop values='data:links' var='link'>
<li><a expr:href='data:link.target'><data:link.name/></a></li>
</b:loop>
</ul>
</del>
</b:includable>
</b:widget>
</b:section>


</div>

Bila dah pinda, klik PREVIEW dulu tengok kalau ok baru save, kalau silap betulkan dulu dah ok baru SAVE.

1 comments:

Robert F. Crocker said... [Balas komen ini]

When I saw your post I am about to closing this website, you shared really great information and Thanks for sharing. top web hosting companies in Nigeria

Post a Comment