Habilitar el Avatar en los Comentarios en Blogger

En principio la plantilla que estoy usando no mostraba el avatar en los comentarios, pues estuve buscando la forma de habilitarlos y la encontré en el blog de Claudia de Chicablogger.

Si tu plantilla no tiene habilitado el avatar sigue los siguientes pasos:

Para ello ve a Configuración > Comentarios > localiza Mostrar imágenes de perfil en los comentarios selecciona SI y Guarda la configuración.

Ahora ve a Diseño > Edición de HTLM > Expandir los artilugios busca "Avatar" para saber si tienes las líneas de código que corresponde al avatar, si no lo encuentras sigue los siguientes pasos para habilitarlo:

 Con la ayuda de (Ctrl+F) busca el siguiente código:


<dl id='comments-block'>


Cámbialo por este otro:


<dl expr:class='data:post.avatarIndentClass' id='comments-block'>


Un pelín más abajo, busca:


<a expr:name='data:comment.anchorName'/>


Justo debajo, agrega lo siguiente:


<b:if cond='data:blog.enabledCommentProfileImages'>
<data:comment.authorAvatarImage/>
</b:if>


Ya está casi terminado, Guardamos los cambios.

Ahora le daremos un poco de estilo añadiendo las propiedades CSS por defecto del  avatar, pegar el siguiente código antes de ]]></b:skin>



#comments-block .avatar-image-container img {
border:1px solid #CCCCCC;
float:right;
}


Las dimensiones de avatar son de 35 x 35 píxeles.

Puedes configurar el grosor del borde, cambiando el número de píxeles, en lo que aparece en rojo en el último código y también el padding de la imagen.

Proximo artículo: Poner una imagen en los comentarios anónimo en blogger.

Vía | Chica Blogger

Habilitar los links de entradas recientes, entradas antiguas | Comprobado

Al cambiar de plantilla en mi blog una de las cosas que no le daba importancia era a los links del pie de navegación "Entradas recientes y Entradas antiguas" ya que en esta plantilla no están habilitados, pero gracias a la observación de Matius de Cgnauta que me dijo que faltaban estos links en mi blog y que son muy útiles para tener una mejor navegación por las páginas del blog.

El caso es que si mejora en gran medida la usabilidad del blog, pero no había forma de habilitar dichos links en mi plantilla, hasta que la solución la encontré en una respuesta a un comentario en el blog del Potro de ciudadblogger.

Pues, si tienes una plantilla que no tiene habilitado estos links de "Entradas recientes y Entradas antiguas" hoy veremos cómo habilitarlos.

Primero ve a Diseño > Edicion de HTML con la ayuda de Ctrl + F busca el siguiente código:


#blog-pager-newer-link {
float: left;
display:none;
}
#blog-pager-older-link {
float: right;
display:none;
}
#blog-pager {
text-align: center;
display:none;
}


Ahora borra lo que está en rojo que es lo que no permite que se muestren los links.

Una vez eliminado los 3 display:none; guardas los cambios realizados, y verás que se muestran los enlaces de pie de navegación.

Cómo Poner Leer más de forma Automática en Blogger

Hoy veremos cómo podemos poner le truco Leer más de forma automática en blogger, para ello utilizaremos un Script desarrollado por  Vietwebguide para blogger. Este script lo vi por primera vez en el blog de chica blogger que gracias a ella les explicaré como poner este truco.

El efecto de este Script hace que todos los post se acorten mostrando una pequeña imagen tipo Thumbnail y un determinado número de caracteres. Todo esto se hace automáticamente, ojo que también puedes  configurar el número de caracteres a mostrar, como el tamaño de la imagen a mostrar, pero no te impacientes que te diré como hacerlo más adelante así que continúa leyendo el artículo.

Para poner este truco en tu blog es fácil y sencillo de hacerlo, lo primero busca en tu plantilla la siguiente etiqueta </head>.

Justo antes pega el siguiente código:


<script type='text/javascript'>
summary_noimg = 430;
summary_img = 360;
img_thumb_height = 125;
img_thumb_width = 125;
</script>
<script src='http://dl.dropbox.com/u/3373498/pazosbloger-summary-post-v20-test.js' type='text/javascript'/>


Ahora expandimos los artilugios y buscamos <data:post.body/> lo remplazamos por el siguiente código:


<p><b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<span class='rmlink' style='float:right'><a expr:href='data:post.url'>--> Leer más...</a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if></p>


