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.

27 julio 2007

Cómo crear tablas


Las tablas que podemos crear en nuestro blog se basan en el código HTML. Es posible que ya hayáis utilizado alguna, quizás sin saberlo -no sería la primera vez que me ocurre a mí...

Para empezar lo primero que hemos de saber es que las tablas se crean mediante estas etiquetas:

<table>XXX</table>

Todo lo que situemos entre dichas etiquetas adoptará la forma de una tabla. Pero esto no es suficiente. La etiqueta table puede tener multitud de atributos, si bien el más importante es < tbody > < /tbody > (table body = cuerpo de la tabla), ya que sin ésta etiqueta dentro de la etiqueta table es difícil conseguir los efectos deseados. Vamos a ver cuáles son esos atributos:


Borde

Tamaño de la tabla

Alineacion del texto dentro de la tabla

Color e imagen de fondo

Separación entre celdas

Espaciado dentro de la celda

Celdas: filas y columnas

Ampliación: color de fondo para una fila o una celda



Borde


El borde de la tabla es translúcido por defecto y tiene un grosor determinado que podemos modificar. Para cambiar el color utilizaremos el atributo border, señalando entre comillas el número del grosor que deseamos para el borde general de la tabla:

<table border="1"><tbody><tr><td></td></tr></tbody></table> (tamaño por defecto)

<table border="5"><tbody><tr><td></td></tr></tbody></table>

<table border="9"><tbody><tr><td></td></tr></tbody></table>


Por el contrario, si lo que queremos es que el borde no sea visible el número a emplear será el 0:

Border="0"


Si lo que queremos es cambiar el color del borde utilizaremos el atributo bordercolor:


<table border="1" bordercolor="red"><tbody><tr><td></td></td></tbody>

</table>


<table border="1" bordercolor="red"><tbody><tr><td></td></td></tbody>

</table>



Tamaño de la tabla


El tamaño de la tabla se ajustará por defecto al contenido de la misma, pero podemos modificar su tamaño
en altura: height="número de pixeles",
y en anchura: width="número".

<table border="1" height="90" width="70"><tbody><tr><td></td></tr></tbody>/table>


<table border="1" height="60" width="150"><tbody><tr><td></td></tr></tbody></table>


El orden, por lo general, es: primero el borde (border), segundo la anchura (width) y tercero la altura (height), aunque, por lo general, el editor de texto de Blogger nos corrige los códigos en cuanto órden, así que tampoco le prestéis demasiada atención.



Color e imagen de fondo


El color de fondo de la tabla se añade mediante el atributo bgcolor (bgcolor="XX") dentro de la etiqueta de la tabla:

<table bgcolor="yellow"><tbody><tr><td></td></tr></tbody></table>


<table bgcolor="#ff3311"><tbody><tr><td></td></tr></tbody></table>


Mientras la imagen se añade con el atributo background (background="URL de la imagen"):
<table background="http://i176.photobucket.com/albums/w192/comerxcomer/florfondo.jpg">
<tbody><tr><td></td></tr></tbody></table>




Celdas: filas y columnas


En general, las tablas están subdivididas en filas y columnas, recibiendo el nombre de celda cada uno de los recuadros internos de las mismas. ¿Cómo se consigue crear filas y columnas en el HTML? Muy sencillo: con las etiquetas <tr></tr> (table row) creamos las filas y con <td></td> (table data) dividimos dicha fila en celdas, tantas como queramos. Veamos un ejemplo:

<table border="1"><tbody><tr>caballito de mar</tr></tbody></table>

caballito de mar


<table border="1"><tbody><tr><td>caballito de mar</td><td>pulpo</td><td>calamar</td></tr></tbody></table>

caballito de marpulpocalamar


<table><tr><td>caballito de mar</td></tr><tr><td>pulpo</td></tr><tr><td>calamar</td></tr></table>

caballito de mar
pulpo
calamar



Alineación del texto dentro de la tabla


El texto que escribamos dentro de cada celda (td) puede ser alineado arriba, abajo, en el centro, a la derecha o a la izquierda. La alineación horizontal por defecto es la izquierda y la alineación vertical, en el centro. Para cambiarla nos situaremos en la etiqueta td y dentro de ella señalaremos la alineación horizontal, denominada align y la alineación vertical, valign (vertical align).

alineación por defecto: izquierda y centro


Alineación horizontal a la derechaderechacentro
<td align="right">XXX</td><td align="right">XXX</td><td align="center">XXX</td>
Alineación vertical en la parte superior
ArribaAbajo
<td valign="top">XXX</td><td valign="top">XXX</td><td valign="bottom">XXX</td>


Podemos utilizar los dos atributos de celda juntos:

<table border="1"><tbody><tr><td align="center" valign="top"></td></tr></tbody></table></p>



Separación entre celdas


La separación entre celdas es de 2 pixeles por defecto, pero podemos modificar aumentarla mediante el atributo cellspacing (cellspacing="XX"):



<table border="1" cellspacing="4">

<tbody>

<tr>

<td>

Globo

</td>

<td>

Cometa

</td>

</tr> <tr>

<td>

balón

</td>

<td>

pelota

</td>

</tr>

</tbody>

</table>




GloboCometa
balónpelota




<table border="1" cellspacing="10">

<tbody><tr><td>Globo</td>

<td>Cometa</td></tr>

<tr><td>balón</td>

<td>pelota</td></tr>

</tbody>

</table>




GloboCometa
balónpelota



<table border="1" cellspacing="25">

<tbody>

<tr><td>Globo</td>

<td>Cometa</td></tr>

<tr><td>balón</td>

<td>pelota</td></tr>

</tbody>

</table>



GloboCometa
balónpelota




Espaciado dentro de las celdas


Al igual que podemos modificar la separación entre las celdas, podemos hacer con el espacio existente entre los bordes de la celda y el texto o contenido de la misma. En este caso el atributo se denomina cellpadding (cellpadding="XX"):




<table border="1" cellpadding="9">

<tbody><tr><td>Gato</td>

<td>Pantera</td>

<td>Tigre</td></tr>

<tr><td>Puma</td>

<td>León</td>

<td>Leopardo</td></tr>

</tbody></table>



GatoPanteraTigre
PumaLeónLeopardo



<table border="1" cellpadding="15">

<tbody><tr><td>Gato</td>

<td>Pantera</td>

<td>Tigre</td></tr>

