Traductor y buscador en menú del header

Añadir un menú en el header es algo sencillo, pensé que personalizarlo con la herramienta de fuentes y colores lo haría aún más sencillo y así fue.

A petición de Javi vamos a añadir a ese menú un traductor con imagen de banderitas.

Primeramente añadimos el menú siguiendo los pasos de esta entrada, una vez lo tenemos añadimos el traductor.

Buscamos en plantilla Edición de HTML el lugar de los enlaces y añadimos lo que está en negrita.
ver código

<div class="menu">

<ul>

<li><a href="Url de la página" title="Título">Texto</a></li>

<li><a href="Url de la página" title="Título">Texto</a></li>

<li><a href="Url de la página" title="Título">Texto</a></li>

<li><a href="Url de la página" title="Título">Texto</a></li>

<li><a href="Url de la página" title="Título">Texto</a></li>

<li><a href='url-página-traductor1'>

<img alt='texto-idioma1' src='url-imagen-banderita1' title='texto-idioma1'/></a><a href='url-página-traductor2'><img alt='texto-idioma2' src='url-imagen-banderita2' title=' texto-idioma2'/></a></li>

</ul>

</div>

Para enlazar las imágenes nos dirigimos a Google traductor y allí introducimos la url de nuestro blog, escogemos por ejemplo español-inglés, marcamos en Traducir y copiamos la url de la barra del navegador. Si tenemos problemas con la url porque es muy extensa podemos acortarla en http://liurl.com/

Esa url es lo que pegaremos en lugar de url-página--traductor1 lo haremos así con cada uno de los idiomas.

Añadimos ahora el buscador justo después del traductor.Lo haremos de la siguiente forma:
ver código

<li><form action='http://search.blogger.com/' name='b-search' target='_blank'><input class='b-query' name='bl_url' type='hidden' value='gemablog-.blogspot.com/'/>

<input id='b-query' name='as_q' onblur='if (this.value == &quot;&quot;) this.value = &quot;Buscar...&quot;;' onfocus='if (this.value == &quot;Buscar...&quot;) this.value = &quot;&quot;;' type='text' value='Buscar...'/>

</form></li>

Donde gemablog-.blogspot.com/ lo sustituimos por la url de vuestro blog (sin http)
Con el traductor y el buscador nos resultaría más o menos así:

ver código

<div class="menu">

<ul>

<li><a href="Url de la página" title="Título">Texto</a></li>

<li><a href="Url de la página" title="Título">Texto</a></li>

<li><a href="Url de la página" title="Título">Texto</a></li>

<li><a href="Url de la página" title="Título">Texto</a></li>

<li><a href="Url de la página" title="Título">Texto</a></li>

<li><a href='url-página-traductor1'>

<img alt='texto-idioma1' src='url-imagen-banderita1' title='texto-idioma1'/></a><a href='url-página-traductor2'><img alt='texto-idioma2' src='url-imagen-banderita2' title=' texto-idioma2'/></a></li>

<li><form action='http://search.blogger.com/' name='b-search' target='_blank'><input class='b-query' name='bl_url' type='hidden' value='gemablog-.blogspot.com/'/>

<input id='b-query' name='as_q' onblur='if (this.value == &quot;&quot;) this.value = &quot;Buscar...&quot;;' onfocus='if (this.value == &quot;Buscar...&quot;) this.value = &quot;&quot;;' type='text' value='Buscar...'/>

</form></li>

</ul>

</div>

Para que el buscador luzca le añadimos unos estilos donde incluiremos una imagen de fondo, los añadimos justo antes de ]]></b:skin>

#b-query {

background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpUsS_wdG7XXPtHkTOEVDP6Q_5pIIH80GDUqLJsuE9aX0jB07eswgHAkPFBJEG8jVwrwbyOnacc9FUIhXOjkcPyQAnc0775nEQT4kXxtUz0Q6KVM723hf71Yea8uBRyNgwf9688qgn0IU/s320/search.gif) no-repeat scroll 0 0;border:medium none;

color:#000;font-family:Georgia,serif;font-size:15px;

width:210px;

float:right;

margin-right:16px;

margin-bottom:10px;

}

Al añadir una imagen, la de este buscador o cualquier otro es posible que tengamos que dar más altura al menú en:

.menu {

width:660px;

height:27px; /* Probar con más altura */

background: $menubgColor;

border: 1px solid $menumainBorderColor;

}