Páginas

Cómo poner un buscador personalizado en Blogger

Cómo poner un buscador personalizado en Blogger


El método más sencillo es este: añadir un gadget de HTML / javascript en la pantalla de diseño el blog.
El texto que tendremos que añadir es este



<style>
#search-box {
    position: relative;
    width: 100%;
    margin: 0;
}
#search-form {
    height: 20px;
    border: 1px solid #ababab;
    -webkit-border-radius: 1px;
    -moz-border-radius: 1px;
    border-radius: 1px;
    background-color: #ffffff;
    overflow: hidden;
}
#search-text {
    font-family: "Courier New"; 
    font-size: 14px;
    color: #222222;
    border-width: 0;
    background: transparent;
}
#search-box input[type="text"] {
    width: 100%;
    padding: 12px 0 12px 1em;
    color: #222222;
    outline: none;
}
#search-button {
    position: absolute;
    top: 0;
    right: 0;
    height: 22px;
    width: 80px;
    font-family: "Courier New";
    font-size: 14px;
    color: #222222;
    text-align: center;
    line-height: 20px;
    border-width: 0;
    background-color: #ebebeb;
    -webkit-border-radius: 1px 1px 1px 1px;
    -moz-border-radius: 1px 1px 1px 1px;
    border-radius: 1px 1px 1px 1px;
    cursor: pointer;
}
</style>
<div id='search-box'>
  <form action='/search' id='search-form' method='get' target='_top'>
    <input id='search-text' name='q' placeholder='' type='text'/>
    <button id='search-button' type='submit'><span>BUSCAR</span></button>
  </form>
</div>


¿CÓMO PERSONALIZAR ESTE GADGET DE BÚSQUEDA?
Pues simplemente teniendo en cuenta que width 100% sirve para que el buscador ocupe todo el ancho de la sidebar.

La "search-form" es la casilla donde escribir el texto a buscar, y el "search-button" es el botón para iniciar la búsqueda. Ambos podemos personalizarlos: cambiando los colores de fondo en sus respectivos "background-color", modificando la altura de las casillas cambiando el número de píxeles que pongamos en sus respectivos "height" o haciendo que las esquinas sean más o menos redondeadas variando el número de "border-radius".

También podemos cambiar el grosor, el color y la forma de dichos bordes variando los valores en border="1px" solid #ababab y así, si por ejemplo quisiéramos poner un borde de puntos, en lugar de solid escribiríamos dotted. Para cambiar el color, obviamente, podríamos un código html diferente después de #


Por último, para cambiar el tipo de letra del cuadro de búsqueda, tendríamos que sustituir el nombre de la fuente donde dice
font-family: "Courier New";



(fuente: http://www.creativemindly.com/2013/02/buscadores-personalizados-para-blogger.html )