<tr><td>Puma</td>

<td>León</td>

<td>Leopardo</td></tr>

</tbody></table>



GatoPanteraTigre
PumaLeónLeopardo



Por supuesto, podemos mezclar el espaciado y la separación entre celdas en una misma tabla, al igual que, supuestamente, puede hacerse con cualquiera de los atributos de la tabla y las celdas, todo depende del resultado que busquéis y de las ganas que tengáis de complicaros... jaja


Como último dato, comentaros que las etiquetas pueden ir todas seguidas o en distinta línea, es indistinto, el efecto será el mismo si escribís:



<table border="1" cellpadding="15">

<tbody><tr><td>Gato</td>

<td>Pantera</td>

<td>Tigre</td></tr>

</tbody></table>


Como si lo escribís así:

<table border="1" cellpadding="15"><tbody><tr><td>Gato</td><td>Pantera</td><td>tigre</td></tr></tbody></table>

(es posible que aquí el código se corte, pero os aseguro que está todo seguido)



Ampliación: color de fondo para una fila o una celda

Aquí os presento dos tablas de prueba con distintos colores de fondo, la primera por filas y la segunda de ellas por celdas. Esta segunda me ha dado problemas, al mezclarse los colores de fondo con el de la fuente del texto, no sé bien cómo quedarán cuando publique la entrada... Espero que os sea de ayuda.






prueba de color para esta filase supone que debe tener color rojo de fondode no ser así, a ver qué pasa y cómo puedo arreglarlo
nueva filaesta vez sin color de fondopara comparar con la anterior
y esta tercera filapara comprobar si funcionacon color verde de fondo





<table border="3"><tbody>

<tr bgcolor="red"><td>prueba de color para esta fila</td>

<td>se supone que debe tener color rojo de fondo</td>

<td>de no ser así, a ver qué pasa y cómo puedo arreglarlo</td></tr>

<tr><td>nueva fila</td><td>esta vez sin color de fondo</td>

<td>para comparar con la anterior </td></tr>

<tr bgcolor="green"><td>y esta tercera fila</td><td>para comprobar si funciona</td>

<td>con color verde de fondo</td></tr>

</tbody></table>





celda con fondo color verdecelda con fondo color rojocelda con fondo color #ff6600
celda sin color de fondo fondo azul, letra color amarillo con fontcelda sin color de fondo, letra color rojo con span





<table><tbody>

<tr><td bgcolor="green">celda con fondo color verde</td>

<td bgcolor="red">celda con fondo color rojo</td>

<td bgcolor="#ff6600">celda con fondo color #ff6600</td></tr>

<tr><td>celda sin color de fondo</td>

<td bgcolor="blue">

<span style="color:yellow;">fondo azul, letra color amarillo con font</span></td>

<td><span style="color: rgb(255, 0, 0);">celda sin color de fondo, letra color rojo con span</span></td></tr>

</tbody></table>


23 julio 2007

Barra lateral que desaparece o desplaza hacia abajo


Quería introducir brevemente un tema que me ha traído Karen al blog, al consultarme sus dudas y mencionarme dónde había encontrado la solución. No sé demasiado al respecto, así que me limitaré a describirlo, daros un enlace de ayuda y deciros en qué lugar de la plantilla podéis ir probando para buscar la solución.


Se trata de un tema que, al parecer, ha traído y probablemente siga trayendo problemas a los bloggeros: la barra lateral -o sidebar en inglés- que parece desaparecer y se nos desplaza hacia abajo, permaneciendo en su lado derecho o izquierdo, pero debajo de las entradas.


Aunque sólo sea por curiosidad os contaré que la existencia de distintas partes en nuestro blog (barra lateral, título, entradas y barra inferior) son en realidad páginas distintas, de ahí que en la plantilla tengan distinto nombre ("main", "sidebar", "title"...) cargadas desde lo que podemos llamar una página índice que las enlaza y nos permite verlas todas a la vez. Esto quiere decir que cada una de ellas puede (o al menos deberían poder) ser modificadas por separado.


La "página índice" tiene un tamaño determinado. Dentro de ella se encuentran la barra lateral y la barra principal (la de las entradas o posts) que, lógicamente, no pueden medir lo mismo, porque no cabrían, desplazándose la barra lateral hacia abajo; además, si la suma del tamaño de las dos, de la barra lateral y la principal, superase el tamaño máximo de esa "página índice" tendríamos el mismo resultado: una barra lateral desplazada hacia abajo.


Karen me comentaba que había conseguido solucionar su problema gracias a una entrada del Blog de blogs; imagino que se refería a ¿Por qué la sidebar se va hacia abajo? en cuyos comentarios podemos encontrar muchos datos valiosos sobre el tema, como, por ejemplo, que las imágenes demasiado grandes pueden provocar ese efecto de desplazamiento hacia abajo de la barra lateral.


Gracias a otro de los comentarios he podido acudir a la plantilla de mi blog y ponerme a experimentar, a ver qué resultado obtenía según los cambios que hacía.



La conclusión a la que he llegado es, como decía antes, que el tamaño o proporción de la barra lateral y de la barra principal tiene que estar compensado si no queremos que la barra lateral se nos desplace hacia abajo. Lo mejor, en mi opinión, es experimentar con la plantilla, utilizando las opciones "vista previa" y "borrar cambios" hasta que consigamos ver el blog como nos guste; y sólo entonces hacer uso de la opción "guardar plantilla" para guardar los cambios realizados. Por cierto, en todos los blogs de ayuda se aconseja guardar una copia de la plantilla en nuestro ordenador de modo que nos sirva de copia de seguridad en caso de que necesitemos borrarla entera y, así, no perdamos todos los cambios anteriormente realizados. Para guardar la plantilla sólo tenemos que usar la opción que nos da Blogger en Plantilla - Edición de HTML "Descargar plantilla completa".



Y dicho todo esto, si queremos intentar solucionar el problema de esa barra lateral que se desplaza hacia abajo o si, como quería Karen, queremos que haya más separación entre la barra lateral y barra de las entradas, acudiremos a Plantilla - Edición de HTML y buscaremos lo siguiente:



#sidebar-wrapper {

width:200px;

float:left;

font-size:87%;

padding-bottom:20px;

word-wrap: break-word; /* fix for long text breaking sidebar float in IE */

overflow: hidden; /* fix for long non-text content breaking IE sidebar float */

}

