Tutorial Kreatif membuat Manu Horizontal

Template blogger tidak menyediakan menu horizontal karena itu banyak sekali para blogger share tentang menu horizontal ini, termasuk tsalma tutorial blog juga kali ini akan share tentang menu horizontal. Tujuan utama menu ini adalah agar para pembaca langsung tertuju kepada menu blog yang tersedia. Biasanya menu ini sangat berguna bagi blog untuk mengelompokkan kategori postingan yang sejenis.

Caranya dalah sebagai berikut, tapi jangan kaget karena agak panjang kodenya, langkah yang harus di tempuh adalah sebagai berikut

1. Login dengan akun blogger anda
2. Cari setting kemudian klik Edit HTML
3. Cari kode ]]></b:skin>
4. Copy kode di bawah ini, diatas kode ]]></b:skin>


/* navbar
================== */

#bg_nav {
background: #ffffff;
width: 850px;
height: 29px;
font-size: 11px;
font-family: Arial, Tahoma, Verdana;/* navbar
================== */

#bg_nav {
background: #ffffff;
width: 850px;
height: 29px;
font-size: 11px;
font-family: Arial, Tahoma, Verdana;
color: #000000;
font-weight: bold;
margin: 0px auto 0px;
padding: 0px;
border-top: 1px solid #000000;
border-bottom: 1px solid #ffffff;
overflow: hidden;
}
#bg_nav a, #bg_nav a:visited {
color: #000000;
font-size: 11px;
text-decoration: none;
text-transform: uppercase;
padding: 0px 0px 0px 3px;
}

#bg_nav a:hover {
color: #000000;
text-decoration: underline;
padding: 0px 0px 0px 3px;
}

#navleft {
width: 500px;
float: left;
margin: 0px;
padding: 0px;
}
#navright {
width: 220px;
font-size: 11px;
float: right;
margin: 0px;
padding: 3px 5px 0px 0px;
}
#navright a img {
border: none;
margin: 0px;
padding: 3px 5px 0px 0px;
}

#nav {
margin: 0px;
padding: 0px;
list-style: none;
}
#nav ul {
margin: 0px;
padding: 0px;
list-style: none;
}

#nav a, #nav a:visited {
background: #ffffff;
color: #000000;
display: block;
font-weight: bold;
margin: 0px;
padding: 8px 15px 8px 15px;
border-left: 1px solid #ffffff;
}
#nav a:hover {
background: #c06000;
color: #000000;
margin: 0px;
padding: 8px 15px 8px 15px;
text-decoration: none;
}

#nav li {
float: left;
margin: 0px;
padding: 0px;
}
#nav li li {
float: left;
margin: 0px;
padding: 0px;
width: 150px;
}
#nav li li a, #nav li li a:link, #nav li li a:visited {
background: #ffffff;
width: 160px;
float: none;
margin: 0px;
padding: 7px 30px 7px 10px;
border-bottom: 1px solid #ffffff;
border-left: 1px solid #ffffff;
border-right: 1px solid #ffffff;
}
#nav li li a:hover, #nav li li a:active {
background: #c06000;
padding: 7px 30px 7px 10px;
}

#nav li ul {
position: absolute;
width: 10em;
left: -999em;
}

#nav li:hover ul {
left: auto;
display: block;
}
#nav li:hover ul, #nav li.sfhover ul {
left: auto;

untuk huruf yang di blocked itu, silahkan diganti sesuai dengan selera anda. OK
sekarang lanjutkan dengan mencari kode berikut ini dalam template kamu, di edit HTML.

<div id="header-wrapper">
<b:section class="header" id="header" maxwidgets="1" showaddelement="no">
<b:widget id="Header1" locked="true" title="test
    (Header)" type="Header">
sampai
</b:widget>
</b:section></div>

Kalau sudah ketemu jangan hapus, biarin aja sampai tua he he he, lanjutakan langkahmu dengan, yaitu Copy kode berikut dan letakkan dibawah kode yang saya tandai merah atau seprti di atas.

<div id="bg_nav">

<div id="navleft">
<div id="nav">
<ul>
<li><a href="http://alamat_blog_kamu.blogspot.com/">home</a></li>
<li><a href="http://link_yang_dituju/">Add Link</a></li>
<li><a href="http://link_yang_dituju/">Add Link</a></li>
<li><a href="http://link_yang_dituju/">Add Link</a></li>
<li><a href="http://link_yang_dituju/">Add Link</a></li>
</ul>
</div>
</div>

<div id="navright">

<form action="http://Alamat_Blog_Kamu.blogspot.com/search" id="searchform" method="get" name="searchform">
<input id="s" name="q" type="text" value="" /> <input id="searchsubmit" type="submit" value="Cari" /></form>

</div>

</div>

Jangan lupa simpan