cara membuat menu horizontal pada blog

Oke, sekarang dalam postingan kali ini saya akan memberikan tips bagaimana membuat atau memasang menu horizontal terutama pada blog. nah, mungkin kalian tahu blog memang tidak menyediakan menu horizontal kan , nah oleh karena itu saya akan memberikan bagaimana cara membuat menu horizontal pada blog . oke , deh dari pada terlalu lama langsung saja (chekidot).

Berikut caranya:

Klik Rancangan --> edit html

Cari kode ]]></b:skin> ( Gunakan Ctrl + F untuk memudahkan percarian)

Letakkan kode berikut di atasnya.

#tejahtc{
height:33px;
width:1000px;
margin:0 auto;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDaJVJibKMyBwtHoTeTAkCv9lqV5yOnhq27eYK5ao2cXwTb6el4sqNwnQ6Rel0_yABWlbeLjztU6yyFb12xGnnrRGELx22vc72TbvAgx-iV7lpNizbN1R__UndaFSIaUmvTiLPTWseWE9e/) repeat-x;
display:block;
padding:0px 0 0px 0px;
font-size:12px;
font-family:"Segoe UI",Calibri,"Myriad Pro",Myriad,"Trebuchet MS",Helvetica,Arial,sans-serif;
font-weight:normal;
border-top:1px solid #252424;
}

#tejas{
margin: 0px;
padding: 0px;
width:1000px;
background:#252525 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDaJVJibKMyBwtHoTeTAkCv9lqV5yOnhq27eYK5ao2cXwTb6el4sqNwnQ6Rel0_yABWlbeLjztU6yyFb12xGnnrRGELx22vc72TbvAgx-iV7lpNizbN1R__UndaFSIaUmvTiLPTWseWE9e/) repeat-x;
height:33px;
}

#tejas ul {
float: left;
list-style: none;
margin: 0px;
padding: 0px;
}

#tejas li {
float: left;
list-style: none;
margin: 0px;
padding: 0px;
}

#tejas li a, #tejas li a:link, #tejas li a:visited {
color: #fae7df;
display: block;
margin: 0px;
padding: 9px 10px 10px 10px;
}

#tejas li a:hover, #tejas li a:active {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiT9ES4LhU-kWx4P1EFCSu9BxZ-K695SavSCxwP0T5E3PuR5kug1IY0OcBNWfjq7H2TWnxNJqkyU1AVy-We9yBkZujImU2oQiBgHbtEfhIO-ZgmS3NYHIqnJVmcN7OhH8LDMtBPpom8g5pE/) repeat-x;
color: #fff;
margin: 0px;
padding: 9px 10px 10px 10px;
text-decoration: none;
}

#tejas li li a, #tejas li li a:link, #tejas li li a:visited {
background:#ED4A05;
width: 150px;
color: #fae7df;
font-family:Tahoma,century gothic,Georgia, sans-serif;
font-weight: normal;
float: none;
margin: 0px;
padding: 9px 10px 10px 10px;
border-bottom: 1px solid #FF7800;
}

#tejas li li a:hover, #tejas li li a:active {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiT9ES4LhU-kWx4P1EFCSu9BxZ-K695SavSCxwP0T5E3PuR5kug1IY0OcBNWfjq7H2TWnxNJqkyU1AVy-We9yBkZujImU2oQiBgHbtEfhIO-ZgmS3NYHIqnJVmcN7OhH8LDMtBPpom8g5pE/) repeat-x;
color: #fff;
padding: 9px 10px 10px 10px;
}

#tejas li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 170px;
margin: 0px;
padding: 0px;
}

#tejas li li {
}

#tejas li ul a {
width: 140px;
}

#tejas li ul a:hover, #tejas li ul a:active {
}

#tejas li ul ul {
margin: -34px 0 0 170px;
}

#tejas li:hover ul ul, #tejas li:hover ul ul ul,
#tejas li.sfhover ul ul, #tejas li.sfhover ul ul ul {
left: -999em;
}

#tejas li:hover ul, #tejas li li:hover ul,
#tejas li li li:hover ul, #tejas li.sfhover ul,
#tejas li li.sfhover ul, #tejas li li li.sfhover ul {
left: auto;
}

#tejas li:hover, #tejas li.sfhover {
position: static;
}

tambahan :

Modifikasi kode di atas terutama ukuran lebar dan tinggi yang harus di sesuaikan dengan ukuran template blog sobat. untuk lebar :kalian rubah ukuran atau angka pada tulisan berwarna merah. sedangkan untuk tingginya kalian ubah angka atau ukuranya pada tulisan berwarna hijau

Hampir semua bagian dari kode di atas bisa di edit, tapi kalo menurut saya sih tampilannya sudah pas tinggal tinggi dan lebarnya saja... terserah sobat..

Letakkan kode berikut di bawah kode <div id='content-wrapper'> ( cari dengan Ctrl+F )

Ganti tulisan yang bertulisan link sobat disini dengan link dari kategori atau bisa juga dengan link posting.
oh ya jangan lupa ganti judul nya juga dengan mengganti tulisan Link-Name dan link title ( maaf tidak diberi warna ya mas bro),

contoh :

link kategori atau label, modelnya seperti ini:

http://ahdanahmadmalkan.blogspot.com/search/label/bisnis%20online

sedangkan untuk link posting seperti ini:

http://ahdanahmadmalkan.blogspot.com/2011/04/cara-mendapatkan-uang-1-perhari.html

simpan deh template .

alhamdulillah selesai juga. oke untuk kalian semoga bermanfaatyo....