Aquí podemos modificar el ancho de la barra lateral (width) que, en el caso de mi plantilla está en píxeles (width:200px). Podemos aumentarlo o disminuirlo. Si lo aumentamos demasiado puede que el efecto que obtengamos sea el que decíamos antes: que la barra lateral se coloque en su posición laterla pero debajo de todas las entradas. ¿Qué podemos hacer entonces? Disminuir el ancho de la barra de las entradas. Para ello buscaremos:



#main-wrapper {

width:450px;

float:right;

padding:100px 0 20px;

font-size:88%;

word-wrap: break-word; /* fix for long text breaking sidebar float in IE */

overflow: hidden; /* fix for long non-text content breaking IE sidebar float */

}

y disminuiremos el ancho (width) de esta barra. Aquí, por ejemplo, es de 450; si lo disminuimos a 400 y hacemos click en "vista previa" veremos la diferencia.

Tened en cuenta que, a menos que necesitéis que la barra lateral sea más grande por alguna imagen o accesorio que incluyáis, no es necesario aumentar el ancho de la barra lateral, es suficiente con disminuir el ancho de la barra principal o de entradas (main-wrapper).



¡Y hasta aquí mis humildes y quizás confusas y confundidas explicaciones! Espero que os sirva de algo.

18 julio 2007

Contadores y estadísticas


A la mayoría de los que poseemos un blog nos gusta la idea de tener un contador de visitas, así como información acerca de dichas visitas: frecuencia, tiempo que permanecen en el blog, procedencia, búsquedas que han llevado al blog, etc. Por eso existen en Internet numerosas páginas que nos ofrecen este servicio de forma gratuita.

En mi otro blog podéis observar tres de estas páginas:

Ecoestadística. Página en castellano que, como su nombre indica, nos ofrece la posibilidad de conocer las estadísticas de nuestro blog o página web. Es necesario registrarse y añadir un código en nuestro blog. Las estadísticas pueden ser públicas o permanecer privadas para que sólo nosotros accedamos a ellas, variando así la imagen y el enlace que debamos incluir en nuestro blog. En este blog las estadísticas a través de esta página son públicas, podéis ver el icono de enlace en la barra lateral; mientras en mi otro blog son privadas. Los elementos que incluye esta página son: cuándo (visitas por mes, semana, día y horas del día), quién (de qué países proceden nuestros visitantes), navegación (duración de las visitas, entradas más visitadas de nuestro blog, sistema operativo y navegador empleado por los visitantes, tamaño de la pantalla), enlaces (origen de los mismos y búsquedas que han llevado a nuestro blog o web).

EstadisticasGratis.com. Otra opción en castellano que nos ofrece tanto estadísticas como contadores para nuestro blog o web. También es necesario registrarse. Dispone de más de 60 modelos de contadores entre los que poder elegir. Las estadísticas están divididas de forma similar a la página anterior: tráfico (mensual, diario, por horas y anual), teconología de los usuarios (navegador, sistema operativo), ubicación geográfica (país e idioma) y de dónde vienen (top refers, buscadores y páginas más populares). En este caso no existe opción de compartir públicamente las estadísticas, es un servicio privado (al menos hasta ahora).

Amazing counter. Si sólo queremos disponer de un contador, ésta es nuestra página. Hay numerosos modelos a elegir. Como en los anteriores, es necesario registrarse. La página está en inglés pero en tres sencillos pasos nos proporcionan el código que debemos incluir en el blog. Lo interesante de este contador, desde mi punto de vista, es que nos permite elegir entre incluir todas las veces que es visitada la web o blog, sean o no del mismo visitante -es lo que denominan "all hits"-, y sólo visitas de distintos usuarios -"Unique visits only". Aunque la página ofrece estadísticas, éstas son únicamente el número de visitas del blog por día.


Alex Sanhz nos propone los siguientes enlaces (para más información acudir a su blog: Contadores):

Globetrackr. Servicio gratuito que nos ofrece un contador con los lugares (países) de procedencia de quienes nos visitan.

Visitor Visualization. También en inglés. Ofrece un contador con un pequeño mapamundi en el que las visitas aparecen en diferentes colores según la antigüedad de la misma.

Pero disponemos de oras muchas opciones más.
Geo visitors. Parecido al anterior. Sólo hemos de copiar y pegar el código, aunque, lo cierto es que, después de probarlo, veo que no se visualiza directamente en el blog/web, sino que es necesario hacer click en el botón de enlace y que se abra una nueva pestaña o ventana para ver las visitas a nuestro blog.

Geo visita. En castellano. A través de su servicio podemos visualizar en nuestro blog o web un mapa mundi con las visitas on line en tiempo real y/o un pequeño globo terráqueo con las visitas recibidas. Para más información sobre cómo utilizar este servicio, consultad en esta entrada de Gema blog.

Contadorwap. Otra página más en castellano. Me resulta curioso haber llegado hasta ella desde Si quieres puedes, ya que sólo nos da un enlace y, a pesar de todos los que ya tenía, no era ninguno de ellos. (es que esto de las estadísticas está muy difundido por la web, por lo que veo...).

Buscando por la Comunidad de Ayuda para tu blog he encontrado esta otra página (in English): Site Meter, que nos ofrece un servicio básico gratuito de contador y de estadísticas, así como otros servicios más completos si aportamos algo de dinero. El servicio básico está bastante bien; es similar a los ya comentados anteriormente, si bien en este caso tenemos que visualizarlos en inglés: visitantes recientes (detalles, mapa, página de entrada y de salida), visitas (por día, en la última semana, mes, año), visitas y páginas vistas, ranking de páginas (de entrada y salida). Nos ofrecen cinco o seis tipos de contadores, podemos elegir el nivel de privacidad de las estadísticas entre medio y alto y, algo muy interesante, nos da la opción de ignorar nuestras propias visitas al blog, de forma que las estadísticas sean más realistas, más puras. Si queréis ver un ejemplo, podéis ver las estadísticas de este blog con este serivicio abajo, al final de la página.


Si lo que queremos es un contador de visitas en tiempo real (cuántos visitantes están en línea o conectados a nuestro blog/web), podéis utilizar, además de los ya mencionados arriba (Geo Visite): Geo visits.


Y si lo que buscas es un contador de cuenta atrás, Alex, que utilizó uno para el primer aniversario de su blog, nos aconseja ésta: Yourminis: Countdown Counter. No necesitamos registrarnos, sólo incluir los datos de nuestro "especial evento" y copiar y pegar el código.

¿Lo que te guscaría es un calendario lunar? Carolina de El blog de blogs nos da el enlace: Daily Moon Phases.



Las posibilidades son inmensas, así que dejo abierto el tema a futuras ampliaciones.

13 julio 2007

Firmar las entradas


La estresante vida que llevamos hoy en día y la comodidad que nos aportan los aparatos electrónicos están a la orden del día. Por eso Blogger nos da la opción de incluir una firma o frase final para que cada vez que escribamos una entrada nos olvidemos de teclear el código con la imagen,la palabra o frase que queramos que aparezca en cada entrada. ¿Cómo hacerlo? Muy sencillo: ve a la pestaña Opciones > Formato; abajo del todo dispones de un recuadro denominado "Plantilla de entrada", ahí puedes escibir el código/frase que quieras que aparezca en cada nueva entrada que crees. Haz click en "guardar valores" y listo. Cuando crees una nueva entrada te aparecerá por defecto dicho código/frase; no hay más que situar el curso al principio de dicho código, de modo que éste permanezca siempre después de lo que escribáis. Si no quieres que aparezca, no tienes más que borrarlo y la entrada en cuestión se publicará sin firma. Fácil, ¿no? ¡Blogger nos da muchas ayudas, reconozcámoslo!

Relojes


A pesar de que hay a quien no le agrada ver ni poner un reloj en su blog, son numerosos los blogs que los emplean. Por eso hoy os traigo algunos enlaces de páginas que nos ofrecen un "servicio horario", es decir, relojes varios, a elegir, para incluir en nuestro blog.

Los utilizados en mi blog los encontré gracias a Gem@.

Puesto que existen numerosos modelos, os aconsejaría buscar primero los tres o cuatro que más os gusten y ya después incluirl el elegido/s en vuestro blog, no sea que acabéis como me pasó a mí, con más de un reloj "porque son muy chulos" (ya sabéis que cuantas más imágenes tengáis para descargar, más tardará en cargarse el blog).

Los dos que podéis ver en mi otro blog (uno bajo la imagen 3D y otro al final del blog) os dirigirá a ClockLink.com; la página está en inglés pero merece la pena echar un vistazo; ofrece relojes con distintas franjas horarias, por si queréis incluir la distintos países (esto según nos comenta Alex de Bloggea2).
Al principio tuve otro más que eliminé con el tiempo, conseguido también gracias a Gem@. Ella y otros bloggeros nos ofrece estos links:


Pannasmontata

RelojesWeb.com

Relatime

Relojes Flash

Tollshel


POQbumDirigiros a Flash Toys & Gens, Flash Clocks. En esta página podéis econtrar otros muchos "accesorios" para incluir en el blog.

Aquí encontraréis algunos relojes con motivos políticos y futoblísticos, así como otros.

Compteur.cc. Aquí podéis crear un sencillo reloj, eligiendo el color y la forma. Hay cuatro modelos básicos a personalizar.

Widgetbox. Aquí encontraréis diversos widgets o accesorios, como yo los llamo, entre ellos, relojes. Teclead "clock" en la barra de búsqueda y elegid el que más os guste. Sólo tenéis que hacer click sobre el nombre del reloj elegido y en la nueva pantalla hacer click en "Get widget". Os aparecerá una lista para que eligáis el servidor de blog que tenéis, seleccionais el que tengáis (Blogger, en mi caso) y hacéis click en "Install Panel"; se os abrirá el blogger en una nueva ventana con la opción "Añadir artilugio", click ahí y lo colocáis donde queráis. Hice la prueba en este blog con un calendario que podéis ver arriba en la barra lateral; está en inglés, es la única pega que le encuentro.

Y si lo que os apetece es poner un salvapantallas con reloj en la pantalla de vuestro ordenador, podéis acudir a: Clock-desktop.com. O si preferís un reloj despertador que no necesita actualización horaria y te sirva como alarma mientras tengas el navegador abierto, pásate por: Genbeta: tu reloj on line con alarma. No tiene nada que ver con el blog, pero me pareció interesante...


Buscando, buscando, he dado con un curioso reloj:




Acudid a Uniqlock si queréis ponerlo en vuestro blog.


Me gustaría acercaros más páginas, pero eso es todo por hoy; mi búsqueda no ha dado para más...

12 julio 2007


Technorati Profile

07 julio 2007

FavIcon


El FavIcon o Favorite Icon es un pequeño dibujo (un icono) que aparece en la barra de dirección del navegador y en la pestaña del mismo y sirve para personalizar la página. El que tengo en mi blog es un pequeño pastel. Ojo, con el código que he utilizado el favicon sólo puede verse con el navegador de Firefox.


Si disponemos de alguna imagen que nos gustaría utilizar como favicon, antes de incluirlo en el blog lo que tendremos que hacer será crear la imagen específica, para ello entraremos en FavIcon from Pics, haremos click en examinar para seleccionarla y a continuación haremos click en "generate FavIcon". El motivo de que haya que crear una nueva imagen a partir de la que tenemos es que el tamaño del favicon debe ser de 16x16; además, el formato también cambia (.png o .ico). En esa página, además, podemos obtener el icono animado, es decir, en movimiento (cuando se abre la página el icono se desplaza una vez hacia arriba), incluso se puede añadir texto, también en movimiento ("Scrolling text"). Podéis probar todos los que queráis y descargároslo a vuestro ordenador. FavIcon from Pics lo genera comprimido; no hay más que descomprimir el archivo una vez descargado, y subir a Blogger o a vuestro hosting de fotos habitual el favicon que queréis.



Para subir el favicon a blogger no hay más que descargar la imagen en una nueva entrada del blog y guardarla como borrador. En la pestaña "Edicion de HTML" de la entrada os aparecerá la dirección de la imagen (img src="XXX"), que es la que nos hará falta para el siguiente paso.


Aviso: si la imagen que queremos utilizar es muy grande, FavIcon from Pics no será capaz de transformarla, tendremos que reducir su tamaño antes (puede hacerse fácilmente editando la imagen en el Paint: Imagen - Expandir/Contraer).


Una vez tengamos la dirección de la imagen, iremos a la plantilla de nuestro blog, Edicion HTML, y buscaremos el siguiente código en la cabecera (head) de nuestro blog:

<title><data:blog.pageTitle/></title>

ahí pegaremos el siguiente código:

<link href='URL DE TU IMAGEN' rel='shortcut icon' type='image/x-icon'/>



<link href='URL DE TU IMAGEN' rel='icon' type='image/png'/>


cambiando el texto url de tu imagen por la dirección de la imagen que quieras tener como favicon.

Una vez hecho esto, hacemos click en guardar cambios y ¡listo!



Este código lo pude utilizar gracias a la entrada Favicón para Blogger Beta de Gemablog
, pero se ha escrito sobre ello en más blogs, por ejemplo: Favicon en el "Nuevo Blogger" o Favicon, Qué es y como se hace de Bloggea2 o Favicon en web o blog

.

Existen otras webs que nos permiten crear nuestro favicon: Dynamic Drive- FavIcon. En MpP Favicon Gallery podemos encontrar favicones ya hechos, según nos informa Bloggea2, que nos explica aquí cómo hacerlo. Y en Favicon.cc podemos crearlo manualmente, según se explica en Crea tu favicon en línea

.

Espero que se entienda y os sea de ayuda.

27 junio 2007

Feed, RSS... ¿qué es?


Las siglas RSS se corresponden, según las fuentes, con Really Simple Syndication o con Rich Site Summary. Y "sindicar" (syndicate en inglés) significa "publicar artículos simultáneamente en diferentes medios a través de una fuente a la que pertenecen". Feed, por su parte, se traduce como alimento.



El RSS es un formato de documento basado en el XML (un lenguaje similar pero diferente al HTML) que permite que desde un servidor distinto (Bloglines, por ejemplo), desde el mail o desde nuetro escritorio (habiendo descargado alguno de los programas existentes para ello, como FeedReader, gratuito) podamos ver las enactualizaciones de blogs y sitios web, al facilitar el contenido de las mismas. Dichos documentos son los que reciben el nombre de "RSS feed", y su formato, según he leído, puede ser RDF 1.0 ó RSS 2.0, el más nuevo, y, por supuesto, Atom, el formato que ofrece Blogger. Se aconseja el uso de RSS feeds con el objetivo de obtener una difusión mayor y más directa del contenido de nuestro blog o sitio web.



Quien quiera recibir las actualizaciones de nuestro blog podrá hacerlo a través del serivicio que nos ofrecen algunas páginas como Bloglines , en el correo electónico (gracias a páginas como Feedburner) o descargándose alguno de los programas que lo permiten (FeedReader), de modo que si utilizamos siempre el mismo ordenador, podamos ver y leer las actualizaciones de las páginas o blogs que más nos interesan sin tener que abrir el navegador de internet.


Para crear un feed de nuestro blog, además de activar el feed Atom de Blogger, podemos utilizar el ya mencionado Feedburner. Asimismo, podemos incluir en nuestro blog las actualizaciones de otros blogs, a través de servicios como FeedRoll.


Como veremos a continuación, existe la posibilidad de recibir las actualizaciones tanto del blog como de los comentarios de las entradas



Para activa el feed de Blogger sólo tenéis que situaros en Opciones, Feed del sitio. Ahí veréis la opción Permitir feed del sitio, no hay más que seleccionar "Completo" o "Corto" y hacer click en Guardar valores. En esa misma pestaña veréis la opción Cambiar por: Modo Avanzado. Si entrais en ella podréis activar/desactivar o abreviar el feed de las entradas, el feed de los comentarios del blog y el feed de los comentarios de las entradas. Además, podéis añadir el mensaje que queráis que aparezca como pie de página en el elemento feed (entiendo que es un mensaje que ven quienes estén suscritos al blog, pero no lo sé con exactitud).


Si quieres saber cómo crearte una cuenta en Bloglines y utilizarla, La brújula verde nos lo explica con todo detalles en Cómo suscribirse a Bloglines y agregar nuestros blogs o páginas favoritas.


Si lo que quieres es activar tu cuenta en Feedburner para pegar el código en tu blog, te explico brevemente:



Ve a FeedBurner. Arriba a la derecha tienes un enlace (Languages) para cambiar el idioma, si quieres hacerlo.



Introduce la URL (dirección de tu blog) en la celda y haz click en siguiente. Te aparecerá un mensaje en el que deberás elegir el tipo de feed (RSS, Atom) que quieres crear para tu blog; dado que nuestro blog ya dispone de feed Atom, yo he elegido el RSS. Hacemos click en siguiente.



En la siguiente pantalla nos aparecerá el título del Feed del sito y la URL del mismo, puedes cambiarlos si te parece conveniente. Más abajo deberemos rellenar los datos que tendremos como usuario de FeedBurner (nombre de usuario, contraseña y correo electrónico). Haremos click en Activar Feed.


Recibiremos un aviso diciéndonos que ya está activado el feed de nuestro blog. Haremos click en siguiente y haremos lo mismo en la siguiente pantalla. Nos aparecerá la página de nuestra cuenta en Feedburner. Ahora lo que necesitamos es dar a conocer en nuestro blog que nuestros usuarios tienen disponible el RSS Feed de nuestro "cuaderno de bitácora". Para ello haremos click en la pestaña Publicize. En la barra lateral veremos varias opciones; de momento nos interesan "Suscripciones por e-mail" y "Chicklet Chooser". El uso de ambas es bastante parecido. El "FeedCount" muestra el número de suscriptores de tu blog; también puedes añadirlo. El resto de opciones tendrás que descubrirlas por tu cuenta (aún no sé de qué van).


Bien, los pasos a seguir para añadir los enlaces de suscripción via "Reader" o via e-mail, son muy sencillos, más aún si tenemos en cuenta que Feedburner nos da la opción de añadir los códigos directamente sin tener que andar copiando y pegando. Seleccionaremos el icono que queremos que aparezca en el blog y, más abajo, donde dice "Use as a widget in" seleccionaremos Blogger y haremos click en Go!. Se abrirá una página de Blogger en la que podeis cambiar el título del artilugio y editar su contenido. No tenéis más que hacer click en "Añadir artilugio". Y ya está hecho. Después podéis mover el elemento y colocarlo en el lugar del blod que queráis.

Para activar el servicio de suscripción por e-mail haréis click en esa opción de lateral, click en activar y seguís los pasos.