Configuración:

summary_noimg = determina el número de caracteres a mostrar en caso de que el post no tenga imágenes.
summary_img = determina el número de caracteres en caso de que el post tenga imágenes.

img_thumb_height = alto de la imagen.
img_thumb_width = ancho de la imagen.

Vía | Chica Blogger
Descargar Script (si es que quieres puedes bajarte el script para alojarlo en tu propio servidor)

Cambiar el color de los Enlaces ya Visitados en el Blog

Leyendo un artículo en el blog de Jakob Nielsen conocido como el "Gurú de la usabilidad de la página web" el artículo se llama 10 errores en diseño web.

Entre los errores el que más me llamo la atención fue el número tres "No marcar los enlaces visitados" y particular mente creo que vale la pena corregirlo en nuestro blog, porque considero que marcando con otro color los enlaces ya visitado ayuda a navegar más rápido a los lectores en el blog, es como dejar una huella por donde ya has pasado y no volver a hacer click en un enlace ya visitado.

Para corregir este error por así llamarle, estuve buscando en la red la forma de cambiar el color de los enlaces visitados en el blog, pero si la buscas en Google verás que no hay  artículos que nos ayuden a solucionar este problemilla. Reciéntemente escríbi este otro post cambiar el color de los enlaces ya vsitados con CSS que también te pude interesar.

El caso es que la solución la encontré en http://www.usuarios.sion.com/pauluk/trucosprin.htm una de las páginas web que visito a menudo y que por casualidad encontré el código que nos ayuda a diferenciar los enlaces ya visitados.

Para ponerlo este truco en tu blog, sólo tienes que copiar el siguiente código:


