Hacktime

Que seria de la web sin este blog

Buscador interno

Posted by yaju en mayo 4, 2007

En estos ultimos dias he estado un poco ocupado porque ando en competencias de natacion… y por esa causa no he podido actualizar el blog, ahora alguien me pregunto lo siguiente:

Hay algun modo de poner un buscador interno del blog (y con opcion para buscar tambien en Google) pero que para los resultados no abra una ventana nueva de internet, sino que lo muestre en el mismo blog? (asi como se muestran los post por categorías por ejemplo).

La respuesta es la siguiente:

Nos dirigimos a Plantilla–Edicion HTML

Colocar el siguiente codigo antes del </head>

<script type=’text/javascript’>
//<![CDATA[
var search_which_one = “pm-f-h”;
function selectH() {
document.getElementById(‘li-h’).className = ‘pm-search-selected’;
document.getElementById(‘li-g’).className = ‘pm-search-unselected’;
document.getElementById(‘pm-search-h’).style.display = ‘block’;
document.getElementById(‘pm-search-g’).style.display = ‘none’;
document.getElementById(‘pm-f-h’).value = document.getElementById(search_which_one).value;
search_which_one = “pm-f-h”;
}
function selectG() {
document.getElementById(‘li-h’).className = ‘pm-search-unselected’;
document.getElementById(‘li-g’).className = ‘pm-search-selected’;
document.getElementById(‘pm-search-h’).style.display = ‘none’;
document.getElementById(‘pm-search-g’).style.display = ‘block’;
document.getElementById(‘pm-f-g’).value = document.getElementById(search_which_one).value;
search_which_one = “pm-f-g”;
}
//]]>
</script>

Ahora añadimos el siguiente CSS antes de ]]></b:skin> :


div#pm-search {margin: 0; padding: 0;}
div#pm-search ul {margin: 0; padding: 0; text-align: center;}

div#pm-search li {
/* blanquear estilos previos */
list-style-type: none;
display: inline;
cursor: pointer;
background-image: none;
text-indent: 0px;
margin: 0; padding: 0;
/* … agregar tipo de fuente, colores, etc … */
}

div#pm-search form {margin: 0; padding: 0;}

/* estilo de los vínculos de selección */
div#pm-search-h {display: block;} /* visible por defecto */
div#pm-search-g {display: none;} /* oculto por defecto */

.pm-search-selected { } /* del tipo seleccionado */
.pm-search-unselected { } /* del tipo no seleccionado */
/* … agregar tipo de fuente, colores, etc … */

.pm-input { } /* cuadro ingreso textos */
.pm-boton { } /* pseudo-botón ejecutar la búsqueda */
/* … agregar tipo de fuente, colores, etc … */

Ahora nos dirigimos a:

Plantilla–Añadir nuevo elemento de pagina–HTML/JavaScript

Añadimos lo siguiente:

<div id=”pm-search” align=”center”>

<ul>
<li id=”li-h” class=”pm-search-selected”
onclick=”selectH()”>NOMBRE TU BLOG</li>
<li id=”li-g” class=”pm-search-unselected”
onclick=”selectG()”>GOOGLE</li>
</ul>

<!– busqueda en el Blog –>
<div id=”pm-search-h” align=”center”>
<form action=”/search” method=”get”>
<input id=”pm-f-h” class=”pm-input” value=””
name=”q” size=”25″ type=”text”/>
<input class=”pm-boton” value=”BUSCAR” type=”submit”/>
</form>
</div>

<!– busqueda en Google –>
<div id=”pm-search-g” align=”center”>
<form action=”http://www.google.com.ar/search&#8221; method=”get”>
<input value=”es” name=”hl” type=”hidden”/>
<input id=”pm-f-g” class=”pm-input” value=””
name=”as_q” size=”25″ type=”text”/>
<input class=”pm-boton” value=”BUSCAR” type=”submit”/>
</form>
</div>

</div>

Guardamos Cambios y listo.

Nota: Gracias a Vagabundia y a PurpleMoggy por la ayuda en este hack.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

 
A %d blogueros les gusta esto: