Recursos para bloggers

Canal de televisión TN (Todo Noticias)

2009-03-11T04:22:00.000-07:00

¡PELIGRO!

2009-03-10T04:06:00.000-07:00

El siguiente archivo de audio puede resultar perjudicial para los oídos. El autor del blog deslinda toda responsabilidad al respecto, la cual será enteramente suya.

Presentación creada con Windows movie maker

2009-03-10T03:26:00.001-07:00

Cómo subir archivos de audio a tu blog

2009-03-10T01:20:00.000-07:00

La verdad es que subir archivos de audio al blog me ha resultado lo más sencillo de todo, salvo por algunos problemas con el navegador Mozilla Firefox que en breve explicaré. He aquí el código más sencillo que conozco para subir archivos de audio al blog:
<embed width="195" src="http://www.archive.org/download/Espectacular_38/espectacular.mp3" autostart="0" loop="true" height="15"/></embed>
Éste es el código que utilicé para subir uno de mis archivos de audio. Como puedes ver, basta con utilizar la etiqueta "embed". Luego resta indicar dónde se encuentra el archivo a reproducir, usando el atributo "src" (abreviatura de "source"). Los restantes atributos y valores son más bien optativos. En este caso elegí darle al reproductor un ancho de 195 (píxeles, si no me equivoco) y una altura de 15. El atributo "loop" se utiliza para indicar si se desea que el archivo se reproduzca indefinidamente o se detenga una vez reproducido. Sus valores son "true" y "false". Y para el final dejé el atributo "autostart", que fue justamente el que me dio problemas con Firefox. El asunto es que, según casi toda la información que encontré en Internet, los valores para este atributo serían los mismos que para "loop", es decir, "true" y "false". Estos valores me funcionaron bien con el navegador Internet Explorer 7, pero con Firefox no fue así e, indefectiblemente, los archivos se reproducían automáticamente apenas entraba a mi blog. Por suerte luego descubrí que algunos usaban los valores "0" (cero) y "-1" (menos uno) en lugar de los otros. Entonces probé con estos hasta que encontré la solución. La clave está en utilizar el valor "true" y el valor "0" combinados, es decir, usar "true" cuando quieras que tu archivo se reproduzca automáticamente, y "0" cuando quieras que esté detenido hasta que el visitante de tu blog decida lo contrario. Así, tus archivos responderán de la misma manera en ambos navegadores. Si me preguntas por la razón de esto, te diré que no tengo ni idea, pero fue lo que me resultó a mí.

Crear fotos con Powerpoint y convertirlas en presentaciones en formato de video WMV

2009-03-06T02:22:00.000-08:00

En otra entrada he explicado (a grandes rasgos) cómo crear presentaciones usando el Windows movie maker. En ésta quiero contarles cómo crear imágenes o fotos que luego podrán usar para crear presentaciones en formato WMV utilizando el Windows movie maker. No voy a explicar aquí cómo usar la aplicación Powerpoint. Lo que quizá algunos no sepan es que pueden guardar cualquier diapositiva que creen con ese programa en formato "jpg" (entre muchos otros). Lo único que deben hacer una vez que hayan creado las imágenes que deseen se sucedan en su presentación, es guardarlas una a una en formato "jpg". Para ello sólo deben hacer click en la pestaña archivo y luego elegir "guardar como". Allí no sólo tienen la opción de ponerle nombre a su creación sino que también pueden elegir (justo debajo) en qué formato guardarla. En este caso no tienen más que elegir "JPEG", y así tendrán una imagen que el Windows movie maker o cualquier otro editor de imágenes reconocerá como una foto cualquiera. De hecho, también les servirá para crear presentaciones en gadgets, previa subida de las mismas a un álbum en Picasa, Flickr o Photobucket.

Invertir la posición de la barra lateral o "sidebar"

2009-03-06T01:41:00.000-08:00

