Cara Membuat Menu Horizontal Di Blog

Cara Membuat Menu Horizontal agar tampilan blog kita menjadi lebih menarik
Berikut Cara Membuat Menu Horizontal di Blog :

1.Anda harus login ke bloger
2.Pilih >>Template>>Edit HTML
3.Cari Code Ini: ]]></b:skin>
4.letakan code di bwah ini tepat di atas code ]]></b:skin>
   agar mudah mencarinya silahkan pencet ctrl+f

#tejahtc{
height:30px;
width:900px;
margin:0 auto;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkvpfkB0i9h8aXRG1o8ysjypFYEjcqvbYI1xuenvtHKzlO9NDnGVETqaTtxA3rOJhiFpzA4td4l_seUrLEGwF_J5vlxZwepVqjacac9pq2TUF4UChqoXbQGANbtnMTvMmPiE0T6MyRfZE0/s1600/catmenu.jpg) repeat-x;
display:block;
padding:0px 0 0px 0px;
font-size:18px;
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:900px;
background:#252525 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkvpfkB0i9h8aXRG1o8ysjypFYEjcqvbYI1xuenvtHKzlO9NDnGVETqaTtxA3rOJhiFpzA4td4l_seUrLEGwF_J5vlxZwepVqjacac9pq2TUF4UChqoXbQGANbtnMTvMmPiE0T6MyRfZE0/s1600/catmenu.jpg) repeat-x;
height:40px;
}

#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;
}

#laras li a:hover, #tejas li a:active {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgteLofxl9-L8tO5GdVE04NpN8VI_6fLBB05gm23ZBU9iZS0aiKUFJ42uAOFBj6PIrPFxWfAbI2lzhnkCustNsLxBaBbDPNneDWgqUFbIa2PSeKfRrdcqYIqiJHcU1O4NQceS9cpJCGPp_l/s1600/aexpfq.jpg) 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/AVvXsEgteLofxl9-L8tO5GdVE04NpN8VI_6fLBB05gm23ZBU9iZS0aiKUFJ42uAOFBj6PIrPFxWfAbI2lzhnkCustNsLxBaBbDPNneDWgqUFbIa2PSeKfRrdcqYIqiJHcU1O4NQceS9cpJCGPp_l/s1600/aexpfq.jpg) 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;
} 

Sesuaikan lebar menu 900px sesuai dengan lebar templete blog anda

5.letakkan kode berikut dibawah kode <div id='content-wrapper'>

 <div class='tejahtc'>
<ul id='tejas'>
<li><a href='#'>Menu 1</a></li>
<li><a href='#'>Menu 2</a>
<ul>
<li><a href='#'>Sub Menu 2.1</a></li>
<li><a href='#'>Sub Menu 2.2</a></li>
<li><a href='#'>2.3</a></li></ul></li>
<li><a href='#'>Menu 3</a>
<ul>
<li><a href='#'>Sub Menu 3.1</a></li>
<li><a href='#'>Sub Menu 3.2</a></li>
<li><a href='#'>Sub Menu 3.3</a></li></ul></li>
<li><a href='#'>Menu 4 </a></li>
<li><a href='#'>Menu 5</a></li>
<li><a href='#'>Menu 6</a></li>
<li><a href='#?ref=hl'>Menu 7</a>
<ul>
<li><a href='#'>Sub Menu 7.1</a></li>
<li><a href='#'>Sub Menu 7.2</a></li>
<li><a href='#'>Sub Menu 7.3</a></li></ul></li>
<li><a href='#'>Menu 8</a></li>
<li><a href='#'>Menu 9</a></li>

</ul>
</div>

6.Ganti Tulisan yang berwarna merah dengan url blog anda contoh http://galaxycyberjogja.blogspot.com/
7.Ganti Menu dan Submenu dengan Menu dan Sub Menu anda
8.Simpan dan lihat hasilnya,jika tidak terjadi erorr anda akan melihat tampilan menu horizontal di blog anda.