Buscadores personalizados para blogger

como personalizar buscador de blogger

Hoy aprenderemos a poner un buscador algo diferente al predeterminado por blogger. Es muy sencillito (pese a que veáis un montón de códigos raros) porque os voy a guiar en todo el proceso. No os asustéis, va a aparecer mucho código pero, en realidad, es muy poquito lo que tenéis que cambiar del código original (solo las partes que veis resaltadas con color). 
Curso online: MiniWeb Máster
Resumen del curso
Esta web, donde estáis ahora mismo, es un blog de blogger modificado por mí, y en este curso te cuento todo lo que yo he hecho para transformar un blog de blogger en una web bonita, sencilla y práctica como esta. 

Inicio: 
Lo empiezas cuando tú quieras. Te apuntas y empiezas el curso.
Final:
El curso es permanente, no hay límite de tiempo.
Materiales:
Instrucciones paso a paso con código en documentos Word para que sea fácil de copiar y pegar, manual y vídeos explicativos.
Vídeos
El curso incluye 20 vídeos explicativos, más de 11 horas de información
Información:
Curso online, permanente, lo haces a tu ritmo. Necesitas internet y word. Te daré el acceso a la plataforma de cursos desde donde podrás seguir toda la formación. 
Paso 1: copiar

Copiamos todo el código que aparece aquí abajo y lo vamos a pegar en un documento Word para hacer modificaciones. He resaltado con colores las partes que podéis modificar para personalizar, un poquito, el buscador. El texto en azul indica para qué sirve cada línea que podéis modificar. 
<style>
#search-box {
position: relative;   /*no tocar*/
width: 100%;  /*tamaño del buscador. No lo tocamos*/
margin: 0;
}
#search-form { 
height: 40px;
padding-left: 10px;
border: 1px solid #999;   /*grosor de la línea que rodea a la cajita de búsqueda y color de la línea*/
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 5px;   /*si aumentamos el número conseguiremos un borde redondeado. Cuanto mayor sea el número más redondeado será el borde.*/
background-color: #fff;   /*color de la cajita donde buscamos. Te recomiendo que no lo toques y lo dejes en blanco*/
overflow: hidden;
}
#search-text {
font-size: 14px; /*tamaño de la tipografía del texto de la cajita de buscar*/
color: #ddd;  /*color de la tipografía de la cajita de buscar*/
font-family: Century Gothic,CenturyGothic,AppleGothic,sans-serif;  /*La tipografía que queremos que aparezca en la cajita de buscar*/
border-width: 0;
background: transparent; 
}
#search-box input[type="text"] {  /*cambios cuando escribimos lo que queremos buscar/
width: 90%;
padding: 11px 0 12px 1em;
font-size: 14px; /*tamaño de la tipografía del texto que escribimos en la cajita del buscador*/
font-familyCentury Gothic,CenturyGothic,AppleGothic,sans-serif;  /*La tipografía que queremos que aparezca cuando escribimos lo que queremos buscar*/
color#000000/*Color de la tipografía de la cajita donde escribimos lo que queremos buscar*/
outline: none;
}
#search-button {   /*cambios en el botón de buscar*/
position: absolute;
top: 0;
right: 0;
height: 42px;
width: 80px;
font-size: 14px;  /*tamaño de la tipografía del botón de buscar*/
font-familyCentury Gothic,CenturyGothic,AppleGothic,sans-serif;  /*La tipografía que queremos que aparezca en el botón de buscar*/
color: #fff/*Color de la tipografía del botón de buscar*/
text-align: center;
line-height: 42px;
border-width: 0;
background-color: #4d90fe;  /*Color del fondo del botón de buscar*/
-webkit-border-radius: 0px 5px 5px 0px;  /*el primer número es para redondear el borde superior izquierdo, el segundo para el borde superior derecho, 3º para borde inferior derecho, 4º para borde inferior izquierdo. Si no quieres que esté redondeado, ponemos 0 */
-moz-border-radius: 0px 0px 0px 0px;
cursor: pointer;
}
</style>
<div id='search-box'>
<form action='/search' id='search-form' method='get' target='_top'>
<input id='search-text' name='q' placeholder='Search TechFrost' type='text'/>
<button id='search-button' type='submit'><span>Search</span>
</button>

</form>
</div>
Paso 2:
Ahora que tenemos el código pegado en un documento Word, vamos a hacer algunos cambios. 
Cambios básicos:
Vamos a hacer los cambios básicos e imprescindibles para este buscador. Después, si queréis, podréis seguir modificando código siguiendo las instrucciones que os he dejado un poquito más abajo. Tened cuidado de no borrar ningún guion ni signo, si lo hacéis no os funcionará. Todos estos cambios los vamos a hacer en el documento Word donde hemos pegado, completamente, el código que os he dejado arriba. Cuando hayamos hecho todas las modificaciones colocaremos el buscador en su lugar dentro de nuestro blog.

Search TechFrost:
Este es el texto que aparece dentro de la cajita del buscador. Podemos ponerlo que queramos. Escribiremos dentro de las comillas, por ejemplo, ¿Qué quieres buscar?

Search:
Este es el texto del botón. Lo podemos cambiar por Buscar.

