Tutorial Blog Membuat navigasi menu sederhana diatas header

Membuat menu Navigasi di atas Header.

Sebelum mengedit template,ada baiknya anda backup dulu template anda,caranya copy seluruh isi kode template kemudian buat berkas baru pada notepad ++,untuk instal notepad ++ disini.Download Notepad++

Okk kita mulai ya,bagaimana cara membuat menu navigasi.

Setelah masuk pada edit html silahkan copy css dibawah ini dan letakkan di dibawah <![CDATA[

#nav{width:100%;height:40px;background:#787777;color:#efefef;font-family:"Ubuntu";font-size:19px;}

#nav ul {list-style-type: none;margin: 0;padding: 0;overflow: hidden;background-color: #787777;}

#nav li {float: left;}

#nav li a {display: block;color: white;text-align: center;padding: 8px 10px;text-decoration: none;}

#nav li a:hover {background: #646362;text-shadow:1px 0px 2px #fa881e;color:white;}

Okk gimna...Sudah belum..
Kalau sudah,kita masuk pada tahap berikutnya yaitu memanggil kode tersebut...Ingat !!! gk perlu teriak teriak manggilnya yaa...

Masukkan kode ini di atas <div id='header'>,itu kalau mau mengikuti lebar header,
kalau pengen membuat selebar layar,masukkan diatas kode <div id='outer-wrapper'>,

Ini kodenya:

<div id='nav'>

<left><nav><ul>

  <li><a href='/' title='Beranda'>Beranda</a></li>

  <li><a href='/p/isi-blog.html' title='Isi Blog'>Isi Blog</a></li>

  <li><a href='/search/label/Puisiku' title='Puisiku'>Puisiku</a></li>

  <li><a href='/p/blog-page.html' title='Template Ini'>Template Ini</a></li>

  </ul></nav></left>

<right>

<form action=' ' id='searchblog' method='get'>

<input Style='height:38px;width:250px;margin-top:1px;margin-right:-4px;font-size:18px;' name='q' placeholder='Cari Artikel Disini...' type='text'/>

<input id='search-button-top' style='width:110px;height:38px;background:#fcc38d;color:#fff;font-size:18px;' type='submit' value='Pencarian'/></form>

  </right>

  </div>

  <div style='clear'/>

Saya membuat navigasi menu itu setinggi 40px dan diatas header.Lebarnya mengikuti header.Seperti menu navigasi yg saya punya. Silahkan baca tutorial membuat header 2 kolom punya saya.

Sederhana sekali bukan??.
Itulah yg bisa saya suguhkan buat anda sekedar berbagi apa yg saya bisa buat dan saya berharap bisa bermanfaat.

Saya bukan seorang pakar pembuat template,saya hanya suka mencoba dan mempraktekkan  pengetahuan tentang blog dan koding.

Selamat mencoba dan salam sukses.