Top Menu

Contoh top menu untuk template Notepad.

contoh menu dan pautannya pada pos:

Menu	Pautan
Anecdote	http://99rasa.blogspot.com/2010/02/mukadimah.html
Nur's Shop	http://99rasa.blogspot.com/2010/04/salam-sejahtera.html
Career	http://99rasa.blogspot.com/2010/06/career.html
Book Store	http://99rasa.blogspot.com/2009/12/book-store.html
Fiqh	http://99rasa.blogspot.com/2010/01/fiqh.html
Deco-deco	http://99rasa.blogspot.com/2010/01/deco-deco.html
Jejalan	http://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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJxvgGcGG5xQ86PzHkIMiebMw2ZmLEv9xi95o00QRyQff5uk22lSe9HPvJLKXZsfCoB66mnnjQ0PYZSZWIymc40cLlTUxEQnLWx77fNZaHF1asEJWwtY7-eS2NJ5OjUNazO2IPwKURB20/s1600/menu-red-r.gif) 100% 100% no-repeat;} #menu ul li.menu_i1 a {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixWnQ4CWVX7WIb8PD4tACVrz3RaQIV0UnG7D3oI8KI1G9kWGsRunSoNDS7umRe_ZQwiQE-qhyphenhyphenF12wW3JRdfJ0DOQngqkPv4ghRN2NoXWII0DGXY8-5qf-yHnXvFHgolYW7gE2XqThv0g0/s1600/menu-red-l.gif) 0 100% no-repeat;} #menu ul li.menu_i2 {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_IEkUoTfJToE7lpIRsvedSd9bNxGT1fFD9n6tApzkDjHmkAnDh3CViSKGrtVt3xK7p0NxAWTnZmhyeLVLumEIdc8oyQGwySSon8l-utCnXQRAGz0uq5gItn6A2LP5iPqcxvyUBRiuK54/s1600/menu-green-r.gif) 100% 100% no-repeat;} #menu ul li.menu_i2 a {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiV3TVPXQxouq4NqhK55NKKoZPLg3dIHYJN4SSeptHVsvn9JrDqXIkTYb9Vmq7jpV1YjDUgqzmuCyR0_d13Fn1t6Zztv72w5evNyVv3YlJxeV4fhc7pvuBZi0tcOeUC4iVz5a-tTv0rjOY/s1600/menu-green-l.gif) 0 100% no-repeat;} #menu ul li.menu_i3 {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtUeg6DPoNIoVXK7_0eP_jwHTLflGgfvtH-MmOIbnRE7bCzJ9TSgA08XL5CjEdh3_aY6hNtMXWjulCSHgyQ76GbVtb5xaqJpT3ile3S2PHdukbIgdR2dGtZrLHq9BFRS3E8-jWJJnazhw/s1600/menu-blue-r.gif) 100% 100% no-repeat;} #menu ul li.menu_i3 a {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqibqaXcH9c4GFoEpqnykNCVUOqEew94f-q9x91mQSsp2EaRL4L8yHwM8Cmzpo218au2fpPywjHKWrLPHFelQf8ehvTunF9pXroOeShCRBmTEoalm8c1scizZkcMkj9Y3j3JpyN4em07s/s1600/menu-blue-l.gif) 0 100% no-repeat;} #menu ul li.menu_i4 {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZ6MQC3IPEWznyILDVg-F2FBUnU2qTrYD90HNBqpB1SXibUyk6U9QqpmL8h9MGZILWk5-iR4haaamaQXH8P2g0xLDdOctJnfBqaxBB9fEmUgPUJTlMVAIMqxZPmtqI9EhOJyTPDO4rXYg/s1600/menu-dgreen-r.gif) 100% 100% no-repeat;} #menu ul li.menu_i4 a {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLEr6YTFAcVlMHuznoFpHgkpNc_RBuLhTCCSbjAalncn-IYOBYnnt5QfI2rp2KGlflYM6jeyv1vSAKO-O1vNpgVayXBE_NNOAzQDE59wzp4nculPjqmVTIEeuX4c044fecJ8YnaIbDtFE/s1600/menu-dgreen-l.gif) 0 100% no-repeat;} #menu ul li.menu_i5 {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0cr_kSq1PVIfnnWvdmjKuVOrp0QkgW_MImS2RAmlmRRYCZbmUg78O8WEh8Yy2Yb3CIeqFL0aD11D5Z8Cqe-9B9RaYrppmRQ2QjWKbY4A3CwAehqj-pn68EzdfmA0qzGfkfbUIS5IWn5I/s1600/menu-yellow-r.gif) 100% 100% no-repeat;} #menu ul li.menu_i5 a {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5KUEeScMGPV7GnbPofNk3XR0R3_r05SYl0pau966GuK114-0zDwwqETCHdjkf0e7lqNUJsqtI9OQr4Oti5KYAjz5MiXxIMqJCEo8Rw5t68GiUz0zle5lmKBdmMhqakm0-Hc5km_esHEY/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.