Blogconsejo

Insertar un video en el blog

2010-09-29T15:21:00.002+02:00

Colocar un vídeo en tu blog a partir de youtube, vimeo u otro sistema de vídeos es bastante fácil. También blogger incluye un sistema para subir vídeo propios basado en el ya extinto Google Vídeos. Hacemos un repaso de las formas básicas de colocar un vídeo en tu blog, y algunos tips para hacerlo mejor.

La primera opción que se tiene es subir un vídeo propio a través del mismo Blogger, con el antiguo sistema de Google Vídeos. Este sirve para cuando tienes el vídeo en tu PC, un vídeo personal, y para que sea solamente accesible desde tu blog y así no tener que usar algún sistema externo. Este sistema puede ser el más fácil, ya que solamente hay que clicar en Insertar un vídeo en la barra de edición al escribir una entrada y seguir los pasos. El problema que surge es que no hay mas allá, no hay lista de vídeos, no hay métodos de personalización del vídeo ni nada más.

La segunda opción es insertar un vídeo desde cualquiera de los sistemas de subidas de vídeos que existen como vimeo, dailymotion, metacafe, etc. y sobre todo, Youtube. Colocar un enlace al vídeo es tan fácil como copiar la dirección url del vídeo y pegarla en el blog, pero normalmente estos sistemas también permiten insertar el vídeo para verlo directamente en el blog. Los pros de estos sistemas es que no solamente te permiten subir los vídeos (cada uno con unos ciertos límites) sino que los hacen visibles a los demás y se hace publicidad de tu blog o sitio web (si uno quiere, ya que suelen tener ciertos grados de privacidad) y tienen un sistema de personalización y organización de los vídeos aceptable, pudiendo republicar los vídeos fácilmente y pudiendo usarla como una biblioteca de tus propios vídeos.

Centrándonos en Youtube, aunque existirán métodos parecidos en otras webs similares, nos encontraremos dos métodos, el demasiado fácil o el normal o común que es el que se suele usar:

Método demasiado fácil

Al pulsar el botón Compartir, nos mostrará el enlace del vídeo, y una serie de opciones donde una de ellas es Blogger. Al pulsar este botón se abrirá una pequeña ventana con un editor de blogger básico, y en la esquina se muestra el blog actual donde se esta editando. En ese editor ya estará añadido el vídeo, y se podrá publicar o guardar la entrada (se recomienda esto segundo, para poder editar en el blog la entrada posteriormente y con mas detalle)

Método normal o común (recomendado)

Al pulsar el botón insertar, nos mostrará un código y una serie de opciones de personalización. Al cambiar estas opciones el código cambiará, así que copiar este código al final. Se pueden personalizar temas como el tamaño o el color del reproductor, y otros detalles (En otras webs el sistema es parecido, con un código casi igual, aunque la personalización puede ser poca o inexistente).

Después de copiar este código, hay que ir al blog, al lugar donde se quiera colocar y entrar en Edición HTML, y copiar el código en el lugar donde se quiera colocar el vídeo. Por esto se recomienda que la entrada ya este escrita completamente y que el lugar este marcado con un texto que se intercambiará por el vídeo, para no perderse por el código HTML.

Tip: Si se quiere que el vídeo este centrado en la entrada y no hacia uno de los lados, se puede añadir al código a los los lados un <center>...CÓDIGO DEL VÍDEO... </center>. Con esta sencilla modificación tendremos el vídeo centrado en nuestra entrada. También se puede usar la herramienta de alineación del redactor de blogger sobre el cuadrado gris que representa el vídeo.

(El vídeo no es mio, es de oscargp86 que explica exactamente este último paso en forma de vídeo, para el que lo prefiera)

Elemento que flota sobre nuestra web

2010-08-30T00:09:00.003+02:00

En unas pocas lineas os vamos a enseñar como colocar en vuestra web o blog una imagen o "caja" que flota sobre todo nuestro contenido, no perdiéndose de vista al mantenerse siempre en el mismo lugar de nuestra pantalla. Este será un ejemplo básico, aunque empezando con este mismo código se pueden llegar a ideas muy interesantes para aplicar.

Elemento Flotante como este, que puede ser una imagen con enlace, por ejemplo

La idea es poner una imagen o un especie de "caja" (como se puede ver en la esquina inferior izquierda, el cuadrado rojo) para meter dentro varias imágenes o lo que se quiera, y que se mantenga flotando encima de todo el contenido del blog, en un lugar fijo, que no cambie aunque bajemos el contenido del blog o lo subamos. Esto se puede conseguir fácilmente con una propiedad CSS del HTML, y lo explicaremos de forma que se pueda usar dentro de una entrada (para que se vea sólo en esa entrada concreta) o que se pueda colocar en un widget HTML, de forma que así no sea necesario modificar la plantilla en ningún momento.

Dividiremos en dos partes lo que hay que colocar. Primero, las propiedades para hacer el objeto en cuestión en un elemento flotante:

bottom: 0;

right: 0;

left: 0;

width: 100px;

height: 100px;

}
</style>

Este código es el que hace el objeto flotante (el fixed, en violeta), y hay que tener dos cosas en cuenta para su correcto funcionamiento.

El objeto es necesario colocarlo en un lugar que puede ser: arriba (top), abajo (bottom), a la izquierda (left) o a la derecha (right). Solo hace falta colocar dos datos, es decir, si se coloca arriba del todo (top) no hace falta poner el dato referente a abajo (bottom) porque ya se sobrentiende, y esto igual con el izquierda-derecha. El número que le acompaña son los píxeles o el porcentaje que le separan del lado indicado, por ejemplo, si se indica top: 50px el objeto estará a 50 píxeles de la parte de arriba, o si se coloca left: 33%, el objeto empezará justo en un tercio de la pantalla, cerca de la parte izquierda
los elemento width y height, son el tamaño del objeto, el ancho y el alto respectivamente. Es importante ajustarlo a la imagen o texto que se quiera incluir, para que no haya problemas.

Y después queda el objeto que se quiere hacer flotante:

<div id="flotante1">...CONTENIDO...</div>

Siendo el CONTENIDO lo que contiene esta "caja" flotante. Notar que el "id" es el mismo que en el código de arriba, y se pueden hacer varios códigos parecidos con flotante1, flotante2, o con el nombre que uno quiera.

También puede ser simplemente una imagen:

Para colocar un ejemplo práctico y que casi todo el mundo gustará usar, ya que es como el objeto colocado como se ve en esta entrada, con una imagen con enlace , sería como sigue:

Haciendo los datos width y height igual que los datos de ancho y alto de la imagen, colocando la dirección del enlace y la dirección donde se encuentra la imagen, tendréis el objeto flotante. Recordad que esto lo podéis colocar en un widget html o directamente en "Edición de HTML" en una entrada, para que sólo se vea el objeto al visualizar esa entrada.

Dudas y errores en los comentarios, gracias

Nociones basicas de HTML/XML

2010-08-10T10:00:00.008+02:00

El HTML es el lenguaje base de toda página web que existe hoy en día, y el XML es el estilo de lenguaje usado para codificar las plantillas de blogger. Ambos son muy parecidos, realmente hermanos, hijos del mismo tipo de entender lo que podría ser una pagina web, blog, o cualquier estructura de datos. Vamos a hacer una introducción básica de como funcionan este tipo de lenguajes para poder empezar a entenderlos.

Lo primero que hay que comprender es que este tipo de lenguajes se basan en Etiquetas (o Marcas, Tags...) (por eso es... Marked Language) siendo el HTML un lenguaje que puede codificar un texto con imágenes y diversas estructuras (tablas, etc.), lo que también se puede llamar HiperTexto (HyperText...) y que a posteriori se comenzó a usar para la Web y se ha convertido en la base de lo que es internet hoy en día.
XML no es un lenguaje en concreto, sino una forma de escribir lenguajes como uno quiera (eXtensible...) basado en la misma idea de las etiquetas, usando las etiquetas que uno decida para lo que quiera codificar dentro de cada archivo.

Pero, ¿Qué es una etiqueta? Usemos un ejemplo básico de HTML:

<b>este texto esta en negrita</b>
este texto esta en negrita

Aquí tenemos la etiqueta b (Bold) de HTML, que convierte un fragmento de texto a negrita. Como se puede ver, hay dos etiquetas, una b de apertura, y un /b que cierra, ambos encerrados en los caracteres Mayor qué, Menor qué. Esta es la forma básica de escribir una etiqueta, tanto en HTML, como en XML o en cualquier lenguaje de este tipo. Sólo cambia el texto de la etiqueta (en este caso b) y algún detalle introducido en el interior de las etiquetas que veremos más adelante.

La idea de esta forma de escribir las etiquetas, con un punto de apertura y otro de cierre, sirve para que dentro de una etiqueta pueda haber más etiquetas algo que se puede entender con otro ejemplo:

<b>texto en negrita<i> y esto además en cursiva</i></b>
texto en negrita y esta además en cursiva

La etiqueta i (Italic) es la etiqueta HTML para las letras en cursiva. Como se puede ver en el ejemplo toda la frase esta dentro de las etiquetas b, pero solo parte final esta en la etiqueta i. Por tanto, todo el texto esta en negrita puesto que toda la frase esta dentro de las etiquetas b, pero sólo la parte final en cursiva puesto que sólo esas letras están dentro de la etiqueta i.

Tanto un lenguaje HTML y XML solamente se trata de un conjunto de etiquetas que se encuentran unas a lado de otras, y muchas dentro de otras. En HTML las etiquetas son conocidas, como i, b, head, body, div, img, br... En XML las etiquetas las decide el creador del lenguaje para su propio uso, en el caso de blogger y sus plantillas, existen etiquetas como b:section o b:widget entre otras.

Como detalles finales, comentar dos cosas:

La gran mayoría de las etiquetas necesitan una apertura y cierre pero no todas las etiquetas la necesitan tener específicamente escrita. Por ejemplo en HTML, la etiqueta img (Imagen) o br (Salto de linea) no tiene porque tener una apertura y un cierre escrito puesto que en HTML no se pueden poner (En principio) otras cosas dentro de una imagen, o en un salto de línea es algo puntual sin nada interno. Y tanto en HTML o XML puede haber partes que si tienen principio y final, pero no se escribe el final puesto que no hay nada dentro o se obvia. ¿Como hacerlo correctamente? En la apertura en vez de cerrarse con un <img>...</img> o un <br>...</br>, se escriben de esta forma <img /> o <br />
Las etiquetas pueden tener propiedades, y normalmente las tienen, para indicar parámetros como tamaños, colores, y demás características de una etiqueta en particular, ya cada una de ellas suele tener sus propias propiedades y nombres de propiedades características. En XML estas propiedades las decide el creador del lenguaje, pero se escriben del mismo modo que en el ejemplo con HTML, introduciendo las propiedades dentro del Mayor qué y Menor qué de la apertura, justo después del nombre de la etiqueta. Por ejemplo, en el caso de las imágenes y su etiqueta img, es necesario indicar donde esta la imagen que se quiere poner (src, direccion url donde esta la imagen), y suele ser normal indicarle el tamaño a mostrar (width y height, altura y anchura respectivamente, por ejemplo 320 y 240 píxeles):

Espero vuestros comentarios, dudas, ayudas y críticas, no sólo para mejorar este articulo, sino para ver que es lo más conveniente para el próximo relacionado con el tema.

El Favicon

2010-03-29T21:24:00.000+02:00

El favicon (o icono de favoritos, minicono, imagen de pagina) es una pequeña imagen que se asocia a una página web, como puede ser la g minúscula azul de Google, la B naranja y blanca de Blogger, f blanca con fondo azul de Facebook. Pero, ¿Podemos crear una y ponerla para nuestro blog?

Desde hace unos meses, Blogger ha implementado

un widget propio en vista de diseño, facilitando la

creación del Favicon. Este tutorial ya no es necesario

usando ese widget.

Nada mas facil. Primero tienes que crear la imagen, se recomienda que sea pequeña (16x16 píxeles, lo mejor, aunque puede ser mas grande como 64x64 píxeles) y puede ser un gif animado, jpg, png, un ico, o cualquiera en realidad, aunque después opcionalmente (aunque mejor si lo haces) debes seguir las instrucciones al colocarla dependiendo del tipo que sea. Para buscar la imagen, Images Google te puede ayudar.

Segundo, tienes que acceder a tu plantilla (En blogger, Diseño -> Edición HTML), y al principio, justo en la siguiente linea después del <head>:

o también

(Se pueden usar ambos a la vez, para mayor compatibilidad)

Siendo Dirección Favicon la dirección de internet donde esta alojada la imagen.

El image/gif hay que cambiarlo segun el tipo de imagen que este en la Dirección (Si es un GIF, sería image/gif, un JPG image/jpg, un PNG image/png y si es un icono de windows ICO, image/vnd.microsoft.icon). Este dato type se puede quitar, pero funciona mucho mejor el favicon con este dato.

Personalizar Barra de Navegación de Blogger

2010-03-24T12:31:00.001+01:00

A los que usamos plantillas personalizadas, la barra de navegación de blogger nos supone un atraso al no poder casi ni tocar por lo que solemos quitarla sin miramientos. Las plantillas por defecto de blogger las traen, y casi en todos los casos en ese azul corporativo que tanto da el cante. Os vamos a contar algunas personalizaciones que se pueden hacer de una forma fácil y efectiva.

Lo primero que podemos personalizar, esta en la parte de diseño del blog, ya que la barra trae un boton de "editar" y una serie de colores para elegir. Hago especial mención a los nuevos colores blanco y negro transparente que añadieron hace unos meses, puesto que dan un apaño para casi cualquier blog. Así de fácil ya tenemos la barra distinta a la corporativa de blogger.

El resto se trata de toquetear un poco el código de la plantilla, en la parte de CSS.

Primero, irse a Diseño -> Edición HTML. Si en vuestro blog se ve la barra con normalidad y no la habéis modificado, no tendréis un código parecido a este, que es el que deberéis de incluir justo después de todas las lineas <Variable....>

#navbar, #navbar-iframe {
position: absolute;
z-index: 10;
top: 0px;
right: 0px;
width: 100%;
opacity: 0.0;
filter:alpha(Opacity=0)
display: block;
visibility: visible;
}

#navbar:hover, #navbar-iframe:hover {
opacity: 1.0;
filter:alpha(Opacity=100,FinishedOpacity=100)
}

Este código no hace nada, exceptuando el texto verde, pero modificando ciertas cosas se pueden conseguir lo que queremos:

Si queremos que desaparezca la barra totalmente, debéis cambiar en display, en vez de block, poned none, y en visibility en vez de poner visible poned hidden
Si queréis que la barra se vea siempre arriba, aunque bajemos el blog hacia abajo, position en vez de absolute, debe ser fixed
Las partes verdes son opcionales, si queremos que la barra aparezca y desaparezca si pasamos por encima el ratón lo escribimos. Si no se quiere este efecto, simplemente con no añadir las partes verdes no ocurre esto.

Así que con unos pocos toques, y añadiendo unas pocas y fáciles lineas, podemos tener una barra de navegación distinta a lo que estamos acostumbrados a ver, que normalmente es tener una barra de navegación, o no tenerla.

Leer más nativo en Blogger

2010-03-21T17:07:00.012+01:00

En una entrada anterior veíamos cómo hacer el truco de leer más (entradas resumidas en la página principal, accesibles en su totalidad desde un enlace tipo seguir leyendo). Pero desde que Blogger implementó de manera nativa la posibilidad de hacerlo, ya no es necesario complicarse la vida con aquel hack.

Utilicemos el antiguo o el nuevo editor, eso es lo de menos, podemos hacer el corte donde mostrar el resumen y ocultar el resto, simplemente añadiendo  donde nos interese mostrar la entrada en la página principal:

PARTE DE LA ENTRADA A MOSTRAR
<!-- more -->
RESTO DE LA ENTRADA

Pero hay que tener una especial precaución al hacerlo. Si utilizamos formato para el texto (justificar o centrar el texto, por ejemplo), se generan en el HTML de la entrada unas etiquetas <div>. Estas etiquetas deben abrirse y cerrarse correctamente para evitar errores. Y nada puede cortarlas por la mitad. Si precisamente es entre dos párrafos que están justificados donde deseamos colocar el , como en este ejemplo:


<div style="text-align: justify;">Texto visible. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

<!-- more -->

Resto de la entrada. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

Así, seguramente, nos dará errores al generarse la página, como que desaparezca la sidebar, que se escondan elementos, entre otras cosas inesperadas, que dependerán de la plantilla.

La manera de que esto no ocurra es cerrar la etiqueta <div> que haya antes del último . El código quedaría de la siguiente manera:


<div style="text-align: justify;">Texto visible. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>

<!-- more -->

<div style="text-align: justify;">Resto de la entrada. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

Pero si no solemos utilizar demasiado el editor HTML de las entradas, y no nos queremos complicar demasiado la vida, con justificar todos los párrafos uno a uno y luego añadir el  (este sí ha de hacerse en la vista HTLM) justo antes de publicar, sería suficiente, y haríamos, a fin de cuentas, exactamente lo mismo que con código.

Cómo cambiar la URL y el nombre mostrado

2009-08-26T21:40:00.002+02:00

Maria Amparo, una amiga mía, se abrió un blog el otro día. Le sugerí que se acortara la URL -dirección web del blog- porque resulta muy larga y redundante. Y me preguntó cómo se hacía. Claro, para un blogger experimentado, es una cosa sencilla, pero para alguien que acaba de empezar puede no resultar tanto.

Para empezar, entramos, con acceder en la cuenta de Google -recordemos que Blogger es un servicio más de Google desde hace un tiempo-. Buscamos Blogger y entramos. Nos encontraremos con el Escritorio de Blogger:

Entras en la Configuración de tu blog. Una vez ahí, buscas la pestaña Publicación. Y en ese apartado es donde se puede cambiar la URL. Obviamente, blogspot.com no lo puedes eliminar, pero lo que hay antes del punto sí.

Cambias la Dirección, pones la palabra de verificación que te piden, le das a Guardar Configuración, y listo. Los efectos son inmediatos.

Aunque es muy sencillo cambiar la dirección del blog, es más que aconsejable pensar muy bien desde un principio cuál va a ser, porque si luego te dedicas a cambiarla cuando te canses, es muy posible que rompas enlaces externos que apunten a tu blog y luego resulte casi imposible localizarlo.

Por otro lado, mi amiga también me preguntaba cómo cambiar su nombre de usuario o de autor en Blogger. Este nombre es importante, pues luego será el que firme los posts o entradas y los comentarios que hagas por ahí, además de encabezar el perfil de tu cuenta. Al igual que la dirección, también es importante elegirla bien desde el principio para no marear en la Blogocosa, escribiendo cada vez con un nombre distinto, por ejemplo.

Para cambiar o establecer el nombre de usuario o autor, hay que volver al Escritorio de Blogger. Una vez ahí, seleccionar Editar Perfil, como muestra la imagen:

Y una vez dentro buscas Nombre Mostrado, y pones el que te gusta. Los campos Nombre y Apellido puedes dejarlos perfectamente en blanco, con el fin de preservar tu intimidad, si es tu deseo.

En esta misma página, ya que estamos, podemos subir el avatar de usuario -Fotografía-, que saldrá en los comentarios y en nuestro perfil, los datos que estimemos oportuno publicar sobre nosotros, establecer un correo para que puedan ponerse en contacto con nosotros, información sobre nuestros gustos personales, etc.

Una vez tenemos claros los cambios, para que sean efectivos hay que pulsar, antes de salir, el botón que hay abajo del todo que pone Guardar Perfil.

Leer más en Blogger

2009-08-17T00:40:00.003+02:00

Actualización: desde la implementación del leer más nativo en Blogger, este hack ya no es necesario. Hay otro post explicando la manera de hacerlo nativamente, sin hacks externos a Blogger. Lo podéis consultar aquí.

No, no se trata de una invitación a que leáis más en los blogs de Blogger, sino del típico truco de esconder parte de las entradas en la vista de la página principal.

Este hack lo publicamos a petición de PDD20 y de Irene.

En primer lugar, tras la salvaguarda habitual de la plantilla, pues vamos a hacer unos cambios importantes en ella, buscamos estas líneas entre el código, tras Expandir plantillas de artilugios:

<div class='post-body entry-content'>

Es el lugar de la plantilla donde van los posts. Justo a continuación, dejando un par de saltos de líneas para tenerlo todo un poco más ordenado, pegamos estas nuevas líneas:

<b:if cond='data:blog.pageType == "item"'>

<style>.fullpost{display:inline;}</style>

<p><data:post.body/></p>

<b:else/>

<style>.fullpost{display:none;}</style>

Es un código con condicionales (if). Es la parte que le dice a Blogger si estamos viendo la página principal o si se trata de una entrada en concreto. En concreto le está diciendo que se oculte algo a partir de cierto punto, y que se muestre algo en su lugar en la página principal.

Para ello, tenemos que decirle que será ese algo, que puede ser un texto o una imagen. Buscamos esta linea en el código:

<data:post.body/>

Y justo a continuación, ponemos esto:

<a expr:href='data:post.url'>Leer más...</a>

En este caso es un simple texto que dice Leer más... Pero podemos poner cualquier otro, o poner una imagen en su lugar, para lo que alojaremos la imagen en nuestro servidor habitual o en Picassa, y una vez tengamos su dirección web o URL, en vez del código anterior, pondríamos este otro:

<a expr:href='data:post.url'><img border="0" src="URL_IMAGEN"></img></a>

Se puede centrar o alinear a la derecha. En mi blog lo tengo alineado a la derecha. El código que tengo para ello es este:

<div style='text-align: right;'><a expr:href='data:post.url'><b><i>Leer más...</i></b></a></div>

Las etiquetas <i> y <b> son para cursiva y negrita, respectivamente. En principio, es posible el uso de casi cualquier código html en esta parte.

A partir de aquí, cada cual con su imaginación haga lo que quiera.

Guardamos los cambios en la plantilla y continuamos al siguiente paso.

Vamos a colocar el corte en los posts, pues este hack no es automático, y el autor de las entradas tiene que decidir hasta donde se verá el contenido de cada una de ellas en la página principal.

Creamos una nueva entrada, o abrimos una existente, en Edición de HTML, y situamos lo siguiente justo antes de la parte que queremos esté oculta en la página principal:

<span class="fullpost">

Y al final de todo el código de la entrada, cerramos la etiqueta con un simple </span>.

De nada sirve visualizar en Vista previa, porque no veremos el efecto, así que publicamos, abrimos el blog por la página principal y comprobamos que los posts editados se interrumpen por la parte deseada.

Esto es todo lo que hay que hacer para que el truco funcione, pero tengo que hacer unas consideraciones de importancia a quienes os aventuréis a implementarlo:

No es automático. Ya se ha dicho pero lo repito. Hay que añadir en todos los posts que se desee que estén cortados el <span class="fullpost"> y su correspondiente </span>.
En las entradas en que no se haga el corte, queramos o no, saldrá al final de todas ellas el Leer más. Es algo que tengo pendiente solucionar. Se admiten sugerencias...
Importante: si eres de los que retocan las entradas hasta el último momento, justifican, dan estilos a los textos, etc. Lo mejor es dejar para lo último lo de hacer el corte, y bajo ningún concepto abrir la pestaña de edición Redactar una vez puesto el <span class="fullpost">, o se generarán tantas copias del mismo código como párrafos tenga la entrada. Lo mejor es publicar directamente una vez puesto el código del corte.

Por último, deciros que este truco lo aprendí de TodoBlogspot, en la entrada sobre Entradas Ampliables.

Abrir links en otra ventana

2009-08-13T13:05:00.013+02:00

Mayo nos escribe con la siguiente consulta:

"Me gustaría saber lo que tengo que hacer para que los enlaces en el blog, se abran en otra ventana"

La solución es sencilla. Basta con añadir un poquito más de código a nuestros enlaces.
Justo después del link, añadiremos target="_blank"

Ver Ejemplo

Si quieres añadir una leyenda que aparezca al pasar el puntero sobre ese enlace, solo tienes que poner title="TEXTO QUE QUIERAS" en el código.

Ver Ejemplo

Crear Blog (Parte 1)

2009-07-06T01:40:00.005+02:00

Hola amigos.

Este artículo y los siguientes con este título, van dirigidos a todos aquellos usuarios de la red que aún no se han atrevido a crear un blog, por verlo o creerlo complicado o porque carecen de tiempo para estar investigando de los pasos a seguir para crearlo.

Todos tenemos una afición, algo que contar o algo que dar a conocer a los demás, pues a veces sin querer y sin saberlo, hay personas que tienen dentro de su mente pensamientos e ideas que nos puedan servir a los demás.

Por eso, os animo a que si no lo habéis hecho aún, os lancéis a crear vuestro propio blog.

Vamos a centrarnos en Blogger y en Wordpress, por ser los sitios más comunes. Si os fijais, vereis que es muy sencillo crear un blog, y que en todos los sitios se hace de manera muy similar.

En Blogger

Sólo necesitaremos crear una cuenta en Google, para que luego, acompañado de la contraseña que le pongas, te dé acceso a crear tu propio blog. También te sirve si ya tienes una cuenta en Gmail, Grupos de Google u orkut.

Lo primero es pensar en el nombre que le queremos dar(la URL).

Para crear esa cuenta en google, tendrás que tener otra cuenta en otro sitio, que es la que te identificará como usuario. Después tendrás que añadir una contraseña y responder a breves preguntas como lo haces al abrir otras cuentas y listo, ya tienes tu cuenta en Google.

Una vez que has entrado en tu cuenta de Google, entra en "mi cuenta" y después en Blogger, que te llevará a una página de Blogger en la que te la opción de poner el nombre al blog y una dirección o URL de blogspot. Comprueba también el que esté disponible y la puedas poner.

Verifica la palabra que te pone y dale a SIGUIENTE.

Ahí verás que te la la opción de elegir una plantilla que será la que le pongas de fondo y de diseño a tu blog.

Elige una que te guste, más adelante podrás cambiar si lo deseas. En mi caso he elegido la Mínima y le he dado a CONTINUAR.

En Wordpress

Entramos en http://es.wordpress.com/ y clicamos sobre "Regístrate ahora".

Rellenamos los datos que nos piden (En este caso señalaremos al final la casilla de " venga dame mi blog", y vamos a "Siguiente".

Después elegimos la url que tendrá nuestro blog, su titulo, lenguaje y privacidad (en este caso señalaremos la casilla de privacidad) y marcamos "Registrarse".

El paso siguiente será comprobar en nuestra bandeja de entrada si hemos recibido un mail para activar la cuenta en wordpress.

Entramos en el mail, y clicamos sobre el enlace que nos aparece para activar nuestra cuenta.

Nos aparecerá una página con nuestro nick y nuestra contraseña. Vamos a " View your site" donde visualizaremos nuestro nuevo blog o a "login" para comenzar a publicar o modificar el diseño :)

Y ya está creado el blog. A partir de aquí ya puedes publicar lo que quieras :)

Poco a poco seguiremos viendo y aclarando cosas que te van a resultar útiles y sencillas.

Un saludopides.

Recuperar un blog (con blogger)

2009-06-26T11:14:00.009+02:00

Hola a todos!

Eva nos pide a través del formulario de contacto si existe alguna manera de "recuperar" un blog que ha sido suprimido.

La respuesta es SI. Desde hace un par de meses. Y además, de una manera muy sencilla.

Para comenzar ingresamos en blogger.com con nuestros datos de usuario. Tras esto vamos al escritorio.

Ahi, nos aparecerá el blog (o lista de blogs) que hemos creado desde esa cuenta de usuario.

Al final de ese listado, nos aparecerá el blog o blogs que hemos eliminado.

Daremos a "Recuperar" este blog. Tras esto nos aparecerá un mensaje debajo de "Escritorio" avisandonos de que nuestro blog ha sido recuperado :)

Efecto movimiento en el Header

2009-06-20T13:08:00.006+02:00

Irene nos consultó a través del correo lo siguiente:

"Me gustaría saber como se logra el efecto para que el header se mueva cada vez que apoyas el cursor encima"

El efecto se logra de una manera muy sencilla, ya que los cambios que tenemos que hacer en nuestra plantilla, son mínimos.

Si os habeis fijado en los blogs de Yenodeblogs, en todos se ha incluido ese efecto, pero, además de afectar al header, afecta a los enlaces del blog (Titulos de las entradas, enlaces a las entradas, links, etc.)

En primer lugar, buscaremos donde se encuentra el código que afecta a los links.
En la mayoría de las plantillas lo encontraremos en

/* Links

----------------------------------------------- */

Una vez localizado, nos colocaremos después de a:hover {

Y justo ahí es donde debemos añadir el código que definirá el movimiento de nuestros links. Para ello, debemos elegir las direcciones en las que queremos que el movimiento se realice. Por ejemplo, en Blogconsejo, el efecto va hacia la izquierda y hacia abajo.

position: relative;

Y ahora añadiremos los valores que le daremos al movimiento. Escribiendo en una segunda linea el valor de "top" , "left", "bottom" o "right"

Con top estamos añadiendo el movimiento hacia abajo.
Con left hacia la derecha.
Si queremos que el efecto sea hacia arriba pondremos bottom.
Y si lo queremos hacia la izquierda pondremos right.

Además podremos elegir lo marcado que queremos que se vea este efecto. En nuestro caso el valor que le hemos dado es de 1px, pero si quieres que el efecto se note más, deberas darle un valor de 2px, o más.

Un ejemplo de esto seria:
top:1px;

- En el caso de blogconsejo, el movimiento se realiza con top y con left. Debeis tener en cuenta que si poneis top, no podeis poner bottom, y si poneis left no podeís poner righ, ya que no existiría movimiento alguno.

- Si quereis que el movimiento solo afecte al header, debereis realizar los mismos pasos pero en el codigo que afecta al header :)

- Solo será visible en el header si la cabecera está incluida en el elemento de la cabecera que nos muestra en - Elementos de Página-, si la imagen de nuestra cabecera está incuida en el código de la plantilla no se verá el movimiento.

Emoticonos para los comentarios

2009-06-14T23:14:00.002+02:00

¿Tenéis un blog en Blogger y os gustaría tener emoticonos o emoticones para los comentarios? Pues continuad leyendo...

Antes de hacer nada conviene que os busquéis unos emoticonos que os gusten. Aparte del servicio del que yo los tomé, http://smilies-gifs.com/, no os voy a recomendar ningún sitio en concreto, pues sitios así los hay a montones y no sabría orientaros. Además, es cuestión de gustos sobre todo...

Una vez elegidos los monigotes, hay que alojarlos en algún servidor. Tres sitios son recomendables para ello:

Picasa: al fin y al cabo, es donde Blogger aloja nuestras imágenes.
ImageShack: buen lugar para alojar cualquier tipo de imágenes.
SkyDrive: el servicio anexo a MSN y Hotmail. A pesar de los cambios de URL en otros tipos de archivos, parece ser que con las imágenes, de momento, no cambian.

Para BlogConsejo estoy utilizando el último servicio. No obstante, yo recomiendo usar uno de los dos primeros para más seguridad.

Una vez alojados los archivos, tomamos buena nota de sus direcciones, porque las vamos a necesitar muy pronto.

Lo siguiente que necesitamos es un script para transformar determinadas combinaciones de letras en las imágenes de los emoticonos. Lo tenéis tras este enlace, en un archivo comprimido.

Descomprimimos y abrimos el archivo con un editor de textos, tipo Bloc de Notas. Localizamos estas lineas y ponemos las direcciones web de nuestras imágenes en sus lugares correspondientes:

Ver código


d[i].innerHTML = d[i].innerHTML.replace(/\s:-?\)/g, ' <img src="URL_IMAGEN_SONRISA" id="new" /> ');

       d[i].innerHTML = d[i].innerHTML.replace(/\s;-?\)/g, ' <img src="URL_IMAGEN_GUIÑO" id="new" /> ');

       d[i].innerHTML = d[i].innerHTML.replace(/\s:-?\$/g, ' <img src="URL_IMAGEN_RUBOR" id="new" /> ');

       d[i].innerHTML = d[i].innerHTML.replace(/\s:-?\(/g, ' <img src="URL_IMAGEN_TRISTE" id="new" /> ');

       d[i].innerHTML = d[i].innerHTML.replace(/\s:-?D/ig, ' <img src="URL_IMAGEN_RISAS" id="new" /> ');

       d[i].innerHTML = d[i].innerHTML.replace(/\sx-?D/ig, ' <img src="URL_IMAGEN_(IGUAL QUE EL ANTERIOR, ES POR SI ALGUIEN USA LA COMBINACIÓN xD)" id="new" /> ');

       d[i].innerHTML = d[i].innerHTML.replace(/\sX-?D/ig, ' <img src="URL_IMAGEN_(IGUAL QUE EL ANTERIOR, ES POR SI ALGUIEN USA LA COMBINACIÓN XD)" id="new" /> ');

       d[i].innerHTML = d[i].innerHTML.replace(/\s:-?P/ig, ' <img src="URL_IMAGEN_LENGUA" id="new" /> ');

       d[i].innerHTML = d[i].innerHTML.replace(/\s:-?p/ig, ' <img src="URL_IMAGEN_LENGUA(IGUAL QUE EL ANTERIOR, ES POR SI SE USA LA p EN MINÚSCULAS)" id="new" /> ');

       d[i].innerHTML = d[i].innerHTML.replace(/\s:-?S/ig, ' <img src="URL_IMAGEN_SUSTO" id="new" /> ');

       d[i].innerHTML = d[i].innerHTML.replace(/\s:-?\O/g, ' <img src="URL_IMAGEN_OOOooo" id="new" /> ');

Sustituimos todo el texto que está en rojo por sus correspondientes direcciones, con el http:// incluido, y guardamos el archivo.

A continuación, lo subimos a un servidor. Yo lo que hago es cambiar la extensión .js del archivo a .txt y lo subo a Google Sites. No aconsejo, bajo ningún concepto, subir este archivo a SkyDrive, porque aunque recién subido funciona, a las pocas horas te cambian la URL y ya no te va.

Una vez subido, podemos hacer una llamada al script cualquier punto de la plantilla antes de </head>:

<script src='URL_DEL_ARCHIVO' type='text/javascript'/>

O bien, podemos hacer lo que aconseja JMiur de Vagabundia, de hacer que se cargue sólo cuando se abre una entrada concreta, aligerando la carga de la página principal. ¿Cómo? Colocando estas líneas de código justo antes de </body>, o justo antes de la side bar, es decir, antes de una linea que pone <div id='sidebar-wrapper'> o similar.

Yo lo he puesto en mi blog antes de </body> y, aunque ahora los emoticonos son los últimos en cargar, la página entera tarda menos en cargar.

Por último, el script que facilitamos está preconfigurado para funcionar sólo en los comentarios. Si queréis que funcione en más sitios, antes de subirlo deberíais buscar dentro del código del script esta línea:

var d = [], i=0, def = ['comment-body'];

Y entonces, entre los corchetes donde está ['comment-body'] añadir, separado por comas, las clases que queráis poner del blog para que funcionen los emoticonos en ellas. Por ejemplo, si en el ejemplo anterior, queremos que funcione también en las entradas, pondríamos lo resaltado en rojo:

var d = [], i=0, def = ['comment-body','post-body'];

Seguramente se han quedado cosas en el tintero. Si tenéis alguna duda, no dudéis en comentarlas.

Referencias:

Blotecnia: Tecnología y Sociedad - Emoticonos, smilies en Blogger

Geekaholic - De donde obtuve el script original

Vagabundia - Blogger y los emoticones

Herramientas II (Creando nuestros botones)

2009-05-27T00:59:00.002+02:00

Algunos/as nos habeis comentado como conseguimos que algunos de nuestros enlaces y botones tengan otro tipo de fuente.

Para el diseño de los blogs de Yenodeblogs, la respuesta es muy sencilla: son imágenes.

Esta entrada la dedicaremos a realizar un botón. Por ejemplo el botón de leer más:

Para ello utilizaremos varias de las herramientas de las que ya hablamos en Herramientas I.

Abrimos Paint y GIMP.

En este caso teníamos el código html del color que queriamos utilizar, por lo tanto, en GIMP, clicamos sobre los cuadros de color...

... y en Notación HTML escribimos el código de nuestro color y damos a ENTER.

¿Por qué hacemos estos pasos?

Porque Paint no funciona con los códigos de html y necesitamos conocer la combinación de colores que se realiza para conseguir ese color. ¡Y ya la tenemos!
Si os fijais, por encima de la anotación vienen una serie de letras y numeritos, nosotros vamos a quedarnos con estas:

Abrimos el paint, y vamos a Colores - Modificar colores - Definir colores personalizados - y en "Rojo-verde-azul" copiamos los codigos que nos facilitan en GIMP. Agregamos el color personalizado, le damos a guardar, y listo! ya tenemos nuestro color incluido en la tableta de paint!

Ahora elegimos la forma que queremos para nuestro botón, en este caso, yo he elegido el eclipse.

Elegimos el tipo de fuente que queremos para nuestro botón.

Y escribimos sobre él.(con la opción transparente)

¡Ya tenemos nuestro botón con una fuente diferente casi terminado! Solo nos falta eliminar el fondo blanco de la imagen, para que no aparezca en nuestro blog, para ello regresamos a GIMP, le damos a Abrir y subimos nuestra imagen, vamos a Colores - Color Alfa - nos aseguramos que en "Desde" aparezca el color blanco y le damos a OK. Guardamos la imagen. ¡Cuidado! debemos guardarla con extensión .png sino el fondo de color blanco no desaparecerá.

Ahora queda lo más sencillo, incluirla en nuestra plantilla.
Nos situamos en el lugar donde queremos colocarla, en nuestro caso, en el lugar donde se encuentra el CSS del leer más. Y simplemente copiamos: background: url ( URL DE NUESTRA IMAGEN) no-repeat;

Parece más pesado de lo que es. Pero en la práctica puedes tardar unos 5 minutos en realizarlo únicamente. Hay páginas donde puedes generar tus botones, sin embargo a mí me gusta hacerlo así (algunas veces solo en GIMP) pero entiendo que paint os resultará más sencillo) ya que de esta manera puedo elegir totalmente como quiero que sean, como en este caso, una fuente de letra que defina a nuestras entradas, y que sean totalmente distintos a los demas :)

Resetear el CSS

2009-05-22T10:17:00.003+02:00

En un comentario Arwen nos comenta lo siguiente:

"Tenemos la página que carga bien con Firefox pero sin embargo con Explorer depende de que tipo de fuente incluyamos saca caracteres raros (tipo ASCII) y hace el tamaño de letra (titulos laterales) más grande de lo habitual.
Aunque hemos quitado bastante material pesado de la página (slides y multimedia) cuesta cargar...alguna sugerencia???"

Nuestras plantillas, vienen todas con un CSS determinado. Reseteando estos estilos, nos evitará problemas como el de que nuestro blog se vea de manera diferentes en los navegadores. Reseteando el CSS conseguiremos que nuestro blog se vea como nosotros hemos diseñado :)

Para implementarlo, en primer lugar vamos a hacer una copia de nuestra plantilla.
El que yo utilizo, venía por defecto ya incluido en una de mis primeros diseños, y es el que he seguido manteniendo después.

Nos vamos a Diseño - Edición de HTML

Buscamos:

<b:skin>

Y justo después copiamos el siguiente código:

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;

}

/* remember to define focus styles! */

:focus {
outline: 0;
}

body {
line-height: 1;
color: black;
background: white;

}

ol, ul {
list-style: none;

}

/* tables still need 'cellspacing="0"' in the markup */

table {
border-collapse: separate;
border-spacing: 0;

}

caption, th, td {
text-align: left;
font-weight: normal;
}

blockquote:before, blockquote:after,
q:before, q:after {
content: "";

}

blockquote, q {
quotes: "" "";

}

Guardamos los cambios y listo :)

Este código es de Eric Meyer.

Opción de "Responder comentario"

2009-05-20T00:34:00.009+02:00

Emma nos comenta que le gustaría poder añadir a su blog la opción de responder cada comentario.

Es un tema algo complicado dependiendo de la plataforma que utilicemos, más que el hecho en sí de implementar un código en nuestra plantilla.

En Wordpress

Para wordpress la solución es muy sencilla. Actualmente muchas de sus plantillas ya incorporan esta opción.
Si no es así, existe un plugin para incluir la opción de responder cada mensaje. (@Reply/w comment preview)
Podemos descargarlo Aquí.

En Blogger

Sin embargo para blogger es diferente. No existe ningún script que nos permita de una manera fácil tenerlo en nuestro blog.
Durante el tiempo que he estado informándome sobre esto, la solución que más me ha gustado es la que da DISQUS.

Solamente hay que entrar en la página y registrarse .
Tras esto, nos vamos a nuestro blog, entramos en - Diseño - Edición HTML y Descargamos nuestra plantilla.

Una vez tenemos nuestra plantilla descargada, abrimos la página de Disqus, y vamos a Añadir website.

Escribimos nuestros datos... (el nombre que elijamos será el nick con el que aparecerán nuestros comentarios)

