Como diseñar las suscripciones por email a un blog de Blogger

Aunque ya os las he pasado por correo electrónico os dejo las instrucciones concretas para crear las suscripciones por correo electrónico a blogger mediante FeedBurner.

- Definir el asunto del email

${latestItemTitle} | Blog Tecnos

${latestItemTitle} y ${m} artículos más | Blog Tecnos

- Publicize → Suscripciones por Email → Preferencias de comunicación (Communication Preferences).

no-reply@blogtecnos.com

<a href="http://feedburner.google.com/fb/a/mailverify?uri=TuFeedBunerURI" class="mailsuscripcion">Suscríbete gratis por correo electrónico</a>

<form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit <div>

<p>Suscríbete por correo electrónico:</p> <p><input type="text" name="email" id="campoemails"/></p> <input type="hidden" value="BlogTecnosPrueba" name="uri"/>

<input type="hidden" name="loc" value="es_ES"/>

<input type="submit" value="Suscribir" id="mailsubmit"/> </div> </form>

- Insertar el código de estilo CSS justo antes de la instrucción: ]]></b:skin>

<input type="hidden" name="loc" value="es_ES"/>

<input type="submit" value="Suscribir" id="mailsubmit"/> </div> </form>

#fmailsuscripcion { }

#fmailsuscripcion p { margin:10px 0; }

input#campoemails { color:#999999; float:left; font-size:12px; height:12px; padding:2px; width:65%;

}

input#mailsubmit { background:#EEEEEE none repeat scroll 0 0; border:1px outset #CDCDCD; float:right; font-size:10px; padding:2px; text-align:center; width:25%; }

]]></b:skin>

#fmailsuscripcion { }

#fmailsuscripcion p { margin:10px 0; }

input#campoemails { color:#999999; float:left; font-size:12px; height:12px; padding:2px; width:65%;

}

input#mailsubmit { background:#EEEEEE none repeat scroll 0 0; border:1px outset #CDCDCD; float:right; font-size:10px; padding:2px; text-align:center; width:25%; }

- Finalmente en un gadget de HTML incluimos el siguiente formulario:

<form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=BlogTecnosPrueba', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" id="fmailsuscripcion"> <div> <p>Suscríbete por correo electrónico:</p> <p><input type="text" name="email" id="campoemails"/></p> <input type="hidden" value="BlogTecnosPrueba" name="uri"/> <input type="hidden" name="loc" value="es_ES"/> <input type="submit" value="Suscribir" id="mailsubmit"/> </div> </form>

