Tutorial Membuat tombol horizontal navigasi di blog

Membuat tombol horizontal navigasi di blog. K
amu tentunya sudah tahukan tentang tombol navigasi? kalau kamu masih kurang paham, kamu bisa lihat langsung contohnya di blog saya. apa kamu lihat tombol berwarna hitam yang bergaris lurus yang didalamnya bertuliskan Home/panduan blog/widgad blog dan tombol search engine? itulah yang disebut dengan navigasi. soklah langsung saja di download ilmunya kalau kamu minat untuk membuatnya.
Nb: Template yang digunakan dalam percobaan ini menggunakan template dasar blog (minima) dan kode bisa berbeda-beda pada setiap template,



1.Login ke blogger
2.Klik Tata Letak.
3.Klik tab Edit HTML
4.tata letak
5.Cari Kode kode ]]></b:skin>

Copy paste kode dibawah ini di atas kode ]]></b:skin>
/* navbar
================== */
#bg_nav {
background: #000000;
width: 660px;
height: 29px;
font-size: 11px;
font-family: Arial, Tahoma, Verdana;
color: #FFFFFF;
font-weight: bold;
margin: 0px auto 0px;
padding: 0px;
border-top: 1px
solid #333333;
border-bottom: 1px
solid #333333;
overflow: hidden; }
#bg_nav a, #bg_nav a:visited {
color: #FFFFFF;
font-size: 11px;
text-decoration: none;
text-transform: uppercase;
padding: 0px 0px 0px 3px; }
#bg_nav a:hover {
color: #FFFFFF;
text-decoration: underline;
padding: 0px 0px 0px 3px; }
#navleft { width: 440px;
float: left;
margin: 0px; padding: 0px; }
#navright { width: 200px;
font-size: 11px;
float: right;
margin: 0px;
padding: 6px 5px 0px 0px; }
#navright a img {
border: none;
margin: 0px;
padding: 0px; }
#nav {
margin: 0px;
padding: 0px;
list-style: none; }
#nav ul {
margin: 0px;
padding: 0px;
list-style: none; }
#nav a, #nav a:visited {
background: #222222;
color: #FFFFFF;
display: block; font-weight: bold; margin: 0px;
padding: 8px 15px 8px 15px;
border-left: 1px solid #000000 }
#nav a:hover {
background: #6e6d6d;
color: #FFFFFF;
margin: 0px;
padding: 8px 15px 8px 15px;
text-decoration: none; }
#nav li {
float: left;
margin: 0px;
padding: 0px; }
#nav li li {
float: left;
margin: 0px;
padding: 0px;
width: 150px; }
#nav li li a,
#nav li li a:link,
#nav li li a:visited {
background: #333333;
width: 160px;
float: none;
margin: 0px;
padding: 7px 30px 7px 10px;
border-bottom: 1px
solid #000000;
border-left: 1px
solid #000000;
border-right: 1px
solid #000000; }
#nav li li a:hover,
#nav li li a:active {
background: #666666;
padding: 7px 30px 7px 10px; }
#nav li ul {
position: absolute;
width: 10em;
left: -999em; }
#nav li:hover ul {
left: auto; display: block; }
#nav li:hover ul,
#nav li.sfhover ul { left: auto; }

6. kemudian cari kode seperti dibawah ini :
<div id='header-wrapper'> <b:section class='header' id='header' maxwidgets='1' showaddelement='no'> <b:widget id='Header1' locked='true' title='test (Header)' type='Header'/> </b:section> </div>

7. Copy paste code dibawah ini persis di bawah kode diatas (hijau) :

<div id='bg_nav'> <div id='navleft'> <div id='nav'> <ul> <li><a href='http://www.masukkanalamatmudisini.com/'>home</a></li> <li><a href='http://www.masukanalamatmudisini.com/'>MContoh</a></li> <li><a href='http://www.masukkanalamatmudisini.com/'>edit tulisan</a></li> <li><a href='http://www.masukkanalamatmudisini.com/'>RUBAH TULISAN INI </a></li> </ul> </div> </div> <div id='navright'> <form action='http://AlamatBlogAnda.blogspot.com/search' id='searchform' method='get' name='searchform'> <input id='s' name='q' type='text' value=''/> <input id='searchsubmit' type='submit' value='Go'/> </form> </div> </div><!-- akhir bg_nav -->

8. Klik tombol SIMPAN TEMPLATE.
9. Selesai.

Sedikit catatan:
width: 660px;
width: 440px;
width: 200px;
Coba kamu liat nomor yang saya beri warna merah! nomor itu berfungsi untuk merubah dari panjangnya navigasi. jadi misalkan lebar(width) template kamu adalah 900px, maka agar sesuai kamu rubahlah 660px menjadi 900px. sedangkan 440 menunjukkan lebar dari nav sebelah kiri dan 200 lebar navbar sebelah kanan.
jadi misalkan lebar seluruh blog kamu 9oopx maka kamu bisa merubah ukuran dari 440 dan 200 menjadi 500 dan 390 (500+390=890, dan 10 digunakan sebagai sela). dan rubahlah alamat yang ada didalam kode diatas dengan alamat kamu sendiri/terserah kamu. pokoknya yang saya beri tanda merah artinya dapat kalian rubah.
Cukup segitu sajalah, mudah-mudahan kalian paham