<style type="text/css">
<!--
A:link {#d10000; TEXT-DECORATION: none}
A:visited {COLOR: gray; TEXT-DECORATION: none}
A:active{TEXT-DECORATION: none}
A:hover {#d10000; TEXT-DECORATION: underline} -->
</style>


Ahora ve a Diseño > Añadir gadget elegimos HTML/Javascript  pegamos el código, este código te cambiará el color de los link en tu plantilla,  para cambiarlo al color que tienen los enlaces de tu plantilla cambia lo que está en rojo.

Lo que está en azul por el color que quieres que tengan los enlaces cuando pongas el cursor encima. Les dejo una tabla de códigos de colores.

Poner Videos de YouTube en un Reproductor diferente en el Blog o Página web

Mi amigo Matius de CGnauta, ha publicado un artículo muy interesante el cual quiero compartirlo con los lectores de mi blog. Se trata de como un añadir un reproductor diferente en los video de YouTuve en el blog o página web. Puedes verlo funcionando en mi blog de pruebas.

Este reproductor lo puedes poner tanto en un Elemento HTML en la sidebar del blog, como también en una entrada. Debido a que cuenta con las opciones necesarias para reproducir un video este reproductor se ve más profesional en el blog.

Veremos cómo ponerlo en nuestro blog: Primero copiamos el siguiente código y lo pegamos en una entrada en modo HTML ojo NO en redactar.


<object height="320" width="460">
<param name="movie" value="http://dl.dropbox.com/u/3373498/pazosblogger-player.swf" />
<param name="FlashVars" value="Aquí-el-ID-del-video&autoPlay=false" />
<param name="allowFullscreen" value="true" />
<embed src="http://dl.dropbox.com/u/3373498/pazosblogger-player.swf" width="460" height="320" FlashVars="videoId=Aquí-el-ID-del-video&autoPlay=false" allowFullscreen="true">
</embed>
</object>


Ahora tenemos que poner el "ID" identificador del video, que lo podemos encontrar al final de la URL del video, fíjate en la siguiente imagen lo que está encerrado con rojo:

Una vez tenemos el "ID" del video, agarramos y lo cambiamos por lo que está en azul.

Si queremos que el video se reproduzca y cargue automáticamente, debemos de cambiar el parámetro: &autoPlay=false "false por true" eso es todo. Les dejo la página del autor de tubePlayer

Descargar el archivo player.swf.

iTheme Techno 3 Columnas : Plantilla para Blogger

Visitando bloganol me encuentro con una de las plantillas más hermosa limpia y profesional para blogger, desarrollada para blogger por Magznetwork. Tiene un diseño de interfaz  Mac Os, con unos iconos muy hermosos.

Esta plantilla cuenta con 3 columnas, un menú orizontal ubicado en la parte superior de la plantilla, un diseño limpio y profesional.

VISTA PREVIA - DESCARGAR

Sin duda alguna es una de las plantillas más demandada por los usuarios de blogger. Está plantilla se parece mucho al template Blogy iPlantilla de hecho es la misma sólo que cambia un poco el diseño, mejor dicho casi nada.

A propósito Blogy iPlantilla de 3 columnas fue la primera plantilla que itilicé cuando empecé con este blog.

Botón Ir Arriba con Estilo añadiendo CSS para Blogger

Navegando en internet me encuentro con el famoso truco del "botón ir arriba" en Adicciónblogger lo particular de este truco es que tiene un efecto deslizante muy bonito y el botón desaparece al llegar al top de la página, este botón va al lado derecho, pero lo puedes poner al lado izquierdo si es que tu quieres.

Según Isaías el efecto del botón que desaparece no funciona con algunas librerías como por ejemplo: Scriptaculous, así que si este último no funciona en tu blog ya sabes cual es la razón. Vale empecemos con el truquillo, pero antes lo puedes ver en mi blog de pruebas.

Primero ve a Diseño > Edición de HTML con la ayuda de (Ctrl + F) buscamos </head> Justo antes pegamos el siguiente código (puede ser que ya lo tengas en tu plantilla, si es así salta este paso):

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js' type='text/javascript'/>

Justo después del anterior código que acabamos de colocar, ponemos este otro:

<script type='text/javascript'>
/*-----------------------
* jQuery Plugin: Scroll to Top
* by Craig Wilson, Ph.Creative (http://www.ph-creative.com)
*
* Copyright (c) 2009 Ph.Creative Ltd.
* Description: Adds an unobtrusive "Scroll to Top" link to your page with smooth scrolling.
* For usage instructions and version updates to go http://blog.ph-creative.com/post/jquery-plugin-scroll-to-top.aspx
*
* Version: 1.0, 12/03/2009
-----------------------*/
$(function(){$.fn.scrollToTop=function(){$(this).hide().removeAttr("href");if($(window).scrollTop()!="0"){$(this).fadeIn("slow")}var scrollDiv=$(this);$(window).scroll(function(){if($(window).scrollTop()=="0"){$(scrollDiv).fadeOut("slow")}else{$(scrollDiv).fadeIn("slow")}});$(this).click(function(){$("html, body").animate({scrollTop:0},"slow")})}});
</script>
<script type='text/javascript'>
$(function() {
$("#toTop").scrollToTop();
});
</script>

Es hora de colocar el botón Ir Arriba para ello busca </body> justo antes pega el siguiente código:

<a href='#' id='toTop'><img src='http://1.bp.blogspot.com/_Q2WBfE9smXM/SpeJv_psAZI/AAAAAAAABNw/QgPHsYLHjFQ/s400/23.png'/></a>

Ahora le daremos estilo con CSS, busca ]]></b:skin> Justo antes coloca el siguiente fragmento de código:

#toTop {
text-align:center;
padding:0px;
position:fixed;
bottom:0px;right:10px;
cursor:pointer;
color:#666;
text-decoration:none;
filter:alpha(opacity=40);
opacity:.50;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)"; /*--IE 8 Transparency--*/
}

COMFIGURACIÓN AVANZADA: veremos como cambiar la imagen, ponerlo a la izquierda, y ajustar la transparencia del botón.

Para cambiar la imagen por la tuya cambia lo que está en rojo.
Para ponerlo al lado izquierdo cambia lo que está en azul por esto:

#toTop {
text-align:center;
padding:0px;
position:fixed;
bottom:0px;left:10px;
cursor:pointer;
color:#666;
text-decoration:none;
filter:alpha(opacity=40);

opacity:.50;

-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)"; /*--IE 8 Transparency--*/
}

Si te fijas cambiamos bottom:0px;right:10px; por bottom:0px;left:10px; para que aparesca al lado izquierdo. Además, podemos indicar los pixeles que tendrá de separción el botón del borde de la plantilla en bottom:0px;left:10px;.

Para ajustar la transparencia cambia de porcentaje lo que está en verde, lo puedes ver que está 50 pero tu lo puedes ajustar a tú gusto, esto lo puedes realizar en los dos códigos tanto al de la derecha como al de la izquierda.

Cómo abrir pestaña Rápido con Firefox