Color del fondo del botón buscar
El siguiente cambio básico que os recomiendo es modificar el color de fondo del botón de buscar. Para cambiarlo deberemos cambiar el código de color. Para poder elegir un color, os recomiendo que entréis en esta página. Desde aquí podrás elegir el color que queramos. Copiaremos ese código y lo pegaremos en su lugar.

Otros cambios 
Además de la modificación básica, si queréis, podéis hacer más cambios. Al lado de cada código, os he escrito qué significa cada uno de ellos, por lo que os voy a contar cómo cambiar los colores de las tipografías y fondos, el grosor y el estilo de la tipografía.

font-family:
Se refiere al estilo de la tipografía que queremos. Yo os he dejado una muy sencilla, pero podéis modificarla. Para poder hacerlo, entrad en esta web. En ella encontraréis distintas tipografías. Elegid la que queráis haciendo clic sobre ella. 

En la parte inferior derecha aparecerá el código de esa tipografía. Copiaremos el texto que aparece después de font family y lo pegaremos en su lugar en nuestro documento WordEste es el código que nos aparecerá. Lo resaltado en negrita será lo que copiemos y peguemos, incluido el punto y coma.
/* This text is in Century Gothic */ .
class {
font-family: Century Gothic,CenturyGothic,AppleGothic,sans-serif;
}
font-size:
Es el tamaño de la tipografía. Podemos poner valores entre 10px y 14px. En realidad podéis poner el tamaño que queráis, pero mi recomendación para que os quede bien y se lea bien, es poner 10px, 11px, 12px, 13px o 14px. El valor que elijáis, ponedlo igual en todas partes para que quede homogéneo. 

Los colores
En cuanto a colores vais a encontrar dos nombres "background-color", que hace referencia a colores de fondo; y "color" que se refiere al color de la tipografía. La modificación en ambos casos es igual. Para hacer los cambios de color iremos a esta página, elegiremos el color, lo copiaremos y lo pegaremos en su lugar. No os olvidéis de la "#" para que todo funcione bien.
Paso 3:

Cuando hayamos hecho todos los cambios que queramos, copiaremos todo el código de nuestro documento Word.
1. Entramos en Blogger y vamos a diseño.
2. Añadimos un Gadget de HTML en la parte del blog que nosotros queramos.
3. Pegamos el código que acabamos de copiar y guardamos.
4. Refrescamos nuestro blog para ver el resultado final. Si nos gusta, perfecto. Lo tenemos. Si no nos gusta, volveremos al documento Word, haremos los cambios que necesitemos y volveremos a repetir los pasos: copiar, pegar en el gadget HTML y guardar.
Cursos papelería
CURSO PAPELERÍA PARA ORGANIZARTE
Diseña toda la papelería que necesitas para organizarte: planificadores, menús, horarios y mucho más.
más info
PACK PROFES FETÉN
Incluye el curso de apuntes flamantes, el curso de presentaciones, curso de material docente y la clase de unidades didácticas y programaciones.
más info
PACK ESTUDIANTES CUM LAUDE
Incluye el curso de apuntes flamantes, el curso de presentaciones. Perfecto para estudiantes y opositores.
más info
CURSO TUS APUNTES FLAMANTES
Aprende a preparar tus apuntes de una forma sencilla, práctica y significativa. Usaremos Word y Power Point.
más info
CURSO DISEÑA TU MATERIAL DOCENTE
Aprende a diseñar material para tu aula, para tu organización de profe, cuadernos de profe, actividades, unidades didácticas y mucho más.
más info
CURSO DISEÑO DE PACKAGING
Diseña con Power Point tu packaging: tarjetas, kits de fiesta, etiquetas, menús, meseros. Para tus fiestas, para tu empresa.
más info
CLASE UNIDADES DIDÁCTICAS Y PROGRAMACIONES
Clase para diseñar y maquetar tus unidades didácticas y programaciones. Además de plantillas editables, te enseñaré a crear las tuyas y adaptar las mías a lo que tú necesites. 
más info
CLASE EBOOKS, GUÍAS Y CATÁLOGOS
Aprende a diseñar y maquetar ebooks, cursos online, manuales, guías, catálogos, con Power Point. 
más info
PACK DISEÑA TU ORDEN
Incluye el curso para diseñar papelería para y el curso para diseñar e imprimir tu agenda.
más info
PACK DISEÑA PAPELERÍA
El pack de cursos para diseñar papelería para organizarte y todo el packaging que tú quieras.
más info
CURSO DISEÑA TU AGENDA
Aprende a diseñar e imprimir tu agenda perfecta. El curso incluye decenas de plantillas editables y vídeos.
más info
Taller infografías
El curso para aprender a diseñar infografías con Power Point
más info
Pack Opositores docentes
Incluye el curso de apuntes flamantes y la clase de unidades didácticas y programaciones
más info
Pack apuntes e infografías
Pack formado por el curso de apuntes flamantes y el taller de infografías 
más info
Megapack de cursos
Elige los 5 cursos que tú quieras y una clase de regalo
más info
Tus datos serán tratados de acuerdo a la política de privacidad,. Yo, Maite, soy la que te enviará toda la información pero le pido ayuda a MadMimi. No serán cedidos a terceros, ni utilizados para otros fines que no sean los expuestos anteriormente. Si lo deseas, podrás darte de baja y no volveré a utilizar tus datos. Y, para ejercer cualquier derecho que tengas, escríbeme a hola@creativemindly.com

Compártelo

Otros posts intersantes: