Membuat Navigasi Menu Horizontal

Menu horizontal adalah menu-menu yang disusun secara horizontal, dan biasanya diletakkan di bawah header atau diatas header blog.

Tutorial blog membuat menu horizontal dapat mempermudah pengunjung atau vistor blog untuk melihat artikel kita yang telah kita pasang pada menu tersebut

Jika sahabat blogger masih pemula seperti saya dan belum tau cara membuatnya, untuk membuat menu horizontal caranya adalah sebagai berikut:

Login ke blogger.com
Pilih Rancangan
Kemudian Tambah Gatget, pilih elemen yang berada di bawah header
Pilih gadget HTML/Javascript
Tambahkan kode berikut kedalamnya

Klik tombol Simpan.
Ganti tulisan yang berwarna merah dan biru dengan alamat yang di inginkan
Selanjutnya
Pilih Edit HTML
Download template lengkap, untuk di upload kembali jika terjadi kesalahan pada edit.
Centang kotak kecil pada tulisan Expand Template Widget
Kemudian cari kode
]]></b:skin> gunakan tombol pencarian untuk mempermudah pencarian kode.
Tambahkan kode berikut di atas kode ]]></b:skin>

/* credits : http://innah-blog.blogspot.com */
#tabshori {
float:left;
width:100%;
font-size:11px;
border:1px solid #cccccc;
line-height:normal;
}
#tabshori ul {
margin:0;
padding:10px 10px 0 35px; /* Posisi Menu */
list-style:none;
}
#tabshori li {
display:inline;
margin:0;
padding:0;
}
#tabshori a {
float:left;
background:#3ffff3;
margin:0;
padding:0 0 0 4px;
border:1px solid #9966ff;
text-decoration:none;
}
#tabshori a span {
float:left;
display:block;
background:#3ffff3;
padding:4px 14px 4px 4px;
color:#000000;
}
/* Commented Blacklash Hack hides rule from IE5-Mach \*/
#tabshori a span {
float:none;
}
/* End IE5-Mach hack */
#tabshori a:hover {
background-position:0% - 42px;
}
#tabshori a:hover span {
background-position:100% - 42px;
}

Setelah selesai klik Simpan Template dan lihat hasilnya.

Selamat Mencoba dan semoga artikel ini bisa bermamfaat.

Facebook. Twitter Google Plus