07 marzo 2008

Imágenes de cabecera para blogs


Aunque no lo parezca, no he desaparecido... jaja

Navegando por la red he encontrado una página que ofrece 45 imágenes de cabecera gratuitas para blogs (y webs, imagino), creadas por diseñadores y lectores de la revista que lo proponía.
No son fotos, sino gráficos o dibujos, pero hay algunos muy buenos. Tienen un tamaño de 850x200 píxeles.

Merece la pena pasar a verlas: Smashing Magazine - Blog Headers For Free

Sirven para otros servidores que no sean Blogspot!!

Ya me contaréis.

21 enero 2008

Imagen de fondo en el título de la entrada


MgL me preguntaba hace unos días cómo podía poner una imagen de fondo en el título de las entradas, imagino que para incluir alguna en su blog Estación del Jinete.


He de reconocer que no tenía la menor idea de cómo se hacía. Pero la curiosa-cotilla que tiene una dentro le picó y me comprometí a buscar cómo cambiarlo. No me ha costado mucho, por eso he tardado poco tiempo en compartirlo con vosotros...


Veamos: las opciones de las entradas (o post) se encuentran bajo la etiqueta o nombre de post h3, de modo que iremos a la pestaña Plantilla - Edición de HTML, y activaremos la casilla "Expandir plantilla de artilugios". Entonces, buscaremos post h3 con el buscador del navegador (en Editar - Buscar). Os aparecerá ese post h3 unas tres veces, de forma similar a la que aparece en mi otro blog:



.post h3 {
margin:.25em 0 0;
padding:0 0 4px;
font-size:140%;
font-weight:normal;
line-height:1.4em;
color:$titlecolor;
}

