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(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.

1 comments:

Robert 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