Partiendo del buscador que ya tenemos en nuestro blog vamos a personalizarlo como más nos guste para adaptarlo a la estética del blog o, simplemente, para hacerlo más divertido. :-)
El código que uso para el buscador del Escaparate es este, hay que ponerlo en un nuevo elemento html-javascript:
<form id="searchthis" action="/search" style="display:inline;" method="get"><input id="search-box" name="q" type="text"/><input id="search-btn" value="Buscar" type="submit"/></form>
<input id="search-btn" value="Buscar" type="submit"/></form>
por esta otra:
<input border="0" alt="Buscar" src="http://img234.imageshack.us/img234/5551/magnifyingglassec3.gif" type="image"/>
</form>
<form id="searchthis" action="/search" style="display:inline;" method="get"><input id="search-box" name="q" type="text"/><input id="search-btn" value="Buscar" type="submit"/></form>
Añadimos en el CSS de nuestra plantilla estas líneas de código, por ejemplo, antes de ]]><b:skin>:
.searchBox{
background: #FFFF99;
background-image:url('http://img234.imageshack.us/img234/3756/emoticonsmilenz6.png');
background-repeat:no-repeat;
padding-left:20px;
border: solid 2px;
border-color: #000000;
}
En estas líneas de código, será donde podremos hacer todos los cambios posteriores.
Ahora añadimos class="searchBox" en el código de nuestro buscador, por ejemplo detrás de type="text":
<form id="searchthis" action="/search" style="display:inline;" method="get"><input id="search-box" name="q" type="text"class="searchBox"/><input id="search-btn" value="Buscar" type="submit"/></form>
Esto hace que nuestro buscador automáticamente se vea como le hemos indicado en el CSS, así:
Modificaciones:
Aquí se cambia el color de la caja de búsqueda:
background: #FFFF99;
En esta línea podemos cambiar la url de la imagen por la que queramos usar.
background-image:url('http://img234.imageshack.us/img234/3756/emoticonsmilenz6.png');
Aquí modificamos el color y ancho del borde de la caja, cuanto mayor sea el número de px, más ancho será el borde y viceversa.
border: solid 2px;
border-color: #000000;
¡Suerte! ;-)
Buscador interno personalizado
Autoroll de Criteo
Hace un par de días recibía un email recomendándome un nuevo widget para el blog, me pareció una idea interesante, así que he decidido compartirlo en El Escaparate.
¿Qué es el Autoroll exactamente?
Autoroll es un blogroll de sus visitantes y lectores. Es un widget que muestra y anuncia los enlaces de los bitácoras que tus lectores suelen visitar.
Es muy sencillo y tendrás una visibilidad grande. Sirve para aumentar el tráfico y el número de lectores habituales y así crear una comunidad de blogueros que comparten las mismas aficiones. Dicho de otra manera, proponemos una lista de bitácoras con la que tienes rasgos comunes ( cultura informática, etc…) Algo como una sugerencia de sitios de alto interés para ti…
El AutoRoll te permitirá promocionar de manera sencilla tu bitácora dentro de la blogesfera.
¿Cómo funciona?
Seguimos el número de visitas de cada lector único que ha instalado el Autoroll. Por tanto, cuánto más visitas hace más afición tiene por este bitácora.
¿Cuales son las ventajas para ti?
Primero, vas a proponer a tus lectores un blogroll muy entretenido porque su contenido se apoyan en otros lectores con las mismas aficiones y costumbres de lectura. Además, atraerá un tráfico sumamente calificado hacia tu bitácora. En efecto, ya que otros bitácoras similares van a mostrar tu bitácora en su Autoroll, permitiría atraer nuevos lectores con un fuerte afición por el tema de tu bitácora.
Es gratis y rápido de descargar : 1 minuto basta, puedes descargarlo directamente en la página de Criteo.
Tienes la posibilidad de escoger sus colores, tamaño, tu imagen para mostrar en otros autorroll, número de links a mostrar, si los quieres mostrar con avatar o no, e incluso si quieres abrir los links en página aparte, con la facilidad de ir viendo como quedaría en "vista previa".
Una vez decidido el estilo del Autoroll, te proporcionan un sencillo código para pegar en un nuevo elemento HTML-Javascript.
Una vez instalado, hay que esperar unos días para que la aplicación empiece su trabajo.
Aqui tienes una presentación práctica del Autoroll de Criteo.
Además, puedes echar un vistazo al blog de la Uniòn de bloggers hispanos para ver lo que es un Autoroll ya instalado,(mientras el mio empieza a trabajar), está en la sidebar al final de la página.
Abrir los links externos en página nueva
Con este script conseguiremos que los links externos de nuestro blog, es decir, los que llevan a otras páginas fuera del blog, se abran en una ventana aparte.
Justo encima colocamos este script:
<script language='javascript'>
var dominio = "www.tublog.blogspot.com";
var dominio1 = "tublog.blogspot.com";
var script = "javascript:void(0)";
var imagenesblogger0 = "bp0.blogger.com";
var imagenesblogger1 = "bp1.blogger.com";
var imagenesblogger2 = "bp2.blogger.com";
var imagenesblogger3 = "bp3.blogger.com";
var blogger1 = "www.blogger.com";
var blogger2 = "www2.blogger.com";
var publicidad = "pagead2.googlesyndication.com";
function LinksExternos() {
var Externo;
if (document.getElementsByTagName('a')) {
for (var i = 0; (Externo = document.getElementsByTagName('a')[i]); i++) {
if (
Externo.href.indexOf(dominio) == -1 &&
Externo.href.indexOf(dominio1) == -1 &&
Externo.href.indexOf(script) == -1 &&
Externo.href.indexOf(imagenesblogger0) == -1 &&
Externo.href.indexOf(imagenesblogger1) == -1 &&
Externo.href.indexOf(imagenesblogger2) == -1 &&
Externo.href.indexOf(imagenesblogger3) == -1 &&
Externo.href.indexOf(publicidad) == -1 &&
Externo.href.indexOf(blogger1) == -1 &&
Externo.href.indexOf(blogger2) == -1
)
{
Externo.setAttribute('target', '_blank');
//Externo.setAttribute('class', 'linkexterno');
}
}
}
}
window.onload = function() {
LinksExternos();
}
</script>
Sustituimos en el código donde dice: "www.tublog.blogspot.com" y "tublog.blogspot.com" por la dirección de nuestro blog, fijándonos que va con y sin www:// respectivamente.Visto en: Blog and Web
Nota
Si tenéis aplicado el menú en forma de pestañas, Blogger los interpreta como links externos y los abre en ventana aparte.
Si el código no os funciona tal cual lo copiáis de esta entrada, probad pegándolo antes en el blog de notas... Gracias a Graciela Vemtimiglia.
Iconos feed
Leonel me solicita a través de un email, si conozco la dirección de alguna web para descargar gratuitamente iconos para resaltar sus feeds.
Me he acordado de que en Zeus Box Studio tienen un pack de 34 iconos para feed en formato png y con dos tamaños: 32x32 pixeles y 16x16 pixeles, que están bastante bien...
Descargar el pack
Visitas en tiempo real con un botón
En whos.amung.us te proporcionan el código para colocar un botón en tu blog que muestra las visitas en tiempo real, sin necesidad de registrarte.
<a href="http://whos.amung.us/show/45gsm7xo"><img src="http://whos.amung.us/cwidget/45gsm7xo/00adef000000.png" alt="hit counter" width="81" height="29" border="0" /></a>
Si queréis el botón de otro color, en la página de whos.amung también podéis escoger el color de fondo del botón y de los números del contador.
Hacer que una imagen funcione como link
Me lo han preguntado varias veces y es muy sencillo de conseguir.
En primer lugar hemos de obtener la url de la imagen que funcionará como link, para ello la subimos a un alojamiento de imágenes o al propio Blogger.
Una vez obtenida la url de nuestra imagen, la colocamos en este sencillo código, donde dice URL_DE_IMAGEN y en el mismo código, colocamos la página que queremos linkar, es decir, la dirección web que se abrirá al pinchar sobre la imagen, en URL_DE_WEB:
<a href="URL_DE_WEB"><img src="URL_DE_IMAGEN"></a>
Ejemplo
<a href="http://eternamentecabreada.blogspot.com">
<img src="http://img373.imageshack.us/img373/4449/89653287xy8.png"></a>
Para que el enlace al pinchar en la imagen se abra en página nueva, añadiremos el target="_blank" al final del enlace:
<a href="URL_DE_WEB" target="_blank"><img src="URL_DE_IMAGEN"></a>
Ultimos comentarios personalizados (script)
Anteriormente había publicado una entrada para, mediante un script, mostrar en el blog las últimas entradas de una forma un poco más personalizada.
Este es un script que hace casi la misma función, pero con los comentarios. Tendremos la posibilidad de ver en la sidebar los últimos comentarios de nuestro blog, con la fecha de publicación, el nombre del autor del comentario, el título de la entrada donde a dejado el comentario, y parte del comentario seguido de "leer más".
Copiamos y pegamos este código en un nuevo elemento HTML-Javascript en la parte "editar" de nuestra plantilla:
<script style="text/javascript" src="http://lejaniaimposible.googlepages.com/comentarios.recientes.js"></script>
<script style="text/javascript">
var numcomments = 10;
var showcommentdate = true;
var showposttitle = true;
var numchars = 50;
var standardstyling = true;
</script>
<script src="URL_DEL_BLOG/feeds/comments/default?alt=json-in-script&
callback=showrecentcomments"></script>
El script colocado tal cual mostrará los comentarios así:
Para adaptarlo a nuestras necesidades, hemos de modificar algunos parámetros:
numcomments: Aquí podemos modificar el número de comentarios a mostrar.
showcommentdate: Aquí se muestra la fecha del comentario. Si lo queremos con fecha dejaremos true, si no vamos a mostrarla, pondremos false.
showposttitle: Aquí se mostrará el titulo de la entrada. Al igual que en la fecha pondremos true o false, según queramos mostrarlo o no.
numchars: Aquí podemos escoger el número de palabras que mostraremos de cada comentario.
standardstyling: Aquí se escoge el estilo del texto y la presentación. Podéis probar con true o false, para ver la diferencia, aunque según mi opinión queda mejor con true.
Por último, no se os olvide cambiar URL_DEL_BLOG por la dirección de vuestro blog.
Nota
Aunque el script ha sido traducido al español, no interpreta las eñes como tal, sino que las muestra como enes: diseño= diseno.
Actualización:
Dado que Google Pages ha anunciado hace un tiempo que llegará a cerrar, lo mejor será que cada uno se descargue el script a su PC y lo suba a un alojamiento adecuado.
Una vez obtenida la nueva url, la colocamos en el código en sustitución de esta otra:
http://lejaniaimposible.googlepages.com/comentarios.recientes.js