En mi otro blog escribí un artículo haciendo referencia a este plugin, pero también quiero compartirlo con los lectores de este blog por la utilidad que tiene.Si tenemos un blog de seguro que tendremos nuestras páginas favoritas que visitamos a menudo como por ejemplo blogger, foro, redes sociales, etcétera. Si usas Firefox de seguro que este complemento te gustará.

Site Launcher 0.9.9 es un plugin para Firefox que nos facilita el trabajo de estar escribiendo en la barra de direcciones o buscando en los marcadores las páginas web que visitas más a menudo, una vez instalado este complemento te darás cuenta del tiempo que nos ahorra.

Para añadirlo a tu navegador ve a  https://addons.mozilla.org/es-ES/firefox/addon/10127 has click sobre el botón verde Añadir a Firefox aceptas la licencia para usuarios, enseguida procederá con la instalación, termina la instalación te pedirá que reinicies tu navegador.

Una vez hayas reiniciado, verás en la parte superior izquierda justo al lado de la barra de direcciones, un pequeño icono celeste, si haces click se desplegará un lanzador con páginas favoritas pre determinadas. Para agregarle tus páginas favoritas o quitar unas de las que ya vienen predeterminadas, ve a Site Launcher al lado derecho de Herramientas pincha en Shortcut This Page y configúralo a tu gusto.

Poner banner de 125x125 al blog en blogger

Los banners de 125 x 125 pixeles son ideales para publicar anuncios publicitarios, blog amigos, intercambio de barnner,  estos lo ponemos en la parte superior de la sidebar del blog. Si no sabes cómo crear un banner de 125 te recomiendo que leas este post que escribí anteriormente.

Hoy veremos cómo agregar en la barra lateral (sedebar) cuatro banner de 125 x 125 sin tener que editar la plantilla, para ello sólo tienes que copiar es siguiente código:

<center>
<div id="advert_125x125">
<a href="URL-Enlace-1"><img alt="Ad" src="URL-de-tu-imagen"/></a>
<a href="URL-Enlace-2"><img alt="Ad" src="URL-de-tu-imagen"/></a>
<a href="URL-Enlace-3"><img alt="Ad" src="URL-de-tu-imagen"/></a>
<a href="URL-Enlace-3"><img alt="Ad" src="URL-de-tu-imagen"/></a>
</div>
</center>

Pégalo en un Elemento HTML en tu blog, ve a Diseño > Añadir gadget elegimos HTML/Javascript y pega el código.

Ahora cambia lo que está en rojo por la dirección del enlace que quieres que dirija la imagen al hacer click sobre ella. En "Ad" ponemos una palabra clave que lleve relación con el enlace que pongamos, esto va desde el punto de vista del SEO.
Cambia lo que está en azul por la  dirección de tu imagen.

Vía | Bloganol

Gorros de Navidad Gratis

Se viene la navidad y en la web no pasa desapercibida, al contrario se hace notar mucho, en este mes los gorros navideños son una buena opción para decorar el logo o cabecera de nuestro blog.

Gracias Chica blogger que nos  deja un post con hermosos gorros de navidad en formato PNG que podemos utilizar en estas fechas para decorar con ambiente navideño nuestro blog. Estos gorros vienen  en distinto tamaños grande, mediano, y pequeño. También puedes manipular a tu gusto puedes cambiarle de tamaño, posición, y ponerlo donde tú quieras.

DESCARGAR

Además, puedes ver el tutorial de cómo puedes hacer un gorro navideño.

Iconos de Redes Sociales Gratuitos en forma de Corazón

Social Hearting Icon Set es un set de 22 iconos sociales en formato PNG, vienen en distintas resoluciones 16 x 16, 32 x 32, 64 x 64 además, son totalmente gratuitos. Estos iconos en forma de corazón han sido diseñado por Aravind Ajith creador de TheDesignSuperHero.com. 

Para descargarte este hermoso set de iconos gratuitos puedes hacerlo directamente del link que te dejo abajo. Bueno, espero que les guste.

Enlace | Descargar

Optimizar imágenes para el Blog con Punypng

Cuando nos iniciamos con un blog unas de las cosas que tenemos que saber es que debemos optimizar las imágenes que subimos en el blog, ya que si estás son demasiado grande y pesada puede retardar la carga de la página quitando ancho de banda.