La mayoría de las plantillas predeterminadas de Blogger presentan una barra lateral o "sidebar" a un lado u otro del segmento principal de la página que es donde van las entradas o "posts". Si deseas invertir la posición de esa barra lateral y del susodicho segmento, o sea, que lo que está a la izquierda quede a la derecha y viceversa, sólo tienes que ir a "Edición de HTML" y buscar en la plantilla las palabras "#main-wrapper" y "#sidebar-wrapper". Luego en cada una de ellas ubicar la propiedad "float". Seguramente notarás que en una dice "$startSide" y en la otra "$endSide". Lo único que tienes que hacer, pues, es reemplazar una por la otra, es decir, donde dice "$startSide" poner "$endSide" y viceversa, así de simple.

2009-02-28T18:51:00.000-08:00

2009-02-26T16:03:00.000-08:00

2009-02-25T02:16:00.000-08:00

2009-02-21T18:51:00.000-08:00

2009-02-20T20:24:00.001-08:00

2009-02-20T02:42:00.001-08:00

2009-02-20T02:39:00.000-08:00

2009-02-20T02:07:00.001-08:00

Añadir más espacio para gadgets

2009-02-15T16:18:00.000-08:00

Hay una forma de añadir más espacio para gadgets en tu blog. Para ello debes ir a "Edición de HTML" y hacer click en una pequeña casilla arriba a la derecha que dice "Expandir plantillas de artilugios". Luego pulsa las teclas CTRL+F y notarás que aparece abajo una barra de búsqueda. Allí debes escribir la palabra "showaddelement". Seguramente encontrarás que esto se repite dos veces en la plantilla: showaddelement="no". Lo único que tienes que hacer es cambiar el "no" por "yes". Eso es todo.

Crear presentaciones en gadgets

2009-02-15T16:10:00.000-08:00

Uno de los gadgets de Blogger te permite crear presentaciones que luego se mostrarán en la barra lateral u otro segmento de tu blog. Para que puedas hacerlo, antes deberás crear uno o más álbunes de fotos en cualquiera de los siguientes sitios: Picasa, Flickr o Photobucket. Luego deberás agregar un nuevo gadget a tu blog, eligiendo el de presentaciones. Allí podrás poner tu nombre de usuario de cualquiera de esos sitios y podrás elegir el álbum que desees para tu presentación. El gadget luego las presentará a manera de diapositivas. Para añadir un nuevo gadget, debes ir a "Diseño".

Cómo quité la barra de navegación de Blogger

2009-02-14T17:02:00.000-08:00

Quizás, al igual que yo, desees quitar la barra de navegación de Blogger, ésa que aparece por defecto en el tope de la página y que te da la opción de buscar en el blog, crear entradas y "personalizarlo". En mi caso, tras indagar un tiempo en la web, di con un código cuyo autor decía que debía colocarse justo antes de la etiqueta de cierre de la cabecera (</head>) de la plantilla. Lo probé y no resultó. Entonces probé poner el código al principio del cuerpo (<body>) y entonces sí funcionó. Es posible que existan otras maneras de eliminar esa barra (o de hacerla invisible, al menos), pero la que sigue, al menos a mí, me sirvió.

Primero debes ir a "edición de html" (antes debes ir a "diseño"). Allí verás el código html de tu blog. Lo que debes hacer es buscar en el documento la etiqueta "<body>", que aparece justo después de la etiqueta "</head>". Recuerda que es recomendable que guardes una copia de la plantilla antes de editarla, pues siempre es posible que algo salga mal. Aparte, como recomendación general, diría que siempre que modifiques la plantilla de tu blog y no se vea ningún cambio o no sepas si ha tenido algún efecto en él, vuelvas y borres esos cambios aunque parezca que no afectan en nada a tu blog. Acá va el código que utilicé (y que pegué al comienzo de la etiqueta "<body>"):
<style type='text/css'>#navbar-iframe {height:0px;visibility:hidden;display:none;}</style>

Actualización: también me resultó pegar este código justo antes de la etiqueta <head>
En otra entrada explicaré cómo reemplazar la caja de búsqueda y los enlaces a otras zonas de nuestro blog que teníamos en la barra de navegación.

Radio, televisión y videos

2009-02-14T01:13:00.000-08:00

