membuat menu navigasi standard

Hey buddy akhirnya gwe posting lagi kali ini akan gwe kasih tutorialnya bikin menu kaya yang diatas ini tapi gwe ajarin yang warna item paling atas dulu ya

Dalam membuat menu seperti diatas saya akan kasih tutorial yang standarnya aja ya asal bisa kepasang tapi untuk modifikasinya menyusul

1 buka blog
2. klik layout ,edit html
3. Copy kode di bawah ini

.menu2 {<br />padding:0 0 0 32px;<br />margin:0;<br />list-style:none; height:35px;<br />background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNLGsl5E0dyxeAopO25HoTJTFH0xKVuY4GhMPBCizmxqAaWVwHMYDryINGNv4G29xQAWPqHcDl1crjOCcghvoYEOluvXq5B1LoQWxJu970u-PaQxkPJhTlAwivQrNMa4LnYUNgpcLG21I/s400/button1.gif);<br />position:relative; border:1px solid #000;<br />border-width:0 1px;<br />border-bottom:1px solid #444;<br />}<br /><br />.menu2 li {<br />float:left;<br />}<br /><br />.menu2 li a {<br />display:block;<br />float:left;<br />height:35px;<br />line-height:35px;<br />color:#aaa;<br />text-decoration:none;<br />font-size:11px;<br />font-family:arial, verdana, sans-serif;<br />font-weight:bold;<br />text-align:center;<br />padding:0 0 0 8px;<br />cursor:pointer;<br />}<br /><br />.menu2 li a b {<br />float:left;<br />display:block;<br />padding:0 16px 0 8px;<br />color:#aaa;<br />}<br /><br />.menu2 li.current a {<br />color:#fff;<br />background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyM-dEW0Fx8zgKHmmXwnD8QuiTNDVPA-d4ous025yI9P741ifjSGQxWUr5me8vTSkG6xhXIT5VlJsnachVlkBX0Mv01-fGreQl2XYVEeOISo_UpfV3x8vb9HRlbrzETKmeFxN5HsGfoCU/s400/button3.gif);<br />}<br /><br />.menu2 li.current a b {<br />background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyM-dEW0Fx8zgKHmmXwnD8QuiTNDVPA-d4ous025yI9P741ifjSGQxWUr5me8vTSkG6xhXIT5VlJsnachVlkBX0Mv01-fGreQl2XYVEeOISo_UpfV3x8vb9HRlbrzETKmeFxN5HsGfoCU/s400/button3.gif) no-repeat right top;<br />color:#fff;<br />}<br /><br />.menu2 li a:hover {<br />color:#fff;<br />background:#000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6SLB4-XK5Zq1hjuWKnSB83pRnzgTQIsgFFdTE3Ak-jpoOJNcqAiXJRe3-UvITwVeh2IIH5jNJ3UIL1AZ2PR4I4ynobSrkrKAIFgtwCpayXOq5QiTDgb3KMPt-NsOaz67HhS_hILmZw94/s400/button4.gif);<br />}<br /><br />.menu2 li a:hover b {<br />background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6SLB4-XK5Zq1hjuWKnSB83pRnzgTQIsgFFdTE3Ak-jpoOJNcqAiXJRe3-UvITwVeh2IIH5jNJ3UIL1AZ2PR4I4ynobSrkrKAIFgtwCpayXOq5QiTDgb3KMPt-NsOaz67HhS_hILmZw94/s400/button4.gif) no-repeat right top;<br />color:#fff;<br />}<br /><br />.menu2 li.current a:hover {<br />color:#fff;<br />background:#000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyM-dEW0Fx8zgKHmmXwnD8QuiTNDVPA-d4ous025yI9P741ifjSGQxWUr5me8vTSkG6xhXIT5VlJsnachVlkBX0Mv01-fGreQl2XYVEeOISo_UpfV3x8vb9HRlbrzETKmeFxN5HsGfoCU/s400/button3.gif);<br />cursor:default;<br />}<br /><br />.menu2 li.current a:hover b {<br />background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyM-dEW0Fx8zgKHmmXwnD8QuiTNDVPA-d4ous025yI9P741ifjSGQxWUr5me8vTSkG6xhXIT5VlJsnachVlkBX0Mv01-fGreQl2XYVEeOISo_UpfV3x8vb9HRlbrzETKmeFxN5HsGfoCU/s400/button3.gif) no-repeat right top;<br />color:#fff;<br />}

4. pastekan di atas ]]>
5. setelah itu save template

langkah pertama selesai ini adlah penerepan cssnya saja jadi tidak / blum muncul di layout blog kamu istirahat lah sejenak

setelah selesai buka edit htmlnya lagi dan copikan kode dibawah ini

<ul class="'menu2'"><br /><li><a href="'#nogo'"><b>Home</b></a></li><br /><li><a href="'#nogo'"><b>Edit-Me</b></a></li><br /><li class="'current'"><a href="'#nogo'"><b>Edit-Me</b></a></li><br /><li><a href="'#nogo'"><b>Edit-Me</b></a></li><br /><li><a href="'#nogo'"><b>Edit-Me</b></a></li><br /><br /><li><a href="'#nogo'"><b>Edit-Me</b></a></li><br /></ul><br />

pastekan diatas kode

setelah itu klik save


ganti kate edit me dengan kata yang akan muncul di layout blog
dan ganti kata #nogo dengan alamat yang di tuju
Klik save lagi dan ternya mudahkan