Membuat menu horizontal blog

Selamat siang sob, pada kesempatan kali ini saya akan share mengenai bagaimana membuat menu horizontal pada blog. Sebenarnya tutorial ini sudah banyak sekali blog yang membahas mengenai Membuat menu horizontal blog. Sengaja saya share disini untuk berbagi ilmu kepada sobat semua. Tutorial ini saya dapat dari inernet dan saya modifikasi sendiri agar terlihat berbeda. Sebelumnya saya juga pernah share Cara membuat menu horizonta l di blog. Ok langsung saja tanpa basa - basi, disini saya akan memberikan menu blog dengan 3 variasi warna. Untuk lebih lanjut silakan sobat simak artikel saya ini.

Langkah - langkah memasang Menu Horizontal Blog :

• Pertama sobat login ke blogger.com dengan akun sobat.
• Kemudian sobat cari kode ]]></b:skin> ( Gunakan tombol F3 untuk memudahkan pencarian ).
• Silakan sobat pilih  menu yang sobat inginkan.

Style 1

ul#menu{

margin:0;

padding:0;

list-style-type:none;        

width:auto;

position:relative;

display:block;

height:36px;

text-transform:uppercase;

font-size:12px;

font-weight:bold;

background:transparent url("http://i1260.photobucket.com/albums/ii570/Saeful13/OFF-2.png") repeat-x top left;

font-family:Helvetica,Arial,Verdana,sans-serif;

border-bottom:1px solid #000000;

border-top:1px solid #000000;

}

ul#menu li{

display:block;

float:left;

margin:0;

pading:0;}

ul#menu li a{

display:block;

float:left;

color:#000000;

text-decoration:none;

font-weight:bold;

padding:12px 20px 0 20px;

height:24px;

background:transparent url("http://i1260.photobucket.com/albums/ii570/Saeful13/DIVIDER-2.png") no-repeat top right;

}

ul#menu li a:hover{

background:transparent url("http://i1260.photobucket.com/albums/ii570/Saeful13/HOVER-2.gif") no-repeat top right;

}

Style 2

ul#menu{

margin:0;

padding:0;

list-style-type:none;

width:auto;

position:relative;

display:block;

height:36px;

text-transform:uppercase;

font-size:12px;

font-weight:bold;

background:transparent url("http://i1260.photobucket.com/albums/ii570/Saeful13/OFF.png") repeat-x top left;

font-family:Helvetica,Arial,Verdana,sans-serif;

border-bottom:1px solid #000000;

border-top:1px solid #000000;

}

ul#menu li{

display:block;

float:left;

margin:0;

pading:0;}

ul#menu li a{

display:block;

float:left;

color:#000000;

text-decoration:none;

font-weight:bold;

padding:12px 20px 0 20px;

height:24px;

background:transparent url("http://i1260.photobucket.com/albums/ii570/Saeful13/DIVIDER.png") no-repeat top right;

}

ul#menu li a:hover{

background:transparent url("http://i1260.photobucket.com/albums/ii570/Saeful13/HOVER.gif") no-repeat top right;

}

Style 3

ul#menu{

margin:0;

padding:0;

list-style-type:none;

width:auto;

position:relative;

display:block;

height:36px;

text-transform:uppercase;

font-size:12px;

font-weight:bold;

background:transparent url("http://i1260.photobucket.com/albums/ii570/Saeful13/OFF-1.png") repeat-x top left;

font-family:Helvetica,Arial,Verdana,sans-serif;

border-bottom:1px solid #1200ff;

border-top:1px solid #1200ff;

}

ul#menu li{

display:block;

float:left;

margin:0;

pading:0;}

ul#menu li a{

display:block;

float:left;

color:#ffffff;

text-decoration:none;

font-weight:bold;

padding:12px 20px 0 20px;

height:24px;

background:transparent url("http://i1260.photobucket.com/albums/ii570/Saeful13/DIVIDER-1.png") no-repeat top right;

}

ul#menu li a:hover{

background:transparent url("http://i1260.photobucket.com/albums/ii570/Saeful13/HOVER-1.gif") no-repeat top right;

}

• Setelah sobat memilih, sobat copy/paste kode Menu yang telah dipilih dan letakkan kode tersebut diatas kode ]]></b:skin>.
• Kemudian Save.
• Selanjutnya kita pindah ke Tata Letak ► Tambah Gadget ► Pilih HTML/JavaScript.
• Kemudian Copy/Paste kode dibawah ini dan simpan.
• Selanjutnya letakkan Gadget tersebut dibawah atau diatas Header, sesuai keinginan sobat.
• Terakhir Simpan Setelan

<ul id='menu'>
<li><a href='http://saeful13.blogspot.com/'>Home</a></li>
<li><a href='http://saeful13.blogspot.com/search/label/Software'>Software</a></li>
<li><a href='http://saeful13.blogspot.com/search/label/Photoshop'>Photoshop</a></li>
<li><a href='http://saeful13.blogspot.com/search/label/Tutorial Blog'>Tutorial Blog</a></li>
<li><a href='http://saeful13.blogspot.com/search/label/Unik'>Unik</a></li>
<li><a href='http://saeful13.blogspot.com/search/label/Lain - lain'>Lain - lain</a></li>
<li><a href='http://saeful13.blogspot.com/2012/03/daftar-isi_15.html'>Daftar Isi&lt;/a></li>
<li><a href=&#039;http://saeful13.blogspot.com/2012/05/link-exchange.html'>Link Exchange</a></li>
<li><a href='https://plus.google.com/111695896029061251608'>About me</a></li>
</ul>

Keterangan : 

• Sobat ganti link http://saeful13.blogspot.com/ atau teks yang berwarna merah dan yang lainnya dengan link sobat yang akan dituju.
• Sobat ganti teks Home atau teks yang berwarna kuning dan yang lainnya dengan menu yang sobat inginkan.

Semoga bermanfaat....