Creo que eso es todo. Si se me olvida algo o puedo ayudar en algo más, ¡avisadme!

Mis fuentes:


Tutorial sobre RSS en 7 minutos antes de la noche .


Feeds y Sindicación en Gem@blog


Cómo suscribirse a Bloglines y agregar nuestros blogs o páginas favoritas en La brújula verde


RSS Indice enlace encontrado en Recursos y herramientas para tu blog de la Comunidad de ayuda para tu blog.

26 mayo 2007

Información para imágenes y enlaces (título)


¿Quieres añadir una breve información a los enlaces e imágenes de tu blog que aparezca al pasar el ratón sobre ellos? Es muy muy sencillo, sólo tienes que añadir title="XXX" tras la dirección URL del enlace o imagen:


<a href="URL" title="XXX"> xxx </a>


Y si quieres que se abra en una pestaña o ventana nueva, detrás de ese atributo, como sigue:

<a href="URL" target="_blank" title="XXX"> xxx </a>



Si se trata de una imagen, haremos lo mismo:

<img src="URL" title="XXX">



Podéis comprobar el "efecto" situando el ratón sobre la imagen inferior de mi firma; no es instantáneo, hay que esperar unos segundos.

23 mayo 2007

Enlace "arriba" o "top" = marca


Navegando por la red nos encontramos con bastante frecuencia páginas en las que hay enlaces del tipo "arriba" cuando hemos llegado al final de la página y que nos dirigen a la parte superior de la misma; otras veces son enlaces para ir a una parte concreta del contenido de un artículo, por ejemplo. ¿Cómo se consigue eso? Técnicamente se le denomina marca. Es bastante sencillo y podemos utilizarlo siempre que queramos, dentro de nuestros posts o entradas, o en la propia plantilla. Si queréis comprobar el efecto, dirigiros al final de mi página y hace click sobre el letrero móvil que hay con el título del blog, os dirigirá arriba del blog.


Para conseguir este "efecto" tenemos que crear el enlace que nos dirige al lugar deseado y la marca (dirección) a donde debe dirigirse el enlace. Lo haremos en 2 pasos:

  1. Buscamos el sitio exacto donde queremos que el enlace nos diriga, en el caso de mi página es el letrero de bienvenida al blog. Ahí debemos crear la marca, con el siguiente código:



    <a name="XXX">XXXX</a>



    Aquí he creado yo una marca, con este código. Si os dirigís al final de esta entrada y hacéis click en "Arriba", comprobaréis que sube hasta ahí.

  2. Nos iremos al sitio exacto donde queramos poner el enlace (en los ejemplos que os he puesto aqí, el final del blog, o el final de la entrada) e incluiremos un código de enlace con el símbolo # delante del nombre de la marca, así:



    <a href="#nombre de la marca">XXX</a>;


El nombre que escribáis en la marca, por ejemplo, arriba (name="arriba") será el mismo que escribáis en el enlace (href="#arriba"). Lo que escribáis entre las etiquetas <a ...> XXX </a> será aquello que se vea en la página, ya sea una sola palabra o, como ocurre en mi blog, una imagen. En el segundo caso pondremos el código de la imagen (img src...) entredichas etiquetas, que en el caso concreto de la marca sería éste:




<a name="arriba"><img src="direccion URL"></a>



A su vez dicha imagen puede ser un enlace, la marca no interfiere en él. Quedaría así:



<a name="arriba"><a href="direccion URL"><img src="direccion URL"></a></a>




En cuanto al enlace a esa marca, también podemos utilizar una imagen (una flecha hacia arriba, por ejemplo), pero nunca un enlace desde dicha imagen (la referencia "#arrriba" es un enlace en sí misma). Para incluir una imagen:



<a href="#arriba"><img src="direccion URL"></a>




Autorretrato, Van Gogh


Haz click aquí para subir arriba



Añadido de última hora: no repitáis el nombre de una marca dentro del mismo blog(con añadirle un número es suficiente para cambiarlo),ya que el enlace nos dirigirá al primero que aparezca en la página (aquí, por ejemplo, dirigía a la parte superior de la página y no al lugar indicado de esta misma entrada).

11 mayo 2007

Algunos códigos de texto para las entradas


Tras el comentario de Silvia en la entrada anterior de esta categoría, me he decidido a poneros aquí los códigos html que se usan para editar el texto de nuestras entradas. Ella comenta que no le funciona el editor de texto. No sé a qué se deberá exactamente; espero que se le solucione pronto. Por si tenéis el mismo problema o simplemente sentís curiosidad por conocerlos,a continuación tenéis los más usuales:



Itálica o cursiva



<span style="font-style:italic;">Itálica o cursiva</span>


<i>Italica o cursiva</i>



Negrita

<span style="font-weight:bold;">Negrita </span>


<b>Negrita <b>



para citar texto



<blockquote>para citar texto </blockquote>




Para cambiar de color



<span style="color: rgb(255, 0, 0);">Para cambiar de color (aqui­, rojo)</span>



Para cambiar el tamaño de la letra:

muy pequeño

<span style="font-size:78%;">muy pequeño</span>

pequeño

<span style="font-size:85%;"> pequeño</span>

normal (es el que sale por defecto)
grande

<span style="font-size:130%;">grande</span>

muy grande

<span style="font-size:180%;">muy grande</span>




Como veis, el tamaño va en porcentajes (%), basta con encontrar el que queramos e incluirlo en el código.

Si lo que queremos es cambiar la fuente:



Arial

<span style="font-family: arial;">Arial</span>


Courier

<span style="font-family: courier new;">Courier</span>


Georgia

<span style="font-family: georgia;">Georgia</span>


Lucida Grande

<span style="font-family: lucida grande;">Lucida Grande</span>


Times

<span style="font-family: times new roman;">Times</span>


Trebuchet

<span style="font-family: trebuchet ms;">Trebuchet</span>


Verdana

<span style="font-family: verdana;">Verdana</span>


Webdings

<span style="font-family: webdings;">Webdings</span>



Alienación del texto:

Para justificar texto


<div style="text-align: justify;">Para justificar texto</div>



Para alinear texto a la izquierda (nos saldrá siempre así por defecto)



<div style="text-align: left;">Para alinear texto a la izquierda (nos saldrá siempre así por defecto)</div>


Para centrar texto



<div style="text-align: center;">Para centrar texto </div>



Para alinear texto a la derecha