El código necesario para insertar una emisora de radio o un canal de televisión en nuestro blog es básicamente el mismo que el usado para subir un archivo de audio. A continuación dejo dos ejemplos:
<embed autostart="true" showstatusbar="-1" src="http://streaming.fmrockandpop.com/rockandpop" height="60" width="270"></embed> (hacé -o haz, en castellano- click aquí para ver el resultado de este código)

<embed autostart='true' height='300' showstatusbar="-1" src='http://www.tn.com.ar/vivo/metafile.asx' width='270'></embed> (hacé click aquí para ver el resultado de este código)

Como puede verse, aquí incluimos el atributo "showstatusbar", indicando que queremos que se muestre la "barra de estado", mediante el valor "-1" (menos uno), y omitimos el atributo "loop" por ser innecesario en este caso, al tratarse de una transmisión en vivo. Si se desea, a cualquiera de estos códigos puede agregarse lo siguiente: pluginspage="http://www.microsoft.com/Windows/MediaPlayer/" type="application/x-mplayer2".
Tengo entendido que puede ser necesario en caso de que se utilicen versiones no actuales de navegadores o del reproductor de medios de Windows (Windows media player).
En cuanto a los archivos de video, el código es exactamente el mismo, pudiendo agregarse el atributo "loop", al igual que en los archivos de audio. He aquí un ejemplo de un video (presentación creada usando el Windows movie maker) en formato "WMV":
<embed src="http://www.archive.org/download/Paisajes2/Paisajes2.wmv" width="363" height="310" autostart="0" showstatusbar="-1"></embed>
(hacé click aquí para ver el resultado de este código)

VIDEOS DE NIRVANA

2009-02-14T00:21:00.001-08:00

LITHIUM

IN BLOOM

Poner música de fondo en tu blog

2009-02-13T00:59:00.000-08:00

Poner música de fondo en tu blog es igual de sencillo que subir cualquier otro archivo de audio, salvo que deberás dar el valor "0" (cero) a los atributos "height" y "width" (esto hará que no se vea el reproductor), aparte de dar el valor "true" al atributo "autostart". Si quieres que el archivo de audio se reproduzca indefinidamente, no debes olvidar dar el valor "true" al atributo "loop" (si no sabes de qué hablo, te recomiendo que hagas click en el botón que dice "Subir archivos de audio"). Puedes pegar el código con el archivo de audio en cualquier parte del cuerpo de la plantilla de tu blog, yendo, claro está, a "Edición de HTML".

Cómo poner un fondo original a tu blog

2009-02-12T17:30:00.000-08:00