Elegimos nuestra plataforma (en este caso blogger) y aceptamos.

En Upload Template elegimos si queremos que los cambios afecten a las entradas que escribamos a partir de ahora (1) o, a todas las entradas (2). Pinchamos sobre examinar y subimos la plantilla de nuestro blog que previamente habiamos descargado.

Le damos a upload, tras esto nos aparecerá un nuevo código. Es el nuevo código de nuestra plantilla. Ponemos el ratón encima y seleccionamos todo el código.

Volvemos a nuestra plantilla. En Edición de HTML donde nos quedamos antes. Eliminamos todo el código y pegamos el nuevo codigo. Vamos a "Ver blog" y comprobamos que nuestros comentarios ¡han cambiado!

El único "inconveniente" que le veo es que nuestros comentarios dependen de ese servicio. Y no de blogger. Si el servidor que utiliza "se cae" perdemos todos nuestros comentarios, hasta que se solucione el problema. Aunque, en todo el tiempo que lleva funcionando ha fallado una vez, y tardaron menos de 10 minutos en solucionarlo :)

Para ver las imágenes a tamaño natural, haced clic en ellas.

Herramientas I

2009-05-18T12:17:00.006+02:00

Las herramientas con las que trabaja un/a blogger son tan necesarias como el mismo blog. Sin ellas no podría conseguir casi nada de lo que implemento en mi plantilla, o, yendo más lejos, en las entradas.

En esta primera entrada, voy a comentaros las que yo utilizo más habitualmente. ¿Comenzamos?

- Paint: El paint de toda la vida. Es el que más uso para realizar todas las imágenes que utilizo en el diseño de las plantillas. También lo utilice alguna vez para escribir alguna entrada.

- GIMP: Simplemente genial. Como en el anterior también se pueden realizar imágenes, pero trae muchas más posibilidades. Girar imagenes, el texto, efectos, transparencias, etc. Este programa lo iremos viendo poco a poco.

- ImageShack: Para alojar imágenes.

- Colores html: Dispone de una serie de paletas según el color que buscas (grises, rojos, verdes, etc. )Además, cuenta con dos paletas más para, en una ir moviendo el ratón por todos los colores (a modo del paint) y en otra para ir jugando con las barras de color (rojo, verde y azul) para encontrar el color que deseamos :)

- DNJ CLip Color: Ultimamente es el que más utilizo. Por ejemplo para el nuevo diseño de Yenodeblogs, busqué una imagen en google de colores "tierra", y con este programa (hay que descargarlo) fui colocando el puntero sobre la imagen para que me diera el codigo del color que me gustaba. Esto también podemos hacerlo en GIMP, pero ya hay que subir la imagen a Gimp, por lo que así me parece muchomás cómodo.

- Skydrive. Muy util para alojar cualquier archivo. Sin embargo hace poco tiempo hubo problemas con aquellos que tenian extensión .js . Lo sigo utilizando para alojar imágenes ,música, y documentos.

- GoogleSites. También para alojar nuestros archivos. Lo comencé a utilizar cuando en skydrive no podía alojar los script de mi blog. El inconveniente que por el momento le he visto es que tampoco aloja archivos con extensión .js , pero podemos convertirla fácilmente en .txt y funciona igual.

Y creo que no me olvido de ninguna :)

Consejos para los blogs I

2009-05-16T23:37:00.001+02:00

Desde hace ya algún tiempo en el que me incorporé al mundo de los blogs, he ido tomando nota de algunas cosas que me han llamado mucho la atención y que en parte han sido un impedimento para poder disfrutar de la estancia en los mismos, de poder dejar una simple opinión o de poder leer lo que el autor ha publicado. (...)

Por estos motivos, creo conveniente hacer algunas consideraciones.

- En algunos blogs, nada más entrar te recibe un mensaje publicitario que a veces tarda en cargar y supone una gran molestia porque llegan incluso a paralizar las aplicaciones de tu ordenador.

Esta bien tener publicidad para sacar algún dinerito extra, pero al que quiere entrar con asiduidad, se le hace muy molesto y llega a cansar, por lo que puedes perder un contacto.

- En otros, aún llamándote la atención algún artículo, casi son imposibles de leer porque molestan a la vista por su contraste de color (por ejemplo fondo negro y rosa fuerte) o porque las letras se confunden con el fondo y apenas se pueden ver.

En cierta ocasión encontré ciertos artículos que me interesaban y como no podía leerlos, los copié y pegue en mi ordenador para poder leerlos claramente.

- Se da el caso también que te lees un post y quieres dejar un comentario y no lo encuentras. En algunos blogs, te tienes que meter en dos accesos para poder comentar.

Respecto a los comentarios y una vez que has terminado de expresar tu opinión, a veces te salen unas letras anti spam ilegibles u ocultas entre colores y otras formas que dificultan el poder publicar ese comentario, por lo que cuando tenga esa persona que realizar otro comentario, se lo pensará...

- Para facilitar la lectura de los post, es aconsejable el justificar los márgenes y el dejar un espacio entre párrafo y párrafo.

- Para evitar faltas de ortografía, haz tus artículos en algún procesador de textos con corrector ortográfico para evitar errores y faltas, porque si tienes un buen relato pero tiene faltas de ortografía, lo desmerece.

- Intenta disponer de un espacio o facilita la forma de contactar. En algunos blogs es casi imposible o no lo tienen ni siquiera previsto.

Y siempre es bueno que te puedan decir algo por otro medio, pues sin querer te has podido equivocar en algo y siempre es mejor que te lo puedan decir en privado.

- Cuando vayas a dejar un comentario, pon bien tus datos, que es muy posible que a quien visites e incluso otros que han visto tu comentario es posible que quieran ver tu blog, pero si no lo has puesto correctamente, no accederán a tu blog.

- Procura visitar y dejar huella de tu paso, que si visitas y no comentas, no te estarás dando a conocer.

Espero que todo lo expuesto sea de vuestra utilidad.

(Entrada original de Európides)

Formulario de contacto

2009-05-16T23:24:00.001+02:00