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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEoU1EwpkJk7rCodeg8SkGs1GgF-1IikisLONoX6pR6aqjyNDnS01-LzKemxKpf26wnmmKMY0te09MeEKCmRTnmHxJzBLukon-hSzbLaC7wY2PmsifEFTJBUZUkp-071TiD18tfnm1TuNw/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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsJSdQe4-vGcc5C3ahz3MNNktrBzWT5-riAsfzbYyb3N7l-kUR_8Tb-cgdDaBUxguAOT2aq0KFmWxCpDfp_Vcz1A4a3RhpYw3sFt61C4KUkSfbXxmr_n0rSXFt6RNTrJ013QPdL8DAdH4K/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.