Revista Cine

Cómo poner un buscador personalizado en Blogger

Publicado el 01 septiembre 2016 por Susana Fernández @adarvephtcllage
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 dicefont-family: "Courier New";(fuente: http://www.creativemindly.com/2013/02/buscadores-personalizados-para-blogger.html )

Volver a la Portada de Logo Paperblog