Os paso el vídeotutorial sin editar del todo.. pinchando aquí podréis verlo (http://youtu.be/r1m5MXZeKSA).

Formulario prueba. Enlace

Ver el formulario aquí.

Formulario prueba

Nuevo calendario

El nuevo calendario es..

Insertar un calendario en tu blog

Una opción interesante a considerar en nuestro Blog es incluir un calendario que informe sobre eventos cercanos relacionados con la temática del blog, por ejemplo las fiestas, excursiones o acontecimientos de tu pueblo. Para ello, de las varias opciones disponibles os aconsejo utilizar Google Calendar.

Se trata de una herramienta muy sencilla. Para trabajar con ella basta con, como siempre, entrar en nuestra cuenta de Google y pinchar sobre Calendar.

Entrar en Google Calendar.

A continuación, nos aparecerá la siguiente ventana. Se trata de la ventana principal de Google Calendar y sobre la que trabajaremos:

Ventana de trabajo principal de Google Calendar.

Nos podemos ir haciendo una idea de lo sencillo que será trabajar con esta opción pero, empecemos. Lo primero será Crear un Calendario (podremos hacer tantos como queramos, por ejemplo, uno exclusivo de fiestas locales y otro de eventos culturales). Simplemente tendremos que pinchar en Mis calendarios<Crear nuevo calendario (2). También podremos configurar los calendarios (Idioma, formato de fechas, notificaciones..).

Lo siguiente será comenzar a incluir eventos. Para ello pinchamos en Crear (1) y directamente nos llevará a la siguiente ventana:


Desde aquí podemos controlar toda la información del evento. Escribiremos el nombre del evento (a), por ejemplo, "Fiestas en Calahorra". Después definiremos el periodo de vigencia del evento (b) (días, meses, horas, lo que nos interese). A continuación aparecen otros muchos parámetros a definir (c). Marcaremos las opciones que más se ajusten a nuestras necesidades (si utilizas varios calendarios no olvides marcar en el que quieras que aparezca el evento (d), será muy cómodo para luego realizar cambios).

Finalmente, antes de guardar los cambios, puedes definir las personas que quieres que vean el calendario directamente desde Añadir invitados (e), para ello escribe las direcciones de correo electrónico separadas por una coma. Si lo que quieres es publicar el calendario en un blog o web no es necesario que utilices esta opción.

Una vez acabado el proceso completo pincha sobre Guardar.

Configuración de eventos

Puedes pedir que se te notifiquen cambios. Para ello debemos ir a Mis calendarios<Configuración (2). Aquí podremos definir si quieres que te informen de cada evento al día, un resumen diario.. según tus necesidades. Ajusta las opciones de compartir.

Configuración del calendario

En esta misma ventana encontrarás el código para la implantación del calendario en tu blog o web. Recuerda que es código HTML y, por lo tanto, lo debes copiar y pegar en tu sitio web, pero siempre podrás modificar parámetros como el tamaño. 

Código de Google Calendar.

Google Calendar ofrece muchas más opciones, así que prueba y sácale el máximo partido.

Aquí os pongo un ejemplo sencillo:

Reducir el tamaño de las entradas en el inicio de Blogger

En ocasiones nos parece que una entrada resulta demasiado larga para colocarla de forma íntegra y nos parece más interesante poner sólo una parte de la misma a modo de aperitivo, de manera que quién esté interesado pueda acceder a la información completa a través del típico "Leer más".

Prueba leer mas

Para insertar una tabla en Blogger, debemos realizar los siguientes pasos. Lo primero será insertar el código html correspondiente. Podemos partir de una tabla 3x3, dónde C representa Columnas y F filas, algo como esto:

<table border="1" cellpadding="5"><tbody>

<tr><td>C1,F1</td>

     <td>C2,F1</td>

     <td>C3,F1</td></tr>

<tr><td>C1,F2</td>

     <td>C2,F2</td>

     <td>C3,F2</td></tr>

<tr><td>C1,F3</td>

     <td>C2,F3</td>

     <td>C3,F3</td></tr>

</tbody></table>

Tabla 3x3 añadida en blogger.

Podemos ir observando que, sólo con este código ya podemos modificar:

Introducir tablas en Blogger

Para insertar una tabla en Blogger, debemos realizar los siguientes pasos. Lo primero será insertar el código html correspondiente. Podemos partir de una tabla 3x3, dónde C representa Columnas y F filas, algo como esto:

<table border="1" cellpadding="5"><tbody>

<tr><td>C1,F1</td>

     <td>C2,F1</td>

     <td>C3,F1</td></tr>

<tr><td>C1,F2</td>

     <td>C2,F2</td>

     <td>C3,F2</td></tr>

<tr><td>C1,F3</td>

     <td>C2,F3</td>

     <td>C3,F3</td></tr>

</tbody></table>

Tabla 3x3 añadida en blogger.

Podemos ir observando que, sólo con este código ya podemos modificar:
i. El tipo de borde de nuestra tabla "border". SI lo definimos como "0" no veremos el borde y desde 1 en adelante sólo modificaremos el grosor de la segunda línea, la línea exterior.
ii. El margen de separación del texto con los bordes de la tabla "cellpadding". A mayor número mayor distancia de separación.
iii. Incluir nuevas filas o nuevas columnas según nuestras necesidades. Para ello simplemente añadiremos <tr> para filas y <td> para columnas.

Por supuesto, existen múltiples opciones más:
- Muchas veces nos interesa que la tabla se adapte al ancho de nuestro blog. Para ello recurrimos a una orden CSS, la opción style="width: 100%;". Si modificamos ese 100% se adaptará hasta el punto que nosotros queramos, pero siempre en función del ancho definido en el blog. Quedaría así:

<table style="width: 100%;" border="1" cellpadding="5"><tbody>
<tr><td>C1,F1</td>
    <td>C2,F1</td>
    <td>C3,F1</td></tr>
<tr><td>C1,F2</td>
    <td>C2,F2</td>
    <td>C3,F2</td></tr>
<tr><td>C1,F3</td>
    <td>C2,F3</td>
    <td>C3,F3</td></tr>
</tbody></table>

Adaptar nuestra tabla al ancho del blog.

- Podemos cambiar el color de todo el fondo de la tabla. Para ello escribiremos bgcolor="grey" después de <table.

<table bgcolor="grey" border="5" cellpadding="5"><tbody>
<tr><td>C1,F1</td>
    <td>C2,F1</td>
    <td>C3,F1</td></tr>
<tr><td>C1,F2</td>
    <td>C2,F2</td>
    <td>C3,F2</td></tr>
<tr><td>C1,F3</td>
    <td>C2,F3</td>
    <td>C3,F3</td></tr>
</tbody></table>

Añadir un color de fondo a la tabla.

- Es posible que nos interese que la primera fila tenga un color de fondo mientras que el resto de la tabla tenga otro (o no tenga). Para conseguir éste efecto podemos añadir el atributo bgcolor tras la <tr> que nos interese, por ejemplo la primera:

<table border="5" cellpadding="5"><tbody>
<tr bgcolor="purple"> <td>C1,F1</td>
    <td>C2,F1</td>
    <td>C3,F1</td></tr>
<tr><td>C1,F2</td>
    <td>C2,F2</td>
    <td>C3,F2</td></tr>
<tr><td>C1,F3</td>
    <td>C2,F3</td>
    <td>C3,F3</td></tr>
</tbody></table>

Cambiar el color de fondo sólo a ciertos elementos (fila en este caso).

- En lugar de un color de fondo podemos insertar una imagen de fondo bajo la tabla, para ello utilizamos la opción background="URL de la imagen" (como ya veíamos para entradas) después de <table. Por ejemplo:

<table background="http://us.123rf.com/400wm/400/400/loskutnikov/loskutnikov1106/loskutnikov110600045/9719891-tabla-de-madera-vieja-fondo.jpg" border="5" cellpadding="5"><tbody>
<tr><td>C1,F1</td>
    <td>C2,F1</td>
    <td>C3,F1</td></tr>
<tr><td>C1,F2</td>
    <td>C2,F2</td>
    <td>C3,F2</td></tr>
<tr><td>C1,F3</td>
    <td>C2,F3</td>
    <td>C3,F3</td></tr>
</tbody></table>

Añadir una imagen de fondo a la tabla.

- Otro parámetro modificable es el color del borde. La instrucción es bordercolor y, nuevamente debemos añadirla tras <table>.

<table bordercolor="blue" border="5" cellpadding="5"><tbody>
<tr> <td>C1,F1</td>
    <td>C2,F1</td>
    <td>C3,F1</td></tr>
<tr><td>C1,F2</td>
    <td>C2,F2</td>
    <td>C3,F2</td></tr>
<tr><td>C1,F3</td>
    <td>C2,F3</td>
    <td>C3,F3</td></tr>
</tbody></table>

Cambiar el color del borde de la tabla.

- Podemos plntearnos el centrar el texto en su correspondiente celda. Para ello añadimos align="center" después de <tr> o <td> si queremos que sólo afecte a ciertas filas o columnas. 

  <table border="1" cellpadding="5"><tbody>
  <tr align="center"><td>C1,F1</td>
         <td>C2,F1</td>
         <td>C3,F1</td></tr>
    <tr><td>C1,F2</td>
         <td>C2,F2</td>
         <td>C3,F2</td></tr>
    <tr><td>C1,F3</td>
         <td>C2,F3</td>
         <td>C3,F3</td></tr>
    </tbody></table>

Centrar el texto.

- La famosa opción "combinar celdas" también es aplicable. Así lo único que haremos es utilizar código CSS de manera que la fila a combinar (o columna) se reduzca a una instrucción simple colspan. La idea es utilizar este comando definiendo cuantas celdas quieres agrupar, 3 en nuestro caso. Si quieres puedes alinearlas como hemos hecho en el ejemplo y añadir el texto como hacíamos siempre.

 <table style="width: 100%;"border="1" cellpadding="5"><tbody>
    <tr><td colspan="3" align="center">Combinar fila 1</td></tr>
    <tr><td>C1,F2</td>
         <td>C2,F2</td>
         <td>C3,F2</td></tr>
    <tr><td>C1,F3</td>
         <td>C2,F3</td>
         <td>C3,F3</td></tr>
    </tbody></table>

Combinar celdas en la tabla.

- Además podemos centrar la tabla respecto al fondo de la entrada añadiendo align="center" después de <table.

    <table align="center" border="1" cellpadding="5"><tbody>
    <tr><td>C1,F1</td>
         <td>C2,F1</td>
         <td>C3,F1</td></tr>
    <tr><td>C1,F2</td>
         <td>C2,F2</td>
         <td>C3,F2</td></tr>
    <tr><td>C1,F3</td>
         <td>C2,F3</td>
         <td>C3,F3</td></tr>
    </tbody></table>

Centrar tabla respecto al fondo de la entrada.

Estos son algunos de los ejemplo de modificaciones que más se suelen usar, pero hay muchos más, tantos como puedas imaginar y necesitar, así que sólo tienes que probar y crear.

Añadir una imagen de fondo a una entrada

Añadir una imagen de fondo a una entrada es relativamente fácil, pero requiere necesariamente la utilización de html. La idea es copiar el siguiente código en html: <table bordercolor="#000000" cellspacing="5" cellpadding="5" width="100%" background="URL de la imagen de fondo" border="0"><tbody><tr><td><p>En éste espacio debes incluir el conjunto de texto de la entrada. Desde la opción "Redactar" podrás modificar cuanto quieras de él y trabajar como con cualquier otra entrada.</p></td></tr></tbody></table> Así por ejemplo podríamos hacer lo siguiente, agregamos una imagen de fondo: <table bordercolor="#000000" cellspacing="5" cellpadding="5" width="100%" background="http://hd-wallpaper.org/wallpapers/10/Rainbow_Wave_Length.jpg" border="0"><tbody><tr><td><p>Ejemplo de insercción de imagen de fondo en una entrada de Blogger</p></td></tr></tbody></table> Como ves, también podremos moddificar el color del borde (bordercolor), los márgenes de la imagen al texto (cellspacing, cellpadding) o la anchura (width). Recuerda elegir imágenes no demasiado chillonas, con buena resolución y de un tamaño adecuado para la extensión de tu entrada para así evitar el "efecto tesela". Puede ser aconsejable trabajar la opacidad de dicha imagen, su brillo o contraste en la búsqueda de un mejor resultado (sea en InkScape o en Gimp).

Como traducir tu Blog (Blogger)

El objetivo es colocar una opción en la barra lateral, a modo de gadget, que nos permita traducir el blog entero al idioma deseado.

Gadget del traductor de Google.

Existen varias soluciones pero nuestra recomendación es usar Google Translate. Se trata de una potente y versátil herramienta en constante evolución.

Lo que debemos hacer es:
i. Entrar en Google translate, y concretamente en Traductor de sitios web. Esta opción se encuentra en la parte inferior de la ventana (ver imagen adjunta).

Ubicación de Google Translate. Pestaña para traducir webs y blogs.

ii. Accedes a una página que nos va a permitir configurar las opciones deseadas (ver imágen):

Opciones de Google Translate.

iii. Simplemente debemos configurar las opciones que deseemos y copiamos el código html (la zona recuadrada en rojo en la imagen).
iv. El último paso será copiar ese código copiado en un gadget de html.

Como subir textos a Blogger (pdf, doc..)

Para subir textos a blogger tenemos dos opciones principales:
     i. Partir de un texto propio.
     ii. Compartir un texto de otra persona que ya se encuentra colgado en la web.

En el caso de textos propios (i) podemos usar varios caminos.
i.1 Quizá el más sencillo sea utilizar alguna de las muchas páginas que permiten compartir documentos (por ejemplo SlideShare). A través de ellas podremos subir nuestro texto (sea .doc, .pdf., .odt, .odp., .ptt...) de forma sencilla, gratuita y, sobretodo, sin que ocupe espacio en nuestro servidor blogger. Para colgarlos en nuestro blog ver el punto ii.2 al final de la entrada. Ver ejemplo al final de la entrada.

i.2 Similares ventajas nos ofrece usar servidores de la nube gratuitos, como DropBox, o editores/servidores como el ya conocido Google Docs. Con ellos podrás vincular directamente archivos sin que ocupen espacio del servidor Blogger (aunque no se visualizarán como ocurría en el caso anterior). Concretamente desde Google Docs debemos ir, una vez en el documento, a Archivo<Publicar en la web. Desde la opción Insertar código veremos la línea de código html a insertar. Copiaremos esa línea, en desde la propia entrada de nuestro blog donde queramos colocar el documento y siempre en la pestaña HTML (no Redactar) copiaremos dicha línea dónde queramos ubicar el documento (ver imagen).

Opciones de redacción (Redactar y HTML) en Blogger.

Obtendremos el siguiente resultado:


Si el texto lo habéis encontrado en la web puede ocurrir dos cosas:
ii.1 Que lo hayáis descargado en la web para verlo íntegro, de manera que estaremos en el caso "i". La diferencia será que debemos cerciorarnos si tenemos permiso para distribuir este trabajo, colgarlo en nuestra web, editarlo.. (ver licencias Creative Commons).

ii.2 Hemos encontrado dicho texto en una web de distribución de documentos. Los pasos para colgar un documento encontrado en webs tipo SlideShare son muy sencillos:
      a. Una vez encontrado el documento pinchas en él para visualizarlo.
      b. Observarás que aparecen unas opciones en la parte superior izquierda del cuadro que enmarca al texto (ver imagen).

Compartir documentos en SlideShare

      c. Desde Download (1) podrás descargar el documento si lo necesitas, sea para consultas o para editarlo. Desde Embed (2) podrás compartir el archivo en tu página web personal o tú blog. Así, en nuestro caso, pincheremos en Embed (literalmente incrustar).

      d. Automáticamente nos aparecerá una línea de código html con las dimensiones, dirección, identificador, características.. del documento. Ese línea la deberemos copiar para a continuación pegarla en nuestro blog en el lugar destinado y, muy importante, en la pestaña HTML de blogger (no en Redactar normal). Una vez pegada podemos volver a la opción redactar o vista previa para ver como queda.

      e. Finalmente modificaremos, siempre desde la pestaña HTML, cualquiera de las características que define el código (por ejemplo para adaptarlo a la amplitud de nuestro blog).

NOTA. En algunas de estas páginas requieren que te habrás una cuenta (gratuita) o que cuelgues algo de material propio para poder descargar o compartir documentos de otras personas. 

Guia de Introduccion sobre Optimización para Buscadores

View more documents from Noa Marcos
  

Reproducir música de fondo en nuestro blog

Si lo que queremos es que se reproduzca una canción de fondo, sin necesidad de darle al play, sino que simplemente comience a sonar cuando se abra el blog los pasos son los siguientes:
i. Seleccionamos la canción de YouTube que nos interese.
ii. Procedemos como si fueramos a colgar el vídeo completo de YouTube en nuestro blog. Pinchamos en Compartir<Insertar y pinchamos sobre la opción "Utilizar código de inserción anterior". Copiamos dicho código completo, por ejemplo éste:

<object width="420" height="315"><param name="movie" value="http://www.youtube.com/v/QEllLECo4OM?version=3&amp;hl=es_ES&amp;rel=0"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/QEllLECo4OM?version=3&amp;hl=es_ES&amp;rel=0" type="application/x-shockwave-flash" width="420" height="315" allowscriptaccess="always" allowfullscreen="true"></embed></object>

- Debemos cambiar, las dos veces en las que aparece, version por autoplay, y el 3 que aparece a continuación del igual por un 1.

<object width="420" height="315"><param name="movie" value="http://www.youtube.com/v/QEllLECo4OM?autoplay=1&amp;hl=es_ES&amp;rel=0"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/QEllLECo4OM?autoplay=1&amp;hl=es_ES&amp;rel=0" type="application/x-shockwave-flash" width="420" height="315" allowscriptaccess="always" allowfullscreen="true"></embed></object>

- Una vez hecho lo importante podemos plantearnos que no aparezca la imagen. Para ello simplemente definimos las altura y anchura como de tamaño 0 (en dos lugares nuevamente), quedando así:

<object width="0" height="0"><param name="movie" value="http://www.youtube.com/v/QEllLECo4OM?autoplay=1&amp;hl=es_ES&amp;rel=0"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/QEllLECo4OM?autoplay=1&amp;hl=es_ES&amp;rel=0" type="application/x-shockwave-flash" width="0" height="0" allowscriptaccess="always" allowfullscreen="true"></embed></object>

- Finalmente mi consejo es que este mismo código lo coloquéis como un gadget en la barra lateral en lugar de en una entrada, pero según vuestras necesidades.


CONSEJO. Esta opción puede ser una buena opción si vuestro blog se adapta a ello. Lo normal es que la música de fondo acabe cansando o distraiga la atención del contenido principal. De poner una música de fondo procurar que sea discreta, sin letra y larga para que se repita constantemente.

VIDEOTUTORIAL. Como reproducir música de fondo de YouTube en Blogger (segunda parte del video, a partir del minuto 5').

Como poner música de YouTube en Blogger

Para reproducir una canción en nuestro blog lo más común es acoplar un reproductor, es decir, introducir el código del mismo, para después permitir que, a través de los controles de los que éste dispone, podamos escuchar la canción en el momento que nos apetezca.

Pero, en esta ocasión proponemos un sistema mucho más rápido y sencillo que nos permitirá escuchar cualquier canción que encontremos en YouTube modificando mínimamente el código de la misma. La idea la encontré en el blog de Mandelrot (al que agradezco la resolución de medidas y del div).

La idea es la siguiente:
i. Vamos a la canción de YouTube que nos interese.
ii. Procedemos como si fuéramos a colgar el vídeo completo de YouTube en nuestro blog. Pinchamos en Compartir<Insertar y copiamos el código completo, por ejemplo éste:

<iframe width="560" height="315" src="http://www.youtube.com/embed/hq2s0AhdFE4?rel=0" frameborder="0" allowfullscreen></iframe>

iii. La altura óptima para reproducir la canción como una línea es 37, por lo tanto modificamos dónde ponía 315 (en mi caso), ponemos 37. Con éste cambio conseguiremos ver los botones de reproducción y el temporizador. Para que el ancho quede perfecto podemos poner 640, quedando así:

<iframe width="640" height="37" src="http://www.youtube.com/embed/hq2s0AhdFE4?rel=0" frameborder="0" allowfullscreen></iframe>

iv. Finalmente incluimos una línea de código nueva si queremos evitar que aparezcan los molestos enlaces de compartir y more info, en la que el nuevo ancho evite esa zona (unos 466 de ancho). Será una línea div (contenedor a nivel de bloque) que nos oculte la parte sobrante:

<div style="overflow: hidden; width: 466px;">
<iframe width="640" height="37" src="http://www.youtube.com/embed/hq2s0AhdFE4?rel=0" frameborder="0" allowfullscreen></iframe>

</div>

OJO! No olvides cerrar el div que acabamos de abrir (</div>).


El resultado es el siguiente:

Pequeña variante en el código para reducir la anchura:

Ejemplo utilizado en el videotutorial:

SABER MÁS. Si quieres saber que indica cada una de las ordenes del código HTML de los videos de YouTube puedes ver un pequeño tutorial aquí.


VIDEOTUTORIAL. Como poner música de YouTube en Blogger.