Menus feitos em forma de tabela com buscador e descrição

Dois modelos de menu para colocar no HTML/Javascript e arrastar para onde quiser no blogger.



Modelo 1

Home Facebook Twitter Feed Perfil Email Etc

*Código em rosa represnta as cores do menu. Troque-as escolhendo cores AQUI

<style type="text/css">
<!--
.table1 { color:black; background-color: #cc0000; }
.table2 { color:red; background-color: #ffffff; }
//-->
</style>

<table align='right' bgcolor='#808080' border='3' cellpadding='0' cellspacing="5">
<tr>

<td>
<table align='right' border='1' cellpadding='6' cellspacing="3">
<tr>

<td class="table1" onmouseover="this.className='table2';" onmouseout="this.className='table1';"><a href='endereço de seu blog' title='página inicial'>Home</a></td>

<td class="table1" onmouseover="this.className='table2';" onmouseout="this.className='table1';"><a href='endereço do facebook' title='encontre-me no facebook'>Facebook</a></td>

<td class="table1" onmouseover="this.className='table2';" onmouseout="this.className='table1';"><a href='endereço do twitter' title='siga-me'>Twitter</a></td>

<td class="table1" onmouseover="this.className='table2';" onmouseout="this.className='table1';"><a href='endereço de seu feed' title='assine e receba as atualizações por email'>Feed</a></td>

<td class="table1" onmouseover="this.className='table2';" onmouseout="this.className='table1';"><a href='endereço do perfil' title='saiba mais a meu respeito'>Perfil</a></td>

<td class="table1" onmouseover="this.className='table2';" onmouseout="this.className='table1';"><a href='mailto: endereço de seu email' title='entre em contato'>Email</a></td>

<td class="table1" onmouseover="this.className='table2';" onmouseout="this.className='table1';"><a href='endereço do que quiser' title='etc..'>Etc</a></td>


<td align='right'>
<script type='text/javascript'>
function clickclear(thisfield, defaulttext) {
if (thisfield.value == defaulttext) {
thisfield.value = &quot;&quot;;
}
}
function clickrecall(thisfield, defaulttext) {
if (thisfield.value == &quot;&quot;) {
thisfield.value = defaulttext;
}
}
</script>
<form action='/search' id='searchthis' method='get' style='margin:0;padding:0;display:inline;'><input id="search-box" name="q" onblur="clickrecall(this,&amp;apos;Pesquisar neste site&amp;apos;)" onclick="clickclear(this, &amp;apos;Pesquisar neste site&amp;apos;)" size="23" style="color: #999;" type="text" value="Pesquisar neste site" /> <input id="search-btn" type="submit" value="Pesquisar" /></form>
</td>
</tr>
</table></td></tr></table>

Modelo 2

HOME | FEED | EMAIL | PERFIL | ETC

<table align='right' border='0'>
<tr>
<td align='center'>
<script type='text/javascript'>
function clickclear(thisfield, defaulttext) {
if (thisfield.value == defaulttext) {
thisfield.value = &quot;&quot;;
}
}
function clickrecall(thisfield, defaulttext) {
if (thisfield.value == &quot;&quot;) {
thisfield.value = defaulttext;
}
}
</script>
<form action='/search' id='searchthis' method='get' style='margin:0;padding:0;display:inline;'><input id="search-box" name="q" onblur="clickrecall(this,&amp;apos;Pesquisar neste site&amp;apos;)" onclick="clickclear(this, &amp;apos;Pesquisar neste site&amp;apos;)" size="23" style="color: #999;" type="text" value="Pesquisar neste site" /> <input id="search-btn" type="submit" value="Pesquisar" /></form>
</td></tr>
<tr>
<td style='padding-top:1em;'>
<a href='aqui o endereço de seu blog' title='página inicial'>HOME</a> |
<a href='aqui o endereço de seu feed' title='assine meu feed'>FEED</a> |
<a href='mailto:endereço de seu email' title='contate-me por email'>EMAIL</a> |
<a href='endereço de seu perfil' title='saiba sobre mim'>PERFIL</a> |
 <a href='endereço de etc' title='bla bla bla 5'>ETC</a>
</td></tr></table>