Calificación:
  • 0 voto(s) - 0 Media
  • 1
  • 2
  • 3
  • 4
  • 5
TUTORIAL BLOGGER: CÓMO PONER UN BUSCADOR EN LA BARRA SUPERIOR
#1
Lo primero de todo, es recordaros que este tuto es continuación de este otro, así que si os suena a chino ya sabéis donde tenéis que mirar primero Guiño

PRIMERA PARTE: AÑADIR EL HTML
Recordad que teníamos que añadir en nuestra plantilla HTML algo como esto:

<div id='barra-superior'>
<div id='menu'>
<ul>
<li><a href='URL 1'>Nombre 1</a></li>
<li><a href='URL 2'>Nombre 2</a></li>
<li><a href='URL RED SOCIAL 1'><span class='socicon'>Nombre red social 1</span></a></li>
</ul>
</div>
</div>

Pues bien, ahora vamos a añadir "un li" más, que es tal que así:

<div id='buscar-top'><form action='/search' id='searchthis' method='get' style='display: inline;'>
<input class='search-box' name='q' placeholder='BUSCAR' size='30' type='text'/>
</form></div>

Donde podéis cambiar el texto que está dentro de la cajita reemplazando lo que está en verde.

De forma que nuestro menú quedaría así:

<div id='barra-superior'>
<div id='menu'>
<ul>

<li><div id='buscar-top'><form action='/search' id='searchthis' method='get' style='display: inline;'>
<input class='search-box' name='q' placeholder='BUSCAR' size='30' type='text'/>
</form></div></li>
<li><a href='URL 1'>Nombre 1</a></li>
<li><a href='URL 2'>Nombre 2</a></li>
<li><a href='URL RED SOCIAL 1'><span class='socicon'>Nombre red social 1</span></a></li>

</ul>
</div>
</div>


Por supuesto, si queréis tener el buscador en la derecha en vez de la izquierda, "el li" lo pondríamos al final Guiño


SEGUNDA PARTE: AÑADIR EL CSS

Ahora cuando os metáis al blog, veréis que queda descolocado y feo, para que esto no ocurra, vamos a añadir un poquito de CSS (Plantilla → Personalizar → Avanzado → Añadir CSS):

.search-box{ /*Para cambiar la apariencia de la cajita*/
width:75%; /*Tamaño de la caja entera*/
text-align:center;
padding:2px 0; /*Altura de cajita*/
color:#333333; /*Color de las letras cuando escriba el usuario*/
border:1px solid #cccccc; /*Tamaño, estilo y color del borde, si no queremos borde borrar la línea*/
background:#ffffff; /*Color de fondo*/
font: normal normal 11px Lato; /*Tamaño y tipografia de la palabra BUSCAR (o la que hayas escrito)*/
border-radius:2px; /*Bordes redondeados, si no los quieres, borrar esta línea*/
}

#buscar-top{ /*Para colocarla bien dentro de nuestra barra*/
margin-top:6px; /*Variar para colocarlo bien de altura*/
margin-right:170px; /*Variar para colocarlo bien a lo ancho*/

}

La primera parte no necesita explicación Guiño Pero para la segunda os voy a decir alguna cosilla:
• Para colocarlo bien de altura: con ese valor yo creo que a todo el mundo le quedará bien, pero si no es así, aumentando este valor lo bajaréis más abajo y disminuyéndolo (puede tomar valores negativos) lo acercaremos más al tope de la página por arriba

• A lo ancho: esto ya es personal de cada blog, si lo vais aumentando se aproximará más y más a la izquierda, y al contrario, disminuyéndolo más a la derecha.
Nota: si habéis decidido poner el buscador a la derecha, seguramente tengáis que usar un valor negativo para esta última línea si lo queréis llevar muy a la derecha Guiño


Posibles temas similares...
Tema Autor Respuestas Vistas Último mensaje
  Solucionado: Ayuda! Dominio Blogger NixonJ1 17 1,237 23-01-2017, 07:35 PM
Último mensaje: Vicen
  Ayuda! Dominio Blogger NixonJ1 1 425 22-01-2017, 04:19 PM
Último mensaje: Vicen
Pregunta Blogger Vs Wordpress oswaldo 14 1,161 02-01-2017, 11:35 PM
Último mensaje: onspot
  GRAFICAS DE BARRA Y LINEAS EN JAVASCRIPT (LIBRERIA CHART.JS) khristia 4 757 01-12-2016, 10:11 PM
Último mensaje: zeuz
  TUTORIAL BLOGGER: ENMARCAR EL BLOG inguzca 0 1,174 07-02-2016, 09:04 PM
Último mensaje: inguzca
  DOMINGOS MOLONES: COLABORACIÓN CON VELVET CAT (FREEBIES + TUTORIAL BLOGGER) inguzca 0 421 07-02-2016, 09:03 PM
Último mensaje: inguzca
  FREEBIES: BOTONES DE SUBIR PARA NUESTRO BLOG (Y TUTORIAL BLOGGER) inguzca 0 600 07-02-2016, 08:58 PM
Último mensaje: inguzca
  TUTORIAL BLOGGER: PERSONALIZAR EL MENÚ DE PÁGINAS inguzca 0 486 07-02-2016, 08:57 PM
Último mensaje: inguzca
  TUTORIAL BLOGGER: CÓMO HACER UN MENÚ POR CATEGORÍAS inguzca 0 408 07-02-2016, 08:55 PM
Último mensaje: inguzca
  TUTORIAL BLOGGER: CÓMO PONER UNA BARRA SUPERIOR CON MENÚ DESPLEGABLE E ICONOS SOCIALE inguzca 0 2,350 07-02-2016, 08:52 PM
Último mensaje: inguzca



Usuarios navegando en este tema: 1 invitado(s)