Anteriormente  vimos cómo optimizar imágenes online, hoy traigo otra herramienta online que te permite optimizar imágenes de una forma muy fácil se llama Punypng es considerado uno de los optimizadores online más utilizados por los diseñadores de páginas web.

Entre sus características más importantes es que la imagen que optimiza Punypng no pierde calidad tanto de imagen como de tamaño, queda absolutamente igual que la original sólo que más libiana. Además, soporta los formatos PNG, JPG, GIF, GIF animado.

Su uso es sencillo, ve a Punypng has click en el botón verde "Upload images" elige la imagen que quieres optimizar desde tu ordenador has doble click sobre la imagen elegida, espera uno segundos y verás que el sistema te genera la imagen optimizada con la información detallada de la optimización, para bajarla a tu equipo has click en Download y guarda la imagen en tu escritorio.

NOTA: recuerda que optimizando las imágenes que subes a tu blog, ahorrarás ancho de banda y acelerarás la carga de tus imágenes en tu blog o página web.

Abrir otro Blog en una Nueva Ventana Automáticamente

Si bien es cierto que los Pop Up mayormente se utilizan para hacer publicidad, pero si tienes dos blog o más puedes utilizar este truquillo para dar a conocer a los visitante tu otro blog, o también para dar a conocer algo muy importante.

El efecto de este truco es que cuando una persona ingrese a nuestro blog, automáticamente se abrirá otra ventana con otro blog nuestro, sección de publicidad, o un aviso importante.

Para ponerlo en tu blog es muy fácil, copia el siguiente código:

<script language='JavaScript'>window.open('http://www.tu-url.blogspot.com', 'geoflotante', '');</script>

Ahora te vas a tu plantilla Diseño > Añadir un gadget eliges HTML/Script y pegas el código, ahora cambia lo que está en rojo por la URL que quieres que se abra en una nueva ventana lo guardas y listo.

Cómo se ve el Blog en distintas Resoluciones

Leyendo uno de mis blog favoritos Tecnoscopio encontré un artículo que creo que es muy interesante porque propone una herramienta que sirve para optimizar el blog en todas las resoluciones, el caso es que hice la prueba de resolución con este blog, pero me lleve una sorpresa no muy agradable.

Esta herramienta se llama ViewLike es totalmente gratuita, en ella podemos hacer las pruebas de resolución para ver como se ve nuestro blog en distintas resoluciones ya que el hecho de que tu sitio se vea bien en la pantalla de tu ordenador no quiere decir que se verá bien en la pantalla de otras personas como por ejemplo visitantes, lectores, ya que pueden tener configurada una resolución distinta.

Para utilizar está estupenda herramienta ingresamos a ViewLike y en la parte superior derecha donde dice URL introducimos la dirección de nuestro blog, pinchamos el botón Check Up! a continuación podemos ver los resultados, ahora podemos hacer la prueba en los distintos formatos de resolución más populares, incluso podemos ver hasta como se ve nuestro sitio en un iPone.

Espero que este sitio les sea de mucha utilidad.

Cómo Poner música al perfil de Facebook de una forma Fácil

Hace mucho tiempo que escribí cómo poner música de fondo al blog mediante reproductor automático, ahora  veremos cómo podemos añadir un reproductor de música a nuestro perfil de Facebook.

Para ello ve a MixPod escoge el reproductor que más te guste ya sea de Video o MP3, ahora localiza Create A Music Playlist debajo en la cajita de búsqueda en la parte superior izquierda  tienes que añadir el nombre del cantante o canción que quieres buscar.

Para añadir la canción al reproductor has click en el icono + al lado de la canción. Una vez hayas añadido todas las canciones que quieres poner, ve arriba debajo de Create A Music Playlist  has click en Save Playlist, ahora te pedirá que pongas un título, descripción y elijas 3 categoría ejemplo: Pop, Rock, Jazz.

Una vez hecho lo anterior has click en el botón verde de abajo Save (get code) y si no tienes cuenta te registras en menos de un minuto, ojo que lo que has hecho no se borrara registrate, ingresa con tu cuenta y el sistema te llevará automáticamente al paso que te tocaba antes de regístrarte, ahora localiza en la parte superior izquierda el icono de Facebook has click, te aparecerá un botón verde Pos to facebook dale click, ahora verás el título que le asignaste a tu lista de reproducción has click y luego añádelo pinchando en Add to profile.

Ahora vete a tu perfil de Facebook y verás el reproductor de música está listo para ser usado.