Si no te conforma ninguna de las plantillas predeterminadas que ofrece Blogger, puedes reemplazarlas y poner de fondo cualquier diseño o color que elijas. Simplemente debes editar la plantilla desde "edición de html". Allí deberás buscar en la cabecera (<head>) la palabra background o background-image, que es la que establece el color o el diseño de fondo de la página. Para darte una idea más precisa, aquí te dejo la parte de mi plantilla donde se establece el diseño de mi fondo:
*/body { margin-top: 0px; margin-$endSide: 0px; margin-bottom: 0px; margin-$startSide: 0px; background-image: url("http://www.fondosmyspace.com/completos/fondos/1700.jpg");background-repeat: repeat;background-position: left;background-color: #FFFFFF; background-position: 50% 31px; text-align:center; font:x-small Verdana, Arial, Sans-serif; color:$textcolor; font-size/* */:/**/small; font-size: /**/small;}
Debes tener en cuenta, asimismo, que este segmento, al igual que otros de la plantilla, variará de acuerdo con el diseño que hayas elegido al crear tu blog. Lo más importante, en este caso, está donde dice: "background-image: url ("http://www.fondosmyspace.com/completos/fondos/1700.jpg")". Allí es donde se define la imagen de fondo. Simplemente debes buscar en la web un fondo o una imagen de tu gusto, o subir uno de tu computadora a cualquier sitio, y luego poner la dirección donde se encuentra, que en este caso es "www.fondosmyspace.com/completos/fondos/1700.jpg".
Como ya dije, la plantilla puede variar de acuerdo con el diseño que hayas elegido al crear el blog, y la barra lateral ("sidebar") podría tener su propio fondo, como también aparecer alguna figura o imagen en otra parte de la página. En el caso de mi plantilla original, aparecía una imagen conformada por círculos arriba al centro de la página. Para quitarla sólo debí borrar la dirección de la imagen donde decía "outer-wrapper" (es fácil darse cuenta de dónde hay imágenes, pues siempre aparecerá la dirección donde se encuentran).

Nota: la imagen que aparece aquí: "http://www.fondosmyspace.com/completos/fondos/1700.jpg" ya no es el fondo de mi página, pues decidí utilizar colores en vez de imágenes como fondo. De todos modos la explicación sigue siendo válida para quienes quieran poner imágenes o "patrones" como fondo. En caso de que quieras poner colores en lugar de imágenes, sólo debes borrar la dirección de la imagen y añadir al código (si es que ya no está) la palabra background o background-color, ":" (dos puntos) y el color que mejor te parezca (no te olvides de poner ";" -punto y coma- después del color). Claro que para ello deberás conocer los códigos de los colores, aunque también puedes poner sus nombres en inglés. Aquí dejo algunos como ejemplo: red, blue, green, yellow, black, gray, maroon, teal, navy.

Subir videos en formato WMV

2009-02-12T17:12:00.000-08:00

Supongo que ya sabrás cómo subir videos de Youtube u otros sitios a tu blog, pero quizá prefieras subir videos en formato "WMV" en vez del típico "FLV". En mi caso, prefiero el primero, pues los videos no se "entrecortan", como suelen hacerlo aquellos en formato FLV. Aparte, estos pueden verse sin problemas en pantalla completa. Para subir tus videos en formato "WMV" sólo tienes que subirlos al sitio "www.archive.org". Luego debes obtener la dirección de tu video haciendo click con el botón derecho del ratón sobre el enlace que indicará el formato y el tamaño de tu video, y elegir propiedades. Entonces seleccionas y copias la dirección y la pegas en tu entrada o "post" en la parte del código (etiqueta <embed>) que corresponda.

Cómo reemplazar la barra de navegación de Blogger

2009-02-09T23:48:00.000-08:00

Crear enlaces a cualquier sección de tu blog es muy fácil. Por ejemplo, si deseas crear un enlace a la página "Crear nueva entrada", lo único que tienes que hacer es hacer click en "Nueva entrada", como si efectivamente quisieras escribir una. Luego sólo tienes que copiar la dirección de esa página, la cual aparece en la parte superior de tu navegador, y pegarla luego como la dirección de destino del enlace que vayas a crear. De hecho, es así como se crean los enlaces internos. Si deseas que esos enlaces aparezcan en la barra lateral, no tienes más que añadir un gadget y crear allí el enlace, mientras que para reemplazar la caja de búsqueda de la barra de navegación, te bastará con copiar el siguiente código:
<form id="searchthis" action="/search" style="display: inline;" method="get"><input id="search-box" name="q" size="25"/> <input id="search-btn" value="Busca en mi blog" type="submit"/></form>
Claro está que puedes personalizar la caja de búsqueda, cambiando, por ejemplo, el atributo "value", o sea que puedes escribir lo que se te antoje en lugar de "Busca en mi blog".

Canal de televisión

2009-02-05T20:21:00.000-08:00

2009-02-05T19:47:00.000-08:00

Crear presentaciones usando el Windows movie maker

2009-02-05T03:26:00.000-08:00

Si eres de ver videos en Youtube, supongo que habrás visto en más de una ocasión esos videos creados a partir de fotos u otras imágenes sin movimiento, que se presentan a manera de diapositivas. Hasta hace no mucho me preguntaba cómo lo hacían. Buscando la respuesta me encontré con varios programas que, supuestamente, servirían para esto. El asunto es que muchos de ellos no eran gratuitos, otros no te permitían añadir audio a tus presentaciones, y otros no funcionaban del todo bien. Hasta que me di cuenta de que la solución había estado instalada en mi computadora desde el comienzo. El programa, al que nunca antes había prestado atención, es el Windows movie maker, y me vino incluido en el paquete de Office 2003 con el sistema operativo XP. Además de ofrecer todo lo necesario para crear presentaciones decentes, este programa te permite convertir tus presentaciones en videos en formato "WMV", el cual luego podrás subir a tu blog (subiéndolo antes a "archive.org"), a youtube o adonde mejor te parezca. No voy a dar detalles de cómo funciona, pues sería algo engorroso e innecesario, ya que no es nada difícil de utilizar y no te llevará mucho tiempo aprender cómo hacerlo. De todos modos, aquí te dejo el enlace a un video de Youtube donde se refieren a este programa: click para verlo . Si no te basta con este video, allí mismo podrás encontrar muchos otros tutoriales al respecto, así como otros videos que enseñan cómo descargar el programa, en caso de que no lo tuvieras instalado en tu computadora. He aquí una presentación que creé con el Windows movie maker: click para verla

Nota: si quieres no tener problemas con la visualización de tu presentación en el navegador Mozilla Firefox, te recomiendo que, al crear tu presentación con fotos o imágenes, éstas no sean muy grandes, pues, no sé por qué razón, en ese navegador las fotos no se ajustan al reproductor de Windows sino que hay que ajustar el reproductor al tamaño de las fotos, cosa que puede resultar un gran inconveniente o algo muy poco estético.

Emisora de radio

2009-02-05T03:23:00.000-08:00

Crear botones con "rollover"

2009-02-05T01:46:00.000-08:00

Aunque no sé nada de diseño web ni nada por el estilo, quise de todos modos buscar la manera de poner en mi blog botones de esos que cambian de color cuando posamos el cursor sobre ellos (efecto "rollover"). Así fue que, buscando información al respecto, me topé con el siguiente código, el cual utilicé para crear los botones que se ven al inicio. Hay una parte que pegué justo antes de la etiqueta </head> (la que aparece justo antes de <body>)Aquí está esa parte del código:

<title>rollover css e imágenes</title>
<style type='text/css'>
.navenlace {
font-weight: bold;
font-style: italic;
font-size: 75%;
border: 1px solid #999999;
margin:0 0 0 0px;
padding: 2px;
}

.navenlace a {
color: maroon;
text-decoration: none;
display: block;
width: 100%;
height: 20px;
background-image: url(http://farm4.static.flickr.com/3622/3340235525_ea3d58a331.jpg?v=0);
}

.navenlace a:hover {
background-image: url(http://www.archive.org/download/YellowButton/button1over.png);
color: #ffffcc;

}

.navegador{
padding: 1px;
margin-left: 1%;
margin-right: 72%;
width: 275px;

</style>

Y la siguiente sería la parte que va entre las etiquetas <body></body>, donde sea que queramos que aparezcan los botones. Desde ya les digo que no sé cómo hacer para que los botones se distribuyan de manera horizontal.

<div class='navegador'><h2>Con suerte aprenderás a</h2>
<p class='navenlace'><a href='http://uruguay-noma.blogspot.com/2009/02/cualquier-cosa-digamos.html'>quitar la barra de navegación</a></p>
</div>

Con la etiqueta <p> añadimos cada uno de los botones. Obviamente tú le pones el enlace y el texto que se te antoje al botón. Como supongo habrás notado, en el código que va en la cabecera del documento aparecen dos direcciones diferentes. Me refiero a donde dice "background-image: url (http....)". Esas son las direcciones a las dos imágenes diferentes que se verán dentro de tu botón (de ahí el cambio de apariencia cuando posamos el cursor sobre él). También recuerda que puedes modificar el tamaño de los botones cambiando los valores de "height" y "width". En este caso verás que son "height: 20px" y "width: 275px" (no confundir con el otro "width" que dice "100%")

Video (presentación creada con Windows movie maker) en formato WMV

2008-11-05T19:28:00.001-08:00

Cambiar tamaño de videos de Blogger

2008-11-04T00:36:00.000-08:00

Si eres de subir videos a Blogger de la manera "tradicional", o sea, creando una nueva entrada y pulsando en el botón "Añadir vídeo", quizás el marco de estos te resulte algo pequeño. Para cambiárselo no tienes más que editar la entrada, eligiendo "Edición de HTML", y luego modificar los valores de los atributos "width" y "height", exactamente igual a como se hace con cualquier otro archivo.