<div style="text-align: right;">Para alinear texto a la derecha </div>



Para
saltar

de

línea:





<br>



Para cambiar de párrafo


lo que significa que no sólo saltamos de línea sino que el espaciado entre líneas aumenta a un espaciado del 1.5 del Word, para que nos hagamos una idea.


A comparar con estas otras líneas, en las el espaciado entre líneas es el mínimo que puede haber, frente al anterior, más grande. ¿Veis la diferencia?

<p>Para cambiar de parrafo</p>




  • para crear
  • una lista
  • de "viñetas",
  • como lo llama el editor de textos
  • de blogger.



<ul><li>para crear</li><li>una lista</li><li>de "vinetas",</li><li>como lo llama el editor de textos</li><li>de blogger.</li></ul>



  • y si dentro de ella
    • necesitamos
    • crear una nueva
    • lista
      • aquí tenemos
      • cómo hacerlo
        • así.




<ul><li>y si dentro de ella</li><ul><li>necesitamos</li><li>crear una nueva</li><li>lista</li><ul><li>aqui­ tenemos</li><li>como hacerlo</li><ul><li>asi­.</li></ul></ul></ul></ul>



  1. Si lo que queremos
  2. es una lista numérica
  3. Aquí podemos ver cómo
    1. incluyendo una lista
    2. dentro de otra
      1. y una tercera
      2. también




<ol><li>Si lo que queremos</li><li>es una lista numérica</li><li>Aqui­ podemos ver como</li><ol><li>incluyendo una lista

</li><li>dentro de otra</li><ol><li>y una tercera</li><li>tambien

</li></ol></ol></ol>

20 abril 2007

Aparecer en Google


Si quieres que vuestra página aparezca en Google, es decir, que las búsquedas de cualquier persona puedan dirigir a vuestro blog, teclead www.google.com y haced click en Todo acerca de Google (está abajo); una vez ahí, haz click en Agregar/quitar su URL: ahí podréis introducir la URL de vuestro blog y las palabras clave que créeis que lo identifican. Eso sí, enviar la petición no significa que nos la concedan. Yo, desde hoy, espero...
Bueno, para que os resulte más sencillo, podéis acceder directamente a la página de petición aquí.

13 abril 2007

Logo o banner en movimiento


Gemablog nos habla de los logos o banners en varias entradas. Las que más útiles me han sido son ésta sobre el logo que actualiza la página, y otra (que no consigo encontrar) sobre los logos en movimiento (hacia arriba, abajo, a la derecha o a la izquierda). Existe otra entrada en ese blog sobre logos "cambiantes", de modo que cada vez que entremos al blog veamos un log distinto (para verlo, haz click aquí). El resto de entradas puedes verlas en la pestaña Logos de dicho blog (haz click aquí para acceder a ella).
En cualquier caso,los códigos empleados en mi blog son los siguientes:

Para el logo "A quien le amarga un dulce":


<marquee><br/><center><div id="header">

<a href="http://www.aquienleamargaundulce.blogspot.com">

<img border="none"

width="600" src="http://bp1.blogger.com/_PZt6dSAS_6U/Rhwpd5X034I/AAAAAAAAACI/Uj4jcSE3c_o/s400/rayado.php.jpg" height="50"/></a></div></center></marquee>



Para el logo "Bienvenidos!":


<marquee direction="right"><div id="header"><a href="http://www.aquienleamargaundulce.blogspot.com">

<img border="none"

width="300" src="http://bp0.blogger.com/_PZt6dSAS_6U/RhwqppX037I/AAAAAAAAACg/IyMW5BwYt4Y/s400/bienvenida.php.jpg" height="60"/></a></div></marquee>



Si queréis utilizar este código, lógicamente, tendréis que sustituir mi URL por la de vuestro blog y la URL de mi imagen por la de la vuestra.
La anchura o largo (weight) y altura (height) del logo pueden ser cambiados, dependerá del tamaño que más os guste; yo fui probando hasta encontrar el que más me gustaba.

El primer comando que se repite es marquee:


<marquee>TEXTO o REFERENCIA</marquee>

sirve para que el texto o logo que hay entremedias se mueva (sí, con un texto normal, sin imagen, también funciona). Si sólo escribimos
<marquee>TEXTO o REFERENCIA</marquee>
se moverá por defecto de derecha a izquierda. Si queremos que se mueva de izquierda a derecha, de arriba hacia abajo o de abajo hacia arriba, añadiremos, como veis en el logo de Bienvenidos!, la dirección (right, up, down). De modo que el código sería:



<marque direction="aquí la dirección que quieres:up, down o riht"> TEXTO o REFERENCIA</marquee>



En cuanto a dónde poner el código, yo lo intenté hacer mediante la edición HTML de la plantilla, pero aún no me aclaro, así que utilicé la opción "Añadir y organizar elementos" y añadí un elemento HTML/Java y lo moví hacia el final de la página, donde quería que se viese. ¡Es una opción ideal para quienes empezamos en esto de los blogs y sus códigos!

Nuevo "enlázame"


Como habréis visto, he cambiado el espacio Enlázame, así que aquello que contaba en la entrada anterior sirve, pero no son los que están actualmente en el blog. El nuevo código utilizado me lo ha facilitado Ariadna. En realidad ya lo había visto en Gem@blog, sólo que no termino de entender muy bien cómo funciona, es decir, qué tenéis que hacer para añadir un enlace a mi blog desde el vuestro con la imagen que veis aquí (a ver si la misma Ariadna puede sacarme de dudas...).
Bueno y el código es...

<a href="URL de tu pagina" target="_blank"><img src="URL de la imagen"/></a><br/>

<textarea><a href="URL de tu pagina " target="_blank"><img src="URL de la imagen"/></a></textarea>


De nuevo, aparecerá en la barra lateral, la imagen sobre el texto "Titulo", el cual podéis sustituir por "para enlazarme", "enlázame" o lo que quieras y que tendrá el mismo formato que todos los títulos de la barra lateral (color, tamaño, fuente).
En URL de la imagen tendréis que poner la URL (dirección web) de donde esté hospedada la imagen, algo que podéis hacer en varios sitios; yo utilizo Photobucket, aunque me recomendaron usar imageshake.us