.post h3 a, .post h3 a:visited, .post h3 strong {
background: url(http://img443.imageshack.us/img443/760/posttitlenj4.jpg) repeat;
display:block;
text-decoration:none;
color:$titlecolor;
font-weight:bold;
padding-left: 5px;
border-top:3px solid $bordercolor;
border-bottom:3px solid $bordercolor;
}

.post h3 strong, .post h3 a:hover {
background: url(http://i176.photobucket.com/albums/w192/comerxcomer/florfondo.jpg) repeat;
color:$textcolor;
padding-left: 5px;
border-top:3px solid $bordercolor;
border-bottom:3px solid $bordercolor;

Los atributos margin, padding, font-size, etc. que aparecen en el primer h3 corresponden al texto en sí del título; si queremos variar el tamaño, por ejemplo, podemos hacerlo ahí.

En cuanto a la imagen, tenmos dos posibilidades:

1. Una imagen fija.

2. Una imagen que varíe cuando pasamos el ratón por encima del título de la entrada.


Si queremos una imagen fija, incluiremos el atributo background que se explica más abajo en el primer post h3; si queremos que varíe, tendremos en cuenta lo siguiente:

- La imagen especificada en post h3 a, post h3 a:visited, .post h3 strong será la que aparezca al ver la página.

- Y la especificada en .post h3 strong .post h3 a:hover será la veamos cuando el ratón se situe sobre el título de la entrada.


Para incluirlas nos situaremos tras el símbolo { que aparece después de strong, hover o h3 y teclearemos

background: url (direccion URL de tu imagen);


Si es una imagen pequeñita que queremos que se repita, escribiremos repeat delante del punto y coma:

background: url (dirección URL) repeat;


Y si no queremos que se repita, non-repeat:

background: url (direccion URL) non-repeat;


Una vez hecho esto, comprobaremos los efectos en Vista previa. Si nos gusta, guardaremos los cambios; y si no, iremos probando con repeat non-repeat, o distintas imágenes hasta encontrar una que nos guste.

07 diciembre 2007

Poner un vídeo YouTube en el blog


A menudo queremos compartir o animar nuestro blog con un vídeo que hemso encontrado en YouTube. Quizás si no lo has hecho nunca antes no sepas bien cómo se hace. Lo cierto es que YouTube no los pone muy muy fácil, mira la foto:









A la derecha de cada vídeo YouTube nos da información acerca del autor (o "subidor") del vídeo y es justo ahí donde nos aparece la opción Insertar con el código justo debajo (rodeado en rojo en la imagen). No hay más que hacer click sobre el código, copiarlo o cortarlo y pegarlo en una entrada nueva del blog, o incluso, si lo así lo queréis, en otro sitio del blog (uno en el que haya espacio suficiente, porque en la barra lateral no suele haberlo). Recordad que para pegarlo, cuando hacemos una entrada nueva, debemos estar en la opción edición de HTML, no en Componer.


Otra forma, más aburrida y complicada, es coger el código para insertar uno de los videos y cambiar sólamente la dirección URL (el http://...) por la correspondiente. A menudo da problemas, no sé bien por qué. Veamos un ejemplo de cómo hacerlo.


Tengo el siguiente código, sacado de YouTube, para insertar un vídeo:



<object width="425" height="355"><param name="movie" value="http://www.youtube.com/v/1KPvC4j1Q44&rel=1"></param><param name="wmode" value="transparent"></param><embed src="http://www.youtube.com/v/1KPvC4j1Q44&rel=1" type="application/x-shockwave-flash" wmode="transparent" width="425" height="355"></embed></object>


Pero el vídeo que quiero yo tiene esta URL:


http://es.youtube.com/watch?v=yM03fDqymSQ&feature=related


Para que sea válido, deberemos eliminar esta parte final: &feature=related
y cambiar /watch?v= por /v/ . Quedaría así:



http://es.youtube.com/v/yM03fDqymSQ


Ahora cambiaremos la URL que aparece en la fórmula de YouTube por la nuestra:


<object width="425" height="355"><param name="movie" value="http://es.youtube.com/v/yM03fDqymSQ&rel=1"></param><param name="wmode" value="transparent"></param><embed src="http://www.youtube.com/v/1KPvC4j1Q44&rel=1" type="application/x-shockwave-flash" wmode="transparent" width="425" height="355"></embed></object>


Por último, deciros que YouTube también nos da la opción de personalizar la inserción del vídeo: en "Inserción personalizada" (justo sobre el código, a la derecha); nos permite elegir el color del borde del vídeo y si queremos que haya o no enlaces a otros vídeos relacionados.

19 septiembre 2007

Contraer y expandir entradas


Cuando tenemos muchas entradas publicadas en nuestro blog y las categorías están rebosantes de texto, puede hacerse pesado (para nosotros y para nuestros lectores) ir dándole a la ruleta del ratón o a la barrita del lado derecho del explorador para bajar y leer los títulos de las entradas, hasta dar con el que nos guste o busquemos. Para esto hay una solución: utilizar un código que muestre sólo el título de las entradas, ocultando el texto, y nos permita abrir (expandir) sólo aquella que nos interese.

En este blog, por ejemplo, no lo he aplicado, de modo que si seleccionáis una categoría (en "se ha escrito sobre..."), veréis las entradas completas y seguidas; pero en el otro blog que tengo -A quien le amarga un dulce- sí lo he aplicado:







Como véis, aparecen los títulos de las entradas precedidos del símbolo [+/-], juntas por día de publicación, y un pequeño cartelito en la parte superior de aviso de que las entradas están contraídas.



Me gustaría poder pegaros aquí el código que he utilizado en ese blog, para que hiciérais un corta y pega en la plantilla-código HTML del vuestro, pero me estoy volviendo loca probando el código en este blog, así que, de momento, os dejo tres sitios donde podéis encontrar la explicación (al fin y al cabo no es un código mío).


Trucos Blogger


Gema blog


Blog and Roll


Sólo un par de explicaciones:

Cuando os situéis en la plantilla HTML de vuestro blog, seleccionad la opción "expandir plantillas de artilugios" y ya luego buscar los códigos necesarios, por ejemplo < /head >. Para ello, utilizad la opción de búsqueda del navegador (presionadndo CTRL y la letra F del teclado, o en el menú Edición - Buscar en esta página), se abrirá una barrita en la parte inferior del navegador y una vez escribáis la palabra, se seleccionará en color en el texto.
Para encontrar rápidamente el texto:


<b:includable id='main' var='top'>

<!-- posts -->

<div id='blog-posts'>

<b:loop values='data:posts' var='post'>

<b:if cond='data:post.dateHeader'>

<h2 class='date-header'><data:post.dateHeader/></h2>

</b:if>



escribid en el recuadro de búsqueda "post.date", resulta más rápido.



Si os da error por el script, probad a eleminarlo (desde < script > hasta < /script >), a veces funciona.



Seguiré probando, a ver si lo consigo, y si hay novedades, os cuento.





Bueno, pues hay novedades: conseguí poner el código en ese otro blog. Finalmente seguí las instrucciones de una de esas tres páginas que tenéis arriba. El problema estaba en que me lié más de la cuenta buscando los códigos, que estaban seguidos y pensé que no... En este blog lo estoy intentando pero me da errores,a pesar de que sigo los mismos pasos que en el otro sí funcionaron. Quiero aplicarlo aquí, así que seguiré intentándolo.
En resumen, si queréis aplicarlo en vuestro blog, acceder a una de esas tres páginas y seguid los pasos que allí se detallan. Debería saliros.... ¡Suerte!

31 agosto 2007

Imagen que cambia al actualizar/cargar la página


Quienes hayan pasado por mi otro blog tal vez entiendan qué quiero expresar con este extraño y enrevesado título; si no lo has hecho, haz click aquí, fíjate en la imagen que aparece arriba a la izquierda y actualiza la página varias veces (desde el navegador o con la tecla F5). Comprobarás que con cada actualización aparece una nueva imagen.


Encontré el script (o código) en Logo aleatorio, de Gem@blog. La autora de ese blog ofrece un código "específico" para logos, no para imágenes, pero también funciona. Poco después me di cuenta de que todas las imágenes enlazaban a una misma página (no recuerdo bien si era el perfil de blogger o una página en blanco), pero lo que yo necesitaba era que cada imagen tuviese su propio enlace (más que nada porque no son imágenes mías y no quería tener problemas de propiedad intelectual), así que le pedí ayuda a Gema, quien, tan amable como siempre, me respondió enviándome el código modificado para conseguir ese resultado que deseaba.



Y sin más dilación, aquí tenéis el código javascript para conseguir este efecto:



<script language="JavaScript">



<!--



/*



Random Image Link Script



By Website Abstraction (http://www.wsabstract.com)



and Java-scripts.net (http://www.java-scripts.net)



*/





function random_imglink(){



var myimages=new Array()



//specify random images below. You can have as many as you wish



myimages[1]="URL de tu imagen"

myimages[2]="URL de tu imagen"

myimages[3]="URL de tu imagen"

myimages[4]="URL de tu imagen"

myimages[5]="URL de tu imagen"

myimages[6]="URL de tu imagen"



//specify corresponding links below



var imagelinks=new Array()



imagelinks[1]="URL de enlace para la imagen 1"

imagelinks[2]="URL de enlace para la imagen 2"

imagelinks[3]="URL de enlace para la imagen 3"

imagelinks[4]="URL de enlace para la imagen 4"

imagelinks[5]="URL de enlace para la imagen 5"

imagelinks[6]="URL de enlace para la imagen 6"



var ry=Math.floor(Math.random()*myimages.length)







if (ry==0)



ry=1



document.write('<a href='+'"'+imagelinks[ry]+'"'+'><img src="'+myimages[ry]+'" border=0></a>')



}





random_imglink()



//-->



</script>

Podéis poner tantas imágenes como queráis; el orden en que aparecen es aleatorio: puede repetirse una mucho y otra salir poco.