Membuat Menu Horizontal Pada Blog

Pada entri yang lepas saya ada membuat tutorial bagaimana hendak membuat menu bar tanpa hack template .tutorial kali ini masih lagi mengenai bagaimana hendak membuat menu horizontal pada blog.Untuk membuat tidak perlu kita hack template,cuma masukkan kod pada add gadget.Tutorial ini adalah atas permintaan oleh sahabat kita Sendra yang mahu saya membuat tutorial bagaimana hendak membuat horizontal navigation seperti yang terdapat bahagian bawah header blog ini..yang tertera perkataan HOME,ISI KANDUNGAN......untuk membuatnya ikuti langkah ini.

Untuk memasukkan horizontal menu ini anda perlu:
1.log in ke blogger,pilih design-->>page element
2.klik pada add gadget--->>pilih HTML/Javascript
3.kemudian pastekan kod menu horizontal pilihan anda dibawah ini
4.selepas save kod ,seret widget HTML/Javascript ke bawah header

</span><style> #navcontainer {  background: #369; border-top: 1px solid #9CC; margin-top: 20px; font:  normal normal 11px Verdana, Geneva, Arial, Helvetica, sans-serif; }  #navlist { list-style: none outside none; margin: 0; padding: 0; }  @media all { #navlist { text-align: center } } #navlist li { bottom:  11px; display: inline; line-height: 1.2em; margin: 0; padding: 0;  position: relative; } html>body #navlist li { background: #000;  margin: 0 3px 0 0; padding: 4px 0px 4px 0; } #navlist a, #navlist  a:link, #navlist a:visited { background: #900; border: 1px solid #FFF;  bottom: 2px; color: #FFF; cursor: pointer; display: inline; height: 1em;  margin: 0; padding: 3px 5px 3px 5px; position: relative; right: 2px;  text-decoration: none; } #navlist a:hover { background: #C00; bottom:  1px; color: #FFF; position: relative; right: 1px; } #navlist a:active {  background: #999; bottom: 0px; color: #FFF; position: relative; right:  0px; } #navlist li#active { background: #369; bottom: 13px; display:  inline; margin: 0 3px 0 0; padding: 0; position: relative; }  html>body #navlist li#active { background: #000; margin: 0 4px 0 4px;  } #navlist #active a, #navlist #active a:link, #navlist #active  a:visited, #navlist #active a:hover { background: #369; border-bottom:  none; border-left: 1px solid #9CC; border-right: 1px solid #9CC;  border-top: 1px solid #9CC; bottom: 0; color: #FFF; cursor: text;  margin: 0; padding: 2px 5px 0 5px; position: relative; right: 0; }  </style> <div id="navcontainer"> <ul id="navlist">  <li><a href="#"><span>Link  1</span></a></li> <li><a  href="#"><span>Link 2</span></a></li>  <li><a href="#"><span>Link  3</span></a></li> <li><a  href="#"><span>Link 4</span></a></li>  </ul> </div><span class="UIStory_Message">

</span><style> #navcontainer { background: #E3CEF6; margin: 0 auto;  padding: .4em 0 .2em 0; font-family: georgia, serif; text-transform:  uppercase; font-size: 14px; } /* to stretch the container div to contain  floated list */ #navcontainer:after { content: "."; display: block;  line-height: 1px; font-size: 1px; clear: both; } ul#navlist {  list-style: none; padding: 0; margin: 0 auto; width: 80%; font-size:  0.8em; } ul#navlist li { display: block; float: left; margin: 0;  padding-bottom: 2px; } ul#navlist li a { display: block; width: 100%;  padding: 0.5em; border-width: 1px; border-color: #ffe #F5A9D0 #ccc #fff;  border-style: solid; color: #777; text-decoration: none; background:  #A9A9F5; } #navcontainer>ul#navlist li a { width: auto; } ul#navlist  li#active a { background: #800000; color: #800000; } ul#navlist li  a:hover, ul#navlist li#active a:hover { color: #800000; background:  transparent; border-color: #F5A9D0 #fff #fff #ccc; } </style>  <div id="navcontainer"> <ul id="navlist"> <li><a  href="#"><span>Link 1</span></a></li>  <li><a href="#"><span>Link  2</span></a></li> <li><a  href="#"><span>Link 3</span></a></li>  <li><a href="#"><span>Link  4</span></a></li> </ul> </div><span class="UIStory_Message">

Untuk memasukkan link anda perlu mengedit bahagian ini pada kod diatas:

Pada tanda "#" masukkan link anda
Manakala pada Link 1,Link2,Link3 dan Link 4 pula masukkan perkataan yang ingin dipaparkan contoh
HOME,CONTACT dan sebagainya.
Jika hendak delete atau tambah link, padam atau tambah kod ini:

Selamat Mencoba