Sobre la imagen, conviene que sea pequeñita, para que no quitemos demasiado espacio a aquellos que deseen añadirnos a su blog, y, como me decía Ariadna: "pon bien clarito el título de tu blog, para que se vea bien", aunque eso ya depende de vosotros, porque igual queréis que sólo se vea la imagen, sin texto alguno (el texto puede añadirse en el Paint o en Photoshop entre otros, es decir que forme parte de la imagen).

Algunos códigos


Puesto que lo que más me ha costado entender son los códigos, quiero dejar constancia aquí de algunos que ya entiendo y que son muy útiles, incluso para escribir entradas. Se aprenden a fuerza de probar y equivocarse, aunque hay páginas que nos ayudan a comprender su uso y/o significado. Codetutorial es una de ellas. Su lista rápida puede ser muy útil. Eso sí, está en inglés.
Cuando me entere de más (hay una que he utilizado pero no encuentro), os avisaré.


Las que tenéis abajo, a mí me funcionan, aunque es posible que haya algún error (si es así y alguien lo sabe, que se ponga en contacto conmigo: lo comprobaré y corregiré).


<br> <br/>
Sirven para pasar cambiar de línea. Se aconseja la primera, pero yo he estado utilizando la segunda hasta ahora y funcionaba igual (o eso me parece).


<p>
Sirve para cambiar de párrafo.


<b>XXX</b>

Para poner negrita


<i>XXX</i>

Para poner en cursiva o itálica.


<textarea>XXXX</textarea>
Para hacer un recuadro con texto dentro (un "área de texto" literalmente, como el que veis en "Enlázame".


<div align="right/left/center>XXXX</div>
Para centrar, alinear a la izquierda o a la derecha un texto, logo, enlace o referencia. Para centrar también puede utilizarse el comando: <center>XXX</center>


<title>XXX</title>
Para crear un título


<head>XXXX</head>
Para encabezados.


<body>XXXX</body>
Para el cuerpo (de la página, generalmente).


<a xxx>XXXX</a>
Es el principio para cualquier enlace (web, blog, imagen...):


<a href="http://xxx">XXXX</a>


al que añadiremos
target="_blank"
cuando queramos que la referencia se abra en otra pestaña o ventana del navegador, quedando así:


<a href="http://xxx" target="_blank">XXX</a>


Y si queremos que esa referencia se vea en lugar de como un texto en nuestra página con una imagen, deberemos añadir:
<img src="URL de la imagen"/>


quedando así:


<a href="url de la pagina" target="_blank"><img src="URL de la imagen"/></a>


<span color="XXXXXX">xxxx</span>

Para cambiar el color del texto, de una entrada o de un enlace. Con el mismo objetivo podemos utilizar en algunos casos este otro:


<font color="#XXXXXX" size="X">XXXX</font>



El comando input (<input xxxx/>), que no requiere de un cierre final como span, a o font, se utiliza para crear campos de datos. Podemos modificar el color, tamaño y otros elementos de dicho campo, separados por un espacio por ejemplo:


<input maxlength="200" value="" name="q" size="80" type="text"/>
es:




El uso de este comando me resulta todavía un poco complicado ya que tiene múltiples opciones. Podéis buscarlo en la guía o lista rápida que os enlacé más arriba o hacer click aquí.


Para terminar, señalar que, como podeis ver en esa lista rápida, cada comando o código tiene unos elementos asociados determinados que pueden o no añadirse, es decir,que no podemos usar cualquiera de ellos (por ejemplo, "color") para cualquier comando, sino sólo para aquellos que lo admitan.


De momento eso es todo. Cuando me vea capaz de explicar algún código más, escribiré otra entrada.


¡Espero que a alguien le sirva de ayuda!

Mantener un blog


He leído y escuchado de algunas personas que a menudo creamos un blog y acabamos abandonándolo. Me gustaría saber qué tiene que pasar, en vuestra opinión, para que lo mantengamos, para que sigamos queriendo escribir y comunicarnos.



Empiezo yo:
- que nos guste y tengamos ganas
- que escribamos lo que nos apetezca, aunque no tenga que ver exactamente con la temática que nos habíamos planteado
- ... (seguid vosotros)

11 abril 2007

"Enlázame"


Aunque ya había creado ese espacio en mi blog fijándome en otros que había visto,lo perfeccioné gracias a Gem@blog, haciendo que formase parte de la plantilla, que tuviese el mismo formato (color, texto, subrayado, etc.) o, lo que es lo mismo, que formase parte integrada de la sidebar o barra lateral.


Para crear el cajón con la referencia de enlace a tu blog utilizaremos el código



Y si queremos poner el título "Enlázame" (o el que más te guste) como si formase parte de la barra lateral pondremos delante

Es decir:






Modificado gracias al Convertidor de Chuano cuyo enlace Gem@ me dejó en los comentarios. Gracias,Gema.

Buscadores


A día de hoy puedes ver dos buscadores en mi blog.
El que se encuentra en la barra lateral es un buscador interno. El código que he utilizado lo he conseguido aquí y, en concreto el mío es éste:





Tan sólo tienes que cambiar mi URL por la tuya (sin http://www.) en los dos sitios donde aparece. El texto "Buscar en el blog" también puedes cambiarlo por el que queráis, así como el "go". La letra del título de ese espacio tendrán la fuente, tamaño y color que tienen los de la misma columna (probad y entenderéis lo que quiero decir y que tanto me cuesta explicar).



El segundo buscador es un buscador Google que, supuestamente también busca en nuestro blog. A día de hoy sólo me funciona para buscar en la web, no en mi blog,pero si te interesa o quieres probarlo, abajo tienes el código. Lo saqué de Bloggea2.





Como verás, está según el formato en el que se encuentra en mi blog, pero se pueden cambiar varios elementos estéticos como el tipo de logo de Google que quieras que aparezca (si lo quieres más pequeño, cambia Logo_40wht por Logo_12wht); el largo de la casilla en la que se escribirá el texto a buscar -"input...size="80"- (si vas a poner el buscador en la barra lateral, por ejemplo, lo querrás más pequeño, digamos 50, aunque puedes ir probando hasta conseguir el que más te guste); la alineación (izquierda, centro o derecha) del logo, la casilla central o las opciones de búsqueda (align="center/right/left"); o el texto del botón ("buscar en..."). También se puede añadir un recuadro alrededor, que en mi caso está quitado. Por supuesto, allí donde aparezca mi dirección blog, deberás cambiarla por la tuya.


Espero que se entienda lo que he escrito... ;)