Jumat, 31 Juli 2009

Cara Membuat Menubar Pada Blog

Pada kebanyakan Website ataupun blog biasanya dilengkapi dengan menubar yang diletakan dibagian atas halaman.Hal ini dimaksudkan untuk membantu pengunjung website atau blog tersebut menelusuri halaman-halaman lain atau content lainnya yang ada pada website atau blog tersebut seperti home, about me, contact dan lain lain.

Ada banyak cara membuat menubar yang bisa anda pelajari.Disini saya coba tulis salah satu cara membuat menubar yang sederhana dan relatif mudah untuk diterapkan pada blog anda.


Ada dua langkah yang harus anda lakukan untuk membuat menubar:
1.Menambahkan kode css ( styling code )
2.Menambahkan kode html.

Menambahkan Kode css Menubar

Terlebih dahulu silahkan masuk ke menu edit html pada blog anda.Jangan lupa klik download template lengkap terlebih dahulu untuk back up template anda.Bila template sudah di back up silahkan copy kode css dibawah ini.Setelah itu paste-kan dibawah kode css header yang tempatnya diantara kode <b:skin> dan </b:skin> di dalam template blog anda.Kemudian ikuti langkah selanjutnya.

a.navigation{
text-align:left;
display:block;
width:180px;
height:20px;
background:#f0f0f0;
padding:3px 4px 3px 8px;
margin:7px 10px 7px 0;
}

a.navigation:hover{
background:#97A4B9;
text-decoration:none;
}


Menambahkan kode html.

Copy kode html dibawah ini dan paste-kan pada template anda dibawah kode html untuk header.Ganti alamat url yang ditandai warna merah dengan link url yang anda inginkan.Untuk menu Home hubungkan dengan link url blog anda.

<a class="navigation" href="http://agusus1.blogspot.com">Home</a>
<a class="navigation" href="http://agusus1.blogspot.com">link1</a>
<a class="navigation" href="http://agusus1.blogspot.com">link2</a>

Selamat mencoba.

1 komentar: