(entre paréntesis): Consejos para tu blog

Mostrando las entradas con la etiqueta Consejos para tu blog. Mostrar todas las entradas

miércoles, 12 de noviembre de 2008

Solución: Arregla el ícono (favicon) de tu blog

Recientemente, muchos weblogs hospedados en Blogger (incluyendo este) han presentado el inconveniente de que el icono de página (conocido también como favicon) ha sido restablecido al icono por defecto de Blogger (

), sustituyendo cualquier icono personalizado que hubieras agregado a tu blog. Esto se debe a que los códigos que son incluidos por defecto en las plantillas de Blogger fueron actualizados recientemente. Por suerte, la solución es sencilla.

Para solventar este inconveniente, ve a la pestaña "Diseño" de tu panel de Blogger, y ahí selecciona la pestaña "Edición de HTML". Como siempre, te recomendamos guardar una copia de seguridad de tu plantilla antes de hacerle cualquier modificación.

En el código HTML de tu blog, busca la sentencia que define tu favicon personalizado. Normalmente, es algo como esto:



<link href='http://www.midominio.com/mifavicon.jpg' type='image/jpg'/>

<link href='http://www.midominio.com/mifavicon.jpg' rel='icon' type='image/jpg'/>

Corta ese código y pegalo después de la siguiente sentencia:



<b:include data='blog' name='all-head-content'/>

Guarda tu plantilla, ¡y listo!. Ya tu blog debería haber recuperado su favicon personalizado.

Este inconveniente sucede porque el código incluido por la sentencia



<b:include data='blog' name='all-head-content'/>

fué actualizado para contener la siguiente línea:



<link href='http://www.blogger.com/favicon.ico' rel='icon' type='image/vnd.microsoft.icon'/>

En HTML, si dos o más códigos hacen referencia al mismo valor etiquetado, tiene precedencia el último código en orden de aparición (con ciertas excepciones, más allá del ámbito de esta entrada). Por lo tanto, si un favicon es establecido antes del código incluido "all-head-content", prevalecerá el favicon de Blogger declarado luego. Por ello la solución a este problema es trasladar el código que define el favicon personalizado luego de la sentencia de inclusión "all-head-content".

Si quieres más detalles sobre los favicons y cómo ponerle uno a tu blog, visita: Consejos para tu blog: Ponle un Favicon a tu página.

Fuente: Blogger Buster.

viernes, 12 de octubre de 2007

Consejos para tu blog: Texto e imágenes aleatorias

Existe una gran cantidad de trucos y hacks para blogs, algunos con capacidades muy atractivas y otros con capacidades muy inútiles. Pero sin duda, si quieres desarrollar una página única con identidad propia, los mejores trucos son los más flexibles, los que te ofrecen más posibilidades de personalización a tu manera, y este es uno de esos.

El siguiente truco te permite añadir a tu página una imagen o texto, que irá cambiando cada vez que el usuario recargue o ingrese de nuevo a la página. De esta manera puedes incluir, por ejemplo, algunos de tus pensamientos favoritos para que la gente los lea, y se encuentre uno nuevo cada vez que entre a tu blog, o para poner fotos que quieras compartir, con el mismo comportamiento.

Puedes verlo funcionarlo en esta misma página. Haz clic en "Recargar" o "Actualizar" en tu navegador, y verás que al hacerlo el texto y la imagen a la derecha cambiarán por otro texto y otra imagen.

Para implementar esto en tu blog (en Blogger), sigue estos pasos:

1. Ve a la pestaña "Plantilla" o "Diseño" de tu panel de Blogger, y ahí selecciona la pestaña "Edición de HTML". Se abrirá una página que contiene el código HTML de tu blog. Recuerda que siempre debes guardar una copia de seguridad de tu plantilla antes de modificarla.

2. Busca en el código de tu plantilla la etiqueta <head> e incluye debajo de ella el siguiente código:

<script type='text/javascript'>

var numeroitems = 4 ;

var numaleatorio = Math.random() ;

var aleatorio = Math.round( (numeroitems-1) * numaleatorio) + 1 ;

items = new Array

items[1] = "Elemento 1"

items[2] = "Elemento 2"

items[3] = "Elemento 3"

items[4] = "Elemento 4"

var item = items[aleatorio]

</script>

Lo que hace el código anterior es seleccionar uno de los elementos que le indicamos, al azar. Deberás sustituir "Elemento 1", "Elemento 2", "Elemento 3" y "Elemento 4" por el texto o las imágenes que quieras que aparezcan aleatoriamente.

Por ejemplo si quieres aplicar imágenes aleatorias, el código sería algo como esto:

<script type='text/javascript'>

var numeroitems = 4 ;

var numaleatorio = Math.random() ;

var aleatorio = Math.round( (numeroitems-1) * numaleatorio) + 1 ;

items = new Array

items[1] = "http://www.123clipart.com/freestuff/

backgrnds/bg1.jpg"

items[2] = "http://www.123clipart.com/freestuff/

backgrnds/bg11.jpg"

items[3] = "http://www.123clipart.com/freestuff/

backgrnds/bg23.jpg"

items[4] = "http://www.123clipart.com/freestuff/

backgrnds/bg24.jpg"

var item = items[aleatorio]

</script>

Verás que "Elemento 1", "Elemento 2", "Elemento 3" y "Elemento 4" han sido sustituidos por las direcciones URL de las imágenes.

En el caso de quieras aplicar texto aleatorio, lo único que tienes que tienes que hacer es indicar las frases que quieras que se muestren aleatoriamente. Y no tienen que ser solo cuatro elementos, pueden ser todos los que tu quieras, sólo tienes que crear otra línea:

items[n] = "Elemento n"

por cada elemento que quieras, donde n sería el número del elemento, y modificar el valor de:

var numeroitems = m ;

para hacerlo coincidir con el número de elementos, donde m sería el número total de elementos.

Mira el siguiente ejemplo:

<script type='text/javascript'>

var numeroitems = 11 ;

var numaleatorio = Math.random() ;

var aleatorio = Math.round( (numeroitems-1) * numaleatorio) + 1 ;

items = new Array

items[1] = "Hola"

items[2] = "Esto es un texto aleatorio"

items[3] = "Recarga la página y verás otro texto"

items[4] = "¿Cómo estas?"

items[5] = "Gracias por visitar (entre paréntesis)"

items[6] = "Que estés bien"

items[7] = "Los mejores tutoriales en internet están en (entre paréntesis)"

items[8] = "En serio"

items[9] = "Bienvenido"

items[10] = "Vuelve pronto"

items[11] = "No olvides guardar una copia de tu plantilla antes de modificarla"

var item = items[aleatorio]

</script>

Verás que en este ejemplo, el número de elementos es 11, y esa es la cantidad de items, y el valor de

var numeroitems = 11 ;

Ahora selecciona "Guardar plantilla" para aplicar los cambios a tu blog.

3. Ya tenemos la función habilitada, lo siguiente es aplicarla donde queramos. Lo que tenemos que hacer es incluir los códigos siguientes donde deseemos el contenido aleatorio, dependiendo de si se va a usar texto o imágenes:

Para texto:

<script language="JavaScript">

document.write(item)

</script>

Para imágenes:

<script language="JavaScript">

document.write('<img src="' + item + '">')

</script>

Puedes usar la función donde quieras (excepto en los posts). Yo la implementé como un elemento de mi barra lateral, pero puedes por ejemplo introducirla en el código de tu cabecera para que esta sea distinta cada vez que se recargue tu página.

Cualquier duda o problema que tengas, comunícalo en los comentarios.

jueves, 11 de octubre de 2007

Crea una copia de seguridad de tu plantilla

Aquí en (entre paréntesis) damos varios consejos para optimizar tu blog, y muchos de ellos incluyen la modificación del código HTML de tu página. Es muy importante que siempre, antes de modificar tu plantilla, guardes una copia de seguridad de la misma para que si la estropeas (no te preocupes, a todos nos ha pasado) puedas recuperarla. El procedimiento para hacer una copia de seguridad de tu plantilla es el siguiente:

1. En tu panel de Blogger, ve a la pestaña "Plantilla" o "Diseño", y ahí selecciona la pestaña "Edición de HTML"

3. Busca la opción "Descargar plantilla completa" y haz clic en ella.

4. Se abrirá una ventana parecida a la de la ilustración (dependiendo del navegador que utilices), para abrir o guardar tu plantilla. Selecciona la opción guardar, y listo, ya tienes la plantilla en tu computadora.

En caso de que alguna modificación a tu código HTML salga mal, y no sabes cómo hacer para devolver la página a su estado anterior, utiliza la opción:

Haz clic en "Examinar...", ubica la copia de tu plantilla en tu equipo, y luego haz clic en "Subir". De esta manera habrás recuperado todo el código de tu plantilla, y podrás volver a trabajar en ella.

lunes, 24 de septiembre de 2007

El truco de "Leer más" en Blogger (y un extra)

Hace algunos días publiqué un post para cumplir con la promesa de explicar un procedimiento que permitiera emplear el truco de "leer más" en Blogger. Sin embargo, el método presentaba un desperfecto mayor. A continuación explicaré un procedimiento cuya efectividad he verificado personalmente (puedes ver la prueba en este mismo post). Es un poco más complejo que el método original, pero permite una funcionalidad aparte que puede parecerte más interesante.

El truco de leer más consiste en mostrar en la página principal del blog sólo una parte de los post, y dejar un vínculo que conduzca al resto del texto, ya sea desplegandolo en la misma página principal del blog o conduciendo a la página individual del post. Esto permite al usuario ver más información y acceder sólo a aquella que es de su interés, en vez de pasearse por posts kilométricos para encontrar lo que desea.

Para utlizar esta función, debes hacer lo siguiente:

1. Selecciona la opción "Plantilla" en el panel de tu blog, y luego selecciona la pestaña "Edición de HTML". Lo primero que tienes que hacer siempre que modifiques tu plantilla HTML es guardar una copia de seguridad de ella, para que si la estropeas puedas recuperarla. Para descargar tu plantilla selecciona la opción "Descargar plantilla completa" en la pantalla de edición HTML. Guarda el archivo .xml (tu plantilla) y mantenlo en tu computadora.

2. Activa la casilla "Expandir plantilla de artilugios" del editor HTML. Ahora ubica el código: <head> e incluye debajo del mismo el código que se encuentra en este link o en este otro link (el código no se encuentra en esta página por ser muy extenso).

3. Ahora tienes que decidir cómo quieres mostrar el texto oculto (la segunda parte del post). Si quieres:

a. Mostrar el texto oculto en la misma página principal del blog, por medio de un enlace que "expande" o "contrae" la segunda parte del post, haz lo siguiente:

Ubica el código <div class=’post-body’> e introduce el código en rojo como se muestra más abajo:

<div class='post-body' expr:id='"post-" + data:post.id'>

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

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

<b:else/>
<style>.fullpost {display:none;}</style>
<p><data:post.body/></p>
<span id='showlink'>
<p><a href='javascript:void(0);' expr:onclick='"javascript:showFull(\"post-" + data:post.id + "\");"'>Leer más</a></p>
</span>
<span id='hidelink' style='display:none'>
<p><a href='javascript:void(0);' expr:onclick='"javascript:hideFull(\"post-" + data:post.id + "\");"'>Contraer</a></p>
</span>
<script type='text/javascript'>
checkFull("post-" + "<data:post.id/>");
</script>
</b:if>

<div style='clear: both;'/> 
</div>

b. Si quieres en cambio que al hacer clic en "Leer más" el usuario sea dirigido a la página individual del post, donde podrá encontrar el resto del texto, haz lo siguiente:

Ubica el código <div class=’post-body’> e introduce el código en rojo como se muestra más abajo;

<div class='post-body' expr:id='"post-" + data:post.id'>

<b:if cond='data:blog.pageType == "item"'>
<style>#fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>#fullpost{display:none;}</style>

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

<span id='showlink'>
<a expr:href='data:post.url'>Leer más</a>
</span>
<script type='text/javascript'>
checkFull("post-" + "<data:post.id/>");
</script>
</b:if>

<div style='clear: both;'/> 
</div>

4. Listo, esas son todas las modificaciones que le tienes que hacer a tu plantilla. En los códigos, puedes cambiar el "Leer más" (y el "Contraer" en el caso del método "a") por el texto que tú quieras para personalizarlo. Ahora lo que tienes que hacer cuando desees emplear el código es escribir la primera parte del post que deseas dividir, y luego la segunda parte del post (la que estará oculta) encerrada entre las etiquetas <span id="fullpost"> y </span>

Es decir, en la vista HTML tu post se vería así:

Primera parte del texto
<span id="fullpost">
Segunda parte del texto
</span>

Y eso es todo. Si vas a utilizar la división de post frecuentemente, puede incluir las etiquetas HTML necesarias automáticamente para cada vez que crees un nuevo post. Entérate cómo en este post.

Los códigos son cortesia de Ramani.

Hasta el próximo post...

domingo, 9 de septiembre de 2007

Personaliza el "Leer el resto de esta entrada"

WordPress tiene una función magnifica que permite a sus usuarios dividir fácilmente sus entradas para mostrar sólo una parte del post en la página principal del blog y el resto en la página individual de cada entrada. Pero el vínculo "Leer el resto de esta entrada" para seguir leyendo que pone Wordpress por defecto tal vez no te parezca muy atractivo. Si lo quieres personalizar, tienes que hacer lo siguiente:

Divide tu artículo en el lugar que desees usando la herramienta "Split post with More tag" en el editor de entradas.

Ahora, selecciona la pestaña código. Verás que el editor de WordPress ha colocado la etiqueta  entre la primera y la segunda parte de la entrada. Para perzonalizar el mensaje, lo que tienes que hacer es escribir lo que quieres que diga el enlace dejando un espacio después del "more", es decir:



Por ejemplo:



De esta manera, la entrada lucirá de esta forma:

Espero que este consejo te sea útil. Próximamente explicaré cómo realizar este truco de "Leer más" en Blogger.

Consejos para tu blog: Añade un texto automático a todas tus entradas

¿Quieres incluir un link de social bookmarking (o marcadores sociales) para las entradas de tu blog? ¿Hay una frase que te gusta mucho y quieres incluirla en todos tus posts? Una opción sería escribir el texto que deseas cada vez que crees una entrada, pero si quieres ahorrarte tiempo (más aún si quieres utilizar texto con formato o un código HTML), utiliza la opción "Plantilla de entrada" de Blogger.

Lo que tienes que hacer es dirigirte a la opción "Configuración" en tu panel de Blogger del blog al que deseas incluir el texto automático. Luego, selecciona la pestaña "Formato" y dirigete a la opción "Plantilla de entrada" (al final de la página). Verás un cuadro de texto. Ahí deberás introducir el texto o código HTML que quieres que aparezca en todas tus entradas. De ahí en adelante, cada vez que crees una entrada aparecerá automáticamente lo que introdujiste en el cuadro "Plantilla de entrada".

En el siguiente ejemplo se introduce una imagen con un vínculo para descargar Firefox en cada entrada:

Puedes utilizarlo para incluir publicidad, un eslogan, una imágen, en fin, ¡lo que sea!.

sábado, 21 de julio de 2007

Consejos para tu blog: Ponle un Favicon a tu página

Actualización 1: Debido a un cambio en los códigos incrustados por Google en las plantillas de Blogger, puede que algunos usuarios de este servicio no visualizen correctamente sus Favicons. Para más información sobre este inconveniente y cómo solucionarlo haz click aquí.

Un Favicon es un icono que va al lado de la dirección URL de una página web (los paréntesis

, en el caso de este blog)

Para poner uno en tu página, sólo tienes que seguir el siguiente procedimiento (debes tener acceso al código de la página):

1er paso: Haz un icono

Existen varias maneras por las que puedes crear tu icono. Puedes dibujarlo tú mismo con programas como Microsoft Paint o GIMP, o usar una foto o imagen que ya tengas. Lo importante es que luego lo guardes en un archivo de 16x16 píxeles de 256 colores o 24 bits (en el caso de una foto probablemente tengas que recortarla para que cumpla los parámetros).

2do paso: Convierte la imagen en un archivo .ico (opcional)

Nota: en realidad puedes utilizar casi cualquier tipo de imagen como favicon, pero realizando este paso y convirtiéndola en un archivo .ico, te aseguraras de que tu favicon tenga la mayor compatibilidad, y pueda ser visto por los usuarios de casi todos los navegadores.

Lo que tenemos que hacer es convertir la imagen en un archivo .ico. Puedes usar un programa especializado para hacer esto, aquí te explicamos cómo.

También existen páginas como esta o esta (que también te permite dibujar un favicon), que crean un archivo .ico a partir de cualquier imagen que quieras (asegurate de recortar la imágen de forma que quede cuadrada, o el icono se verá estirado).

3er paso: Sube tu favicon a la web

Para poder utilizar tu favicon, tendrás que subirlo a Internet. Si escogiste utilizar una imagen png, gif o jpg, puedes subir tus imágenes en servicios como flickr, photobucket o picasaweb (asociable con tu cuenta de blogger).

Si decidiste usar un archivo .ico, tendrás que utilizar un servidor que te permita subir todo tipo de archivos. Te recomiendo el Internet Archive. Es muy conveniente, ya que no tiene límite para el tamaño de los archivos, ni estos son borrados si nos son usados. Sin embargo, recuerda que el Internet Archive está destinado para fines académicos, así que no lo uses para piratería u otros fines.

4to paso: Introduce el código en la página

No te asustes, el código es sencillo. Lo único que tienes que hacer, es pegar el siguiente código entre las etiquetas <head> y </head> de tu página (este es el código de la cabecera), y sustituir http://www.ejemplo.com/tuicono.ico por la dirección donde cargaste tu favicon.

Código para páginas HTML:
<link rel="shortcut icon" href="http://www.ejemplo.com/tuicono.ico" type="image/vnd.microsoft.icon">
<link rel="icon" href="http://www.ejemplo.com/tuicono.ico" type="image/vnd.microsoft.icon">

Código para páginas XML (como las de Blogger)
<link href="http://www.ejemplo.com/tuicono.ico" rel="'shortcut" type="'image/vnd.microsoft.icon'/">
<link href="http://www.ejemplo.com/tuicono.ico" rel="'icon'" type="'image/vnd.microsoft.icon'/">

Nota: en el caso de que uses un tipo de archivo distinto al .ico, tendrás que cambiar la parte "image/vnd.microsoft.icon", dependiendo del tipo de imagen:

Archivos .gif: "image/gif"
Archivos .png "image/png"

5to Paso: Disfruta tu Favicon

Ahora ya deberías tener tu Favicon activo. Si tienes problemas con el código html, quizás debas usar el XML. Recuerda que en las versiones de Internet Explorer anteriores a la 7, los favicon sólo funcionan para las páginas marcadas como favoritas.

Parece mucho trabajo, pero le añadirá personalidad y originalidad a tu sitio. Si tienes algún problema, plantealo en los comentarios.

(palabras entre paréntesis)

Categorías

Linkeanos

Links

miércoles, 12 de noviembre de 2008

Solución: Arregla el ícono (favicon) de tu blog

viernes, 12 de octubre de 2007

Consejos para tu blog: Texto e imágenes aleatorias

jueves, 11 de octubre de 2007

Crea una copia de seguridad de tu plantilla

lunes, 24 de septiembre de 2007

El truco de "Leer más" en Blogger (y un extra)

domingo, 9 de septiembre de 2007

Personaliza el "Leer el resto de esta entrada"

Consejos para tu blog: Añade un texto automático a todas tus entradas

sábado, 21 de julio de 2007

Consejos para tu blog: Ponle un Favicon a tu página

Síguenos en twitter

Buscar en (entre paréntesis)

Archivo

(Weblogs entre paréntesis)

(palabras entre paréntesis)

Categorías

Linkeanos

Links

miércoles, 12 de noviembre de 2008

Solución: Arregla el ícono (favicon) de tu blog

viernes, 12 de octubre de 2007

Consejos para tu blog: Texto e imágenes aleatorias

jueves, 11 de octubre de 2007

Crea una copia de seguridad de tu plantilla

lunes, 24 de septiembre de 2007

El truco de "Leer más" en Blogger (y un extra)

domingo, 9 de septiembre de 2007

Personaliza el "Leer el resto de esta entrada"

Consejos para tu blog: Añade un texto automático a todas tus entradas

sábado, 21 de julio de 2007

Consejos para tu blog: Ponle un Favicon a tu página

Síguenos en twitter

Buscar en (entre paréntesis)

Suscribirse a

Archivo

(Weblogs entre paréntesis)