Membuat top menu di blogger

Kebetulan template yang saya gunakan sudah memiliki top menu. Sebenarnya, bisa saja kita membuat top menu pada blog yang belum memilikinya.

Sebelum Anda mengikuti langkah-langkah di bawah ini, sebaiknya salin dulu semua kode ke notepad untuk menyesuaikan dengan template Anda, baik ukuran, warna, dan sebagainya. Kalau sudah, silakan ikuti langkah di bawah ini.

• Salin kode berikut lalu paste di atas ]]></b:skin>.

/* navbar

================== */

#bg_nav {

background: #0e3300;

width: 770px;

height: 29px;

font-size: 11px;

font-family: Arial, Tahoma, Verdana;

color: #caf99b;

font-weight: bold;

margin: 0px auto 0px;

padding: 0px;

border-top: 1px solid #0e3300;

border-bottom: 1px solid #0e3300;

overflow: hidden;

}

#bg_nav a, #bg_nav a:visited {

color: #FFFFFF;

font-size: 11px;

text-decoration: none;

text-transform: uppercase;

padding: 0px 0px 0px 3px;

}

#bg_nav a:hover {

color: #FFFFFF;

text-decoration: underline;

padding: 0px 0px 0px 3px;

}

#navleft {

width: 440px;

float: left;

margin: 0px;

padding: 0px;

}

#navright {

width: 200px;

font-size: 11px;

float: right;

margin: 0px;

padding: 6px 5px 0px 0px;

}

#navright a img {

border: none;

margin: 0px;

padding: 0px;

}

#nav {

margin: 0px;

padding: 0px;

list-style: none;

}

#nav ul {

margin: 0px;

padding: 0px;

list-style: none;

}

#nav a, #nav a:visited {

background: #0e3300;

color: #FFFFFF;

display: block;

font-weight: bold;

margin: 0px;

padding: 8px 15px 8px 15px;

border-left: 1px solid #000000

}

#nav a:hover {

background: #729e51;

color: #FFFFFF;

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: #729e51;

width: 160px;

float: none;

margin: 0px;

padding: 7px 30px 7px 10px;

border-bottom: 1px solid #000000;

border-left: 1px solid #000000;

border-right: 1px solid #000000;

}

#nav li li a:hover, #nav li li a:active {

background: #0e3300;

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;

}

• Salin kode di bawah ini lalu paste di bawah widget id='Header1'. Setiap template bisa berbeda. Jika tidak ditemukan, cari yang mirip secara manual.

<div id='bg_nav'>

<div id='navleft'>
<div id='nav'>
<ul>
<li><a href='http://www.sudarma.info/'>home</a></li>
<li><a href='http://facebook.com/sudarma.sopian'>My Facebook</a></li>
<li><a href='http://templates.sudarmaster.com/'>Free Template</a></li>
<li><a href='http://blogkuring.com/'>Blogkuring</a></li>
</ul>
</div>
</div>

<div id='navright'>

<form action='http://www.sudarma.info/search' id='searchform' method='get' name='searchform'>
<input id='s' name='q' type='text' value=''/> <input id='searchsubmit' type='submit' value='Go'/> </form>

    </div>

</div><!-- akhir bg_nav -->

• Klik SAVE TEMPLATE.