Membuat Menu Horizontal

Assalamu'alaikum Wr. Wb.

OK, sekarang Intlegent mau nerangin bagaimana cara membuat Horizontal Navigasi? Perlu di ingat sekali lagi bahwa desain template antara yang satu dengan yang lain sangatlah berbeda, sehingga sangat besar kemungkinan apa yang saya terangkan berbeda dengan template yang anda gunakan. Untuk itu Intlegent menyarankan agar anda membuat satu blog percobaan.

langkah-langkah

1.Silakan Login ke Blogger dengan akun anda
2.Klik Tata Letak
3.Klik tab Edit HTML
4.Bila anda takut gagal silakan Backup Template, click Download Full Template
5.Cari Kode kode ]]>
6.Copy paste kode di bawah persis di atas kode ]]>
<br />/* navbar<br />================== */<br /><br />#bg_nav {<br />background: #ffffff;<br />width: 850px;<br />height: 29px;<br />font-size: 11px;<br />font-family: Arial, Tahoma, Verdana;<br />color: #000000;<br />font-weight: bold;<br />margin: 0px auto 0px;<br />padding: 0px;<br />border-top: 1px solid #000000;<br />border-bottom: 1px solid #ffffff;<br />overflow: hidden;<br />}<br />#bg_nav a, #bg_nav a:visited {<br />color: #000000;<br />font-size: 11px;<br />text-decoration: none;<br />text-transform: uppercase;<br />padding: 0px 0px 0px 3px;<br />}<br /><br />#bg_nav a:hover {<br />color: #000000;<br />text-decoration: underline;<br />padding: 0px 0px 0px 3px;<br />}<br /><br />#navleft {<br />width: 500px;<br />float: left;<br />margin: 0px;<br />padding: 0px;<br />}<br />#navright {<br />width: 220px;<br />font-size: 11px;<br />float: right;<br />margin: 0px;<br />padding: 3px 5px 0px 0px;<br />}<br />#navright a img {<br />border: none;<br />margin: 0px;<br />padding: 3px 5px 0px 0px;<br />}<br /><br />#nav {<br />margin: 0px;<br />padding: 0px;<br />list-style: none;<br />}<br />#nav ul {<br />margin: 0px;<br />padding: 0px;<br />list-style: none;<br />}<br /><br />#nav a, #nav a:visited {<br />background: #ffffff;<br />color: #000000;<br />display: block;<br />font-weight: bold;<br />margin: 0px;<br />padding: 8px 15px 8px 15px;<br />border-left: 1px solid #ffffff;<br />}<br />#nav a:hover {<br />background: #c06000;<br />color: #000000;<br />margin: 0px;<br />padding: 8px 15px 8px 15px;<br />text-decoration: none;<br />}<br /><br />#nav li {<br />float: left;<br />margin: 0px;<br />padding: 0px;<br />}<br />#nav li li {<br />float: left;<br />margin: 0px;<br />padding: 0px;<br />width: 150px;<br />}<br />#nav li li a, #nav li li a:link, #nav li li a:visited {<br />background: #ffffff;<br />width: 160px;<br />float: none;<br />margin: 0px;<br />padding: 7px 30px 7px 10px;<br />border-bottom: 1px solid #ffffff;<br />border-left: 1px solid #ffffff;<br />border-right: 1px solid #ffffff;<br />}<br />#nav li li a:hover, #nav li li a:active {<br />background: #c06000;<br />padding: 7px 30px 7px 10px;<br />}<br /><br />#nav li ul {<br />position: absolute;<br />width: 10em;<br />left: -999em;<br />}<br /><br />#nav li:hover ul {<br />left: auto;<br />display: block;<br />}<br />#nav li:hover ul, #nav li.sfhover ul {<br />left: auto;<br />}
7.Cari seperti berikut ini :
<br /><div id='header-wrapper'><b:section class='header' id='header' maxwidgets='1' showaddelement='no'><br /><b:widget id='Header1' locked='true' title='test (Header)' type='Header'/><br /></b:section><br /></div>
8.Copy paste code di bawak persis dibawah kode di atas
<br /><div id='bg_nav'><br /><div id='navleft'><div id='nav'><ul><li><a href='http://Alamat_Blog_Kamu.blogspot.com/'>home</a></li><li><a href='http://Link_yang_dituju'>Add Link</a></li><li><a href='http://Link_yang_dituju'>Add Link</a></li><li><a href='http://Link_yang_dituju'>Add Link</a></li><li><a href='http://Link_yang_dituju'>Add Link</a></li><li><a href='http://www.intlegent.co.cc'>Intlegent</a></li></ul></div></div><br /><div id='navright'><br /><form action='http://Alamat_Blog_Kamu.blogspot.com/search' id='searchform' method='get' name='searchform'><input id='s' name='q' type='text' value=''/> <input id='searchsubmit' type='submit' value='Cari'/><br /></form><br /></div><br /></div><!-- akhir bg_nav -->
9.Clik tombol Simpan Template
10.Selesai

Ane gak mau panjang-panjang ngepost nih,..capek,
sisanya ente edit sendiri ya ane males
semoga tutorial berikut bermanfaat  ya

 Dengan meng-klik 1 iklan dibawah, kamu udah jadi donatur bagi kami.