Mohon tunggu...
KOMENTAR
Inovasi

Membuat menu navigasi horisontal di blogspot dengan css menu (versi blue sprite)

27 April 2012   03:58 Diperbarui: 25 Juni 2015   06:03 535 0
Membuat menu navigasi horisontal di blogspot dengan css menu (versi blue sprite). Sahabat Info Sinta, selain menu navigasi dropdown, ada juga cara yang lain, namun tetap berbeda, semuanya mempunyai kesamaan yaitu untuk memudahkan pengunjung blog mencari artikel yang ada di blog kita, selain itu juga untuk merapikan tampilan blog. untuk pengguna blogspot Menu navigasi secara default belum tersedia di template blogspot. Untuk menampilkan atau membuat menu navigasi perlu ditambahkan script agar menu tersebut muncul di bagian header blog. Dalam postingan ini kita akan membuat menu navigasi  horisotal sederhana menggunakan script css.Menu navigasi horisontal versi blue sprite adalah varian dari menu navigasi sebelumnya seperti menu navigasi massive blue yang menggunakan script css . Untuk membuatnya lakukan prosedur berikut: Baca Juga Membuat Menu Navigasi Dropdown, Klik DI SINI 1. Login ke akun blogger Pilih Dashboard - Tata letak - Edit HTML cari kode berikut: ]]> 2. Di bagian atas kode tersebut masukkan kode berikut ul#menu
{
margin:0;
padding:0;
list-style-type:none;
width:auto;
position:relative;
display:block;
height:30px;
font-size:12px;
font-weight:bold;
background:transparent url(http://i48.tinypic.com/2zgf4mo.jpg) repeat-x top left;
font-family:Arial, Helvetica, sans-serif;
border-bottom:1px solid #000000;
border-top:1px solid #000000;
}

ul#menu li
{
display:block;
float:left;
margin:0;
padding:0;
}

ul#menu li a
{
display:block;
float:left;
color:#999999;
text-decoration:none;
font-weight:bold;
padding:8px 20px 0 20px;
}

ul#menu li a:hover
{
color:#FFFFFF;
height:22px;
background:transparent url(http://i48.tinypic.com/2zgf4mo.jpg) 0px -30px no-repeat;
}


ul#menu li a.current
{
display:inline;
height:22px;
background:transparent url(http://i48.tinypic.com/2zgf4mo.jpg) 0px -30px no-repeat;
float:left;
margin:0;
}
3.  Klik tombol "Simpan Template" 4. Buka halaman "Tata Letak -> Elemen Halaman" 5. Pada Elemen header , klik " Tambah Gadget" Catatan: Jika anda menggunakan template default (bawaan) blogger maka tombol "Tambah gadget" tidak muncul pada bagian header, untuk menampilkannya bisa lihat postingan saya tentang cara menampilkan "tambah gadget" di header 6. Pilih gadget html/javascript masukkan script berikut :

KEMBALI KE ARTIKEL


LAPORKAN KONTEN
Alasan
Laporkan Konten
Laporkan Akun