Buscador de Taringa! para Blogger



(Tutorial a petición de Felipe, Dryken)


 Lo más distintivo de un blog ha sido siempre su plantilla (y, obviamente, su contenido). Para seguir manteniendo nuestro blog con una buena plantilla, hoy traigo un bonito, curioso, y NO fácil de encontrar, truco. Se trata de el buscador de Taringa! Ya podéis observar el resultado arriba, en la cabecera del blog. Sin nada más que decir, comencemos;

El primer paso es ir a tu escritorio Blogger, seleccionar en "Diseño" y luego "Edición de HTML", y hacer clic en "Expandir plantillas de artilugios". Luego, buscamos con el buscador de palabras (Ctrl + F) el siguiente código:

<div id='header-wrapper'>


(remplazamos "header-wraper" por el nombre de la ID de nuestra cabecera, o por el ID de la sección dónde queremos colocar el buscador)


Justo debajo del código deseado, pegamos:





<div id='searchTop'>
<form action='/search' id='searchform' method='get'>
<input id='s' name='q' placeholder='Buscar...' type='text' value=''/>


<input id='searchsubmit' type='submit' value=''/>
</form>
</div>


Si pulsamos "Vista Previa" nos daremos cuenta de que el buscador, no se parece en nada al de Taringa!, no tiene color, ni está centrado... Para eso, necesitamos un poco de CSS.


Antes de ]]></b:skin> pegamos el siguiente código:



#searchTop {
width: 235px;
position: absolute;
right: 0;
top: 24px;
}
#search-bottom {
width: 235px;
float: right;
}
#searchform input {
width: 183px; height: 15px;
margin: 0; padding: 10px;
background: transparent url("http://3.bp.blogspot.com/-1h474Ye4OlA/TouzjDyWI3I/AAAAAAAAAVQ/srBxsj2iCcI/s1600/searchinput.png") no-repeat top left;
border: none;
font-weight: normal;
color: #333;
font-family: Helvetica,Arial;
float: left;
font-size: 14px;
}
#searchform input#searchsubmit {
display: block;
width: 32px; height: 35px;
margin: 0; padding: 0;
background: transparent url("http://2.bp.blogspot.com/-LIVeM9rys7U/TouyHfsd2aI/AAAAAAAAAVM/hVgbbyPj4mI/s1600/searchbtn.png") no-repeat top left;
float: right;
cursor: po;
}
#searchform input#searchsubmit:hover {
background-position:  -32px 0;
}
#searchform input#searchsubmit:active {
background-position:  -64px 0;
}


Si tenéis alguna duda, no funciona en vuestro blog, o simplemente queréis decir "algo" dejad un comentario. 



ESCRITO POR WitCho

¡Hola! Mi nombre es Juan González y tengo 20 años. He fundado este sitio para ayudar a todas las personas que se inician en el mundo del Blogger. Aquí encontrarás diversos aportes, herramientas, efectos (jQuery), trucos y JSON, para que tu blog vaya mejorando día a día, así de fácil.



Si este artículo te gustó, por favor selecciona alguno de los siguientes servicios para compartirlo:



  • Vemos otro post cualquiera por si le encontraras alguna utilidad?



  • ¿Quieres seguir obteniendo trucos iguales que este? Entonces, suscríbete a nuestro RSS Feed.

    Por favor, ingresa tu correo electrónico

    ¡Mira que fácil! No has tardado nada, y a partir de ahora, podrás recibir tods nuestras entradas por correo.








    Antes de realizar ningún cambio, te recomendamos que "respaldes" la plantilla, para evitar, así, futuros problemas. Quizá, en algún momento te sirva de ayuda en algún... apreto


    Ir al centro | Ir arriba | Ir abajo



































    Logo de Android Honeycomb creado con propiedades de CSS3 por Manz (Emezeta blog), y después modificado por Juan