compartidísimo

Agregar un enlace que dirija al post en cada elemento de las entradas populares

noreply@blogger.com (Karla Castañeda) — Fri, 27 Jan 2012 23:30:00 +0000

Cuando elegimos la opción de mostrar las entradas populares con la imagen miniatura y el título, pudiera dar la impresión de que le falta algo, ¿no?, mmm, tal vez lo veas y pienses -no sé no me convence-, esto puede deberse a que vemos un espacio muy grande vacío debajo del título, esa es la percepción visual, por otro lado, está la facilidad para ir al artículo, aunque de manera intuitiva sabemos que el título o la imagen miniatura nos dirigirá al post, esto no es muy evidente...

Pensando en eso, podemos agregar un enlace para que debajo de cada título aparezca un enlace al artículo o post. En la plantilla Cocinando con Adela, hice esto, de ese modo se puede acceder al artículo si hacemos click sobre dicho enlace, al igual que con el título del artículo o post.

Pero, ¿cómo hacer eso?, bueno, hoy te diré paso a paso cómo hacerlo ;)

Paso 1. Necesitas configurar las entradas populares para que éstas muestren la imagen miniatura en adición al título que siempre se muestra:

Paso 2. Ve a la edición de HTML de la plantilla, marca la casilla de expandir plantillas de artilugios, y luego, identifica el siguiente código:


<div class='item-thumbnail-only'>
<b:if cond='data:post.thumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
</a>
</div>
</b:if>
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
</div>
<div style='clear: both;'/>
<b:else/>

Luego, sustituyes la parte que resalté de rojo por esto:

<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a><a class='verpopu' expr:href='data:post.href'><span><br/>Ver Artículo» </span></a></div>

Si quieres, puedes cambiar el texto del enlace "Ver Artículo" por el que quieras.

Paso 3. Verificas en vista previa y si todo luce bien guarda los cambios.

Paso 4. Ahora lo que falta es darle un poco de estilo al enlace y lo hacemos con CSS, entonces vamos a Plantilla > Personalizar > Avanzado > Añadir CSS y lo agregamos, editando los colores, poniendo otras propiedades, etc...

.item-title a.verpopu span {
color:#d5aa00;/*color del texto*/
}
.item-title a.verpopu span:hover {
color:#738931;/*color del texto hover*/
text-decoration:underline;/*subrayado*/
}

En color ponemos el color del texto, y con text-decoration:underline, hacemos que se subraye el texto al poner el puntero del ratón sobre el enlace.

Paso 5. Guarda los cambios en "Aplicar al blog" y listo, ahora tendrás un enlace visible en las entradas populares que te dirigirá a cada post respectivamente.

Barra flotante en el top para agregar cualquier gadget (1)

noreply@blogger.com (Karla Castañeda) — Fri, 27 Jan 2012 06:54:00 +0000

A petición de José y otros que me han comentado lo mismo, vamos a ver cómo crear una barra flotante en el top con secciones, para agregar ahí cualquier gadget.

La apariencia de la barra es estilo minimalista y nos recuerda al estilo actual de los productos de Google; en ésta podrás colocar cualquier gadget, en el ejemplo voy a poner un menú usando la lista de enlaces de Blogger y un buscador que agregaré usando un gadget con la opción de HTML/Javascript.

Creando las secciones, podrás agregar enlaces fácilmente, sin necesidad de ingresar de nuevo a la edición de HTML de la plantilla, o también poner ahí cualquier otra cosa fácilmente desde Diseño, en la nueva interfaz.

Para el menú vamos a usar el CSS que usábamos anteriormente para los enlaces de navegación de Blogger estilo YouTube, y para el buscador, usaremos uno minimalista que me encanta y que ya antes había explicado Gema como agregarlo.

La barra la puedes ver a continuación en la siguiente imagen, y para verla en acción en el blog de demostración:

Demostración

Ahora veamos cómo hacerla:

Paso 1. Primero agregamos los estilos o CSS, yendo a Plantilla > Diseñador de plantillas > Avanzado > Añadir CSS, y lo ponemos en el campo:

/*Barra fija en el top*/
#top-fijo{
width:100%;
height:55px;
margin:0 auto;
padding:0;
position:fixed;
left:0;
top:0;
z-index:20;
background:#f2f2f2;
border-bottom:1px solid #ebe8e8;
overflow:hidden;
}
#top { /*el contenedor que centrará el contenido de los gadgets*/
width:980px;
margin:5px auto;
height:50px;
text-align: left;
}
* html #top-fijo {/*IE6*/
position:absolute;
top:0;
left:0;
}
/*Estilos de la lista de enlaces*/
#LinkList1 ul {
width:650px; /*ancho del menú*/
height:45px;
float:left;
margin: 8px 0 0 0;
clear:both;
}
#LinkList1 ul li{
list-style:none;
float:left;
margin:0 0 0 10px;
}
#LinkList1 li a{
display:inline-block;
border:1px solid #DDD;
border-radius:3px;
text-shadow:0 1px 1px #fff;
text-decoration:none;
font: bold 11px Sans-Serif;
padding:6px 10px;
white-space:nowrap;
vertical-align:middle;
color: #666;
background: transparent;
}
#LinkList1 li a:hover, #Linklist1 li a:focus {
border-color: #999;
background: -webkit-linear-gradient(top, white, #E0E0E0);
background: -moz-linear-gradient(top, white, #E0E0E0);
background: -ms-linear-gradient(top, white, #E0E0E0);
background: -o-linear-gradient(top, white, #E0E0E0);
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.25), inset 0 0 3px #fff;
-moz-box-shadow:0 1px 2px rgba(0,0,0,0.25), inset 0 0 3px #fff;
box-shadow: 0 1px 2px rgba(0,0,0,0.25), inset 0 0 3px #fff;
}
#LinkList1 li a:active {
border: 1px solid #AAA;
border-bottom-color: #CCC;
border-top-color: #999;
-webkit-box-shadow: inset 0 1px 2px #aaa;
-moz-box-shadow:inset 0 1px 2px #aaa;
box-shadow:inset 0 1px 2px #aaa;
background:-webkit-linear-gradient(top, #E6E6E6, gainsboro);
background:-moz-linear-gradient(top, #E6E6E6, gainsboro);
background:-ms-linear-gradient(top, #E6E6E6, gainsboro);
background:-o-linear-gradient(top, #E6E6E6, gainsboro);
}
/*Estilos del Buscador*/
.buscador{
background:#fcfcfc;
border:1px solid #e6e4e4;
width:225px;
height:27px;
margin-top:9px;
padding-left:4px;
color:#919191;
line-height:28px;
cursor:pointer;
}

Paso 2. Guarda lo que agregaste en "Aplicar al blog".

Paso 3. Ve a la edición de HTML de la plantilla, y con la ayuda de Crtl F, buscas <body>, en la nuevas plantiilas viene así: <body expr:class='"loading" + data:blog.mobileClass'>, inmediatamente después agregas esto:

<div id='top-fijo'>
<div id='top'>
<div id='top-left' style='width:69%; float:left;'>
<b:section id='top-l'>
</b:section>
</div>
<div id='top-r' style='width:29%; float:right;'>
<b:section id='top-2'>
</b:section>
</div><div style='clear: both'/>
</div>
</div>

Paso 4. Verifica en vista previa, ahora podrás ver la barra, aunque sin ningún elemento; si todo luce bien guarda los cambios.

Paso 5. Ahora falta agregar los gadgets y para ello vas a Diseño (en la nueva interfaz), e identifica las secciones que creaste, que se verán así:

Paso 6. En la sección de la izquierda, agregas el Gadget de "Lista de Enlaces", escribiendo ahí todos los enlaces que quieras poner, no le pongas ningún título...

Paso 7. Ahora vas a agregar el código HTML del Buscador en la sección de la derecha, sólo editarás lo resaltado de rojo, escribiendo el nombre de tu blog...

<form action="http://search.blogger.com/"
name="b-search"><input value="miblog.blogspot.com/" name="bl_url" type="hidden"/>
<input class="buscador" onfocus="if (this.value == "Buscar...") this.value = "";" value="Buscar..." name="as_q" onblur="if (this.value == "") this.value = "Buscar...";" type="text"/>
</form>

Paso 8. Echo esto, sólo guarda los cambios en Guardar disposición (en la nueva interfaz).

Listo, ya tienes una barra flotante con un menú y un buscador ;)

Notas:

El CSS esta especificado pensando en que es tu primera lista de enlaces si es la segunda o tercera habrá que cambiar los ID's, blogger las va numerando de forma sucesiva: LinkList1, LinkList2...
Esto funciona bien en todos los Navegadores, en el caso de los botones, hay algunas pequeñas diferencias en la apariencia en versiones anteriores de IE8 (los efectos y redondes) que no es para preocuparse puesto que la esquinas redondeadas son muy sutiles.
En IE6 la barra no flotará aunque todo luce igual (excepto esquinas redondeadas en los enlaces) y no supone ningún problema estético.
En el ancho (width) del #top tendrás que tomar en cuenta el ancho de tu plantilla, y no debería ser mayor.

¿Problemas con los estilos de los comentarios? Preguntas y Respuestas + El Estilo de mis Comentarios para ti

noreply@blogger.com (Karla Castañeda) — Wed, 25 Jan 2012 22:44:00 +0000

Al habilitar los comentarios anidados en mi blog, hice algunos cambios en el CSS, para darles una apariencia más personalizada. Esto lo logré, editando los estilos que Blogger enviaba aquí:

<b:includable id='threaded_comment_css'>
<style>
Toooodo el CSS
</style>

Como ya tenía nuevos estilos para este sistema, eliminé por completo los que estaban en la plantilla, para evitar problemas.

El día de ayer por la mañana, me sorprendió ver que los estilos ya no estaban aplicados, y que todo lucía tal y como se veía al principio cuando habilité los comentarios.

Inmediatamente pensé que Blogger estaba haciendo cambios y hasta me ilusioné pensando que tal vez habían arreglado el problema del salto directo a los comentarios al ingresar al post en ciertos navegadores, (hay que seguir soñando) eché un vistazo a la edición de HTML de la plantilla y ¿qué crees? estaban tal y como los edité, pero evidentemente no se estaba "interpretando".

Para solucionarlo, tomé sólo las clases que edite con sus respectivas propiedades y las puse después de ]]></b:skin> en una condición que tengo para que éste se cargue sólo al estar en la página individual y se arregló el asunto, volvieron los estilos que tenía (excepto uno) y me puse feliz y contenta.

Pese al cambio que hice, seguía teniendo problemas con la alineación de los comentarios, éstos aparecían justificados, (lo cual me choca), siendo que yo había editado cierta regla para que esto no pasará.

Me pareció extraño e inspeccioné con Chrome cada elemento en los comentarios, y vi que los estilos para los comentarios los están enviando desde allá, en esta hoja de estilos:

http://www.blogger.com/static/v1/widgets/782192654-widget_css_bundle.css

Ahí fué cuando me di cuenta que ~~cambiaron la alineación del texto~~ (Blogger no cambio esto, yo lo confundí con otra regla), en otra declaración, y solucioné el problema.

Rayos, ¡qué lió!, ¿y qué va a pasar con el CSS que todavía aparece en la plantilla para los comentarios?

Como los estilos ya los está mandando Blogger, es inútil que los tengamos dentro de la plantilla como inicialmente los mandaron, por lo tanto habrá que quitarlos, si es que todavía los tienes, para ello, tienes que ir a la edición de HTML de la plantilla, expandir plantillas de aritulugios, buscarlos, y eliminarlos:

<b:includable id='threaded_comment_css'>
<style>
.comments {
clear: both;
margin-top: 10px;
margin-bottom: 0px;
line-height: 1em;
}
.comments .comments-content {
font-size: 13px;
margin-bottom: 14px;
}
.comments .comment .comment-actions a {
padding-top: 5px;
padding-right: 5px;
}
.comments .comment .comment-actions a:hover {
text-decoration: underline;
}
.comments .comments-content .comment-thread ol {
list-style-type: none;
padding: 4px;
}
.comments .comments-content .inline-thread {
padding: 0.5em 1em;
}
.comments .comments-content .comment-thread {
margin: 8px 2px;
}
.comments .comments-content .comment-thread:empty {
display: none;
}
.comments .comments-content .comment-replies {
margin-top: 1em;
margin-left: 36px;
}
.comments .comments-content .comment {
margin-bottom:16px;
padding-bottom:8px;
}
.comments .comments-content .comment:first-child {
padding-top:16px;
}
.comments .comments-content .comment:last-child {
border-bottom:0;
padding-bottom:0;
}
.comments .comments-content .comment-body {
position:relative;
}
.comments .comments-content .user {
font-style:normal;
font-weight:bold;
}
.comments .comments-content .icon.blog-author {
width: 20px;
height: 20px;
display: inline-block;
margin: 0 0 -4px 6px;
}
.comments .comments-content .datetime {
margin-left:6px;
}
.comments .comments-content .comment-header,
.comments .comments-content .comment-content {
margin:0 0 8px;
}
.comments .comments-content .comment-content {
text-align:left !important;
line-height:17px;
}
.comments .comments-content .owner-actions {
position:absolute;
right:0;
top:0;
}
.comments .comments-replybox {
border: none;
height: 250px;
width: 100%;
}
.comments .comment-replybox-single {
margin-top: 5px;
margin-left: 48px;
}
.comments .comment-replybox-thread {
margin-top: 5px;
}
.comments .comments-content .loadmore a {
display: block;
padding: 10px 16px;
text-align: center;
}
.comments .thread-toggle {
cursor: pointer;
display: inline-block;
}
.comments .continue {
cursor: pointer;
}
.comments .continue a {
display: block;
padding: 0.5em;
font-weight: bold;
}
.comments .comments-content .loadmore {
cursor: pointer;
max-height: 3em;
margin-top: 3em;
}
.comments .comments-content .loadmore.loaded {
max-height: 0px;
opacity: 0;
overflow: hidden;
}
.comments .thread-chrome.thread-collapsed {
display: none;
}
.comments .thread-toggle {
display: inline-block;
}
.comments .thread-toggle .thread-arrow {
display: inline-block;
height: 6px;
width: 7px;
overflow: visible;
margin: 0.3em;
padding-right: 4px;
}
.comments .thread-expanded .thread-arrow {
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC") no-repeat scroll 0 0 transparent;
}
.comments .thread-collapsed .thread-arrow {
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAABJRU5ErkJggg==") no-repeat scroll 0 0 transparent;
}
.comments .avatar-image-container {
float: left;
width: 36px;
max-height: 36px;
overflow: hidden;
}
.comments .avatar-image-container img {
width: 36px;
}
.comments .comment-block {
margin-left: 48px;
position: relative;
}
.datetime.secondary-text{
font-size:12px;}
cite.user{font-size:15px;}
/* Responsive styles. */
@media screen and (max-device-width: 480px) {
.comments .comments-content .comment-replies {
margin-left: 0;
}
}
</style>
</b:includable>

Si no lo haces esto será una carga inútil para tu blog. El código anterior, ya no aparece en algunos blogs, lo comprobé en muchas plantillas, y en mi caso, lo quité manualmente.

Pero, ¿ahora que va a pasar, se pueden personalizar los comentarios?

Aunque Blogger envíe los estilos de los comentarios, si se pueden personalizar incluso sobrescribir algunos valores, siendo cuidadosos sobre todo cuando damos margenes y posicionamos de forma distinta los avatares, para que éstos no se vean mal.

Si ya tenía algunos estilos en la plantilla antes de que pusiera comentarios anidados, ¿debería concervarlos o quitarlos?

Para ser más exactos y tener los mismos resultados en todos los navegadores, yo los quitaría y escribiría nuevos estilos basándome en las clases que Blogger asigna al nuevo sistema de comentarios.

Puedes verificar la hoja de estilos que envía Blogger, que mencionaba arriba, y "hasta ahora", los estilos que nos mandan para los comentarios son estos:

#comments .blogger-comment-icon,.blogger-comment-icon{line-height:16px;background:url(/img/b16-rounded.gif) left no-repeat;padding-left:20px}#comments .openid-comment-icon,.openid-comment-icon{line-height:16px;background:url(/img/openid16-rounded.gif) left no-repeat;padding-left:20px}#comments .anon-comment-icon,.anon-comment-icon{line-height:16px;background:url(/img/anon16-rounded.gif) left no-repeat;padding-left:20px}.comment-form{max-width:425px;_width:410px;clear:both}.comment-link{white-space:nowrap}.paging-control-container{float:right;margin:0 6px 0 0;font-size:80%}.unneeded-paging-control{visibility:hidden}#comments-block .avatar-image-container img{-ms-interpolation-mode:bicubic;border:1px solid #ccc;float:right}#comments-block .avatar-image-container.avatar-stock img{border-width:0;padding:1px}#comments-block .avatar-image-container{height:37px;left:-45px;position:absolute;width:37px}#comments-block.avatar-comment-indent{margin-left:45px;position:relative}#comments-block.avatar-comment-indent dd{margin-left:0}iframe.avatar-hovercard-iframe{border:0 none;padding:0;width:25em;height:9.4em;margin:.5em}.comments{clear:both;line-height:1em;margin-top:10px;margin-bottom:0}.comments .comments-content{font-size:13px;margin-bottom:16px}.comments .comment .comment-actions a{padding-right:5px;padding-top:5px}.comments .comment .comment-actions a:hover{text-decoration:underline}.comments .comments-content .comment-thread ol{list-style-type:none;padding:0;text-align:left}.comments .comments-content .inline-thread{padding:.5em 1em}.comments .comments-content .comment-thread{margin:8px 0}.comments .comments-content .comment-thread:empty{display:none}.comments .comments-content .comment-replies{margin-left:36px;margin-top:1em}.comments .comments-content .comment{margin-bottom:16px;padding-bottom:8px}.comments .comments-content .comment:first-child{padding-top:16px}.comments .comments-content .comment:last-child{border-bottom:0;padding-bottom:0}.comments .comments-content .comment-body{position:relative}.comments .comments-content .user{font-style:normal;font-weight:bold}.comments .comments-content .icon.blog-author{display:inline-block;height:18px;margin:0 0 -4px 6px;width:18px}.comments .comments-content .datetime{margin-left:6px}.comments .comments-content .comment-header,.comments .comments-content .comment-content{margin:0 0 8px}.comments .comments-content .comment-content{text-align:justify}.comments .comments-content .owner-actions{position:absolute;right:0;top:0}.comments .comments-replybox{border:none;height:250px;width:100%}.comments .comment-replybox-single{margin-left:48px;margin-top:5px}.comments .comment-replybox-thread{margin-top:5px}.comments .comments-content .loadmore a{display:block;padding:10px 16px;text-align:center}.comments .thread-toggle{cursor:pointer;display:inline-block}.comments .continue{cursor:pointer}.comments .continue a{display:block;font-weight:bold;padding:.5em}.comments .comments-content .loadmore{cursor:pointer;margin-top:3em;max-height:3em}.comments .comments-content .loadmore.loaded{max-height:0;opacity:0;overflow:hidden}.comments .thread-chrome.thread-collapsed{display:none}.comments .thread-toggle{display:inline-block}.comments .thread-toggle .thread-arrow{display:inline-block;height:6px;margin:.3em;overflow:visible;padding-right:4px;width:7px}.comments .thread-expanded .thread-arrow{background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC") no-repeat scroll 0 0 transparent}.comments .thread-collapsed .thread-arrow{background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAABJRU5ErkJggg==") no-repeat scroll 0 0 transparent}.comments .avatar-image-container{float:left;max-height:36px;overflow:hidden;width:36px}.comments .avatar-image-container img{width:36px}.comments .comment-block{margin-left:48px;position:relative}@media screen and (max-device-width:480px){.comments .comments-content .comment-replies{margin-left:0}}table.tr-caption-container{padding:4px;margin-bottom:.5em}td.tr-caption{font-size:80%}.item-control{display:none}.item-control a,.item-action a{text-decoration:none !important}

El CSS aparece comprimido, se pueden separar para que puedas leerlos fácilmente, si te fijas es extenso, habrá que ser cuidadosos con los estilos que pongamos en la plantilla para no "repetir estilos" inecesariamente, puedes guiarte revisando las clases que corresponde a cada sección del comentario con la ayuda del navegador Chrome, por ejemplo, si no lo sabes, luego hablaremos de eso.

El estilo de mis comentarios

Para quienes usan plantillas personalizadas, y pensando en que ya son varios los que me preguntan cómo poner redondos los avatares, separar los comentarios usando borde, y destacar las respuestas de un comentario, estos son los estilos que uso y sólo tienes que ponerlos después de ]]></b:skin> :

<b:if cond='data:blog.pageType == "item"'> <style type='text/css'> .comments .comments-content .comment-content{text-align:left;} .comments .comments-content .inline-thread {background: #eef2f2; border:1px solid #cedadc;}.comments .comments-content .comment {border-bottom: 1px solid #b2d1d6 !important;} .comments .avatar-image-container {background: url(http://4.bp.blogspot.com/-SGVRdTVEU_I/TZtDiTE9xNI/AAAAAAAAFYI/Oj8zWFsfs-Y/s1600/icono-persona-c.png) no-repeat center center; border:3px solid #cedadc;} .comments .avatar-image-container, .comments .avatar-image-container img { -webkit-border-radius:30px;-moz-border-radius:30px;border-radius:30px; } </style> </b:if>

La parte que puse de rojo son los valores que puedes editar, para cambiar los colores, donde en:

.comments .comments-content .inline-thread: puse el color del borde (border) y fondo (background) de las respuestas de los comentarios, por eso se ven en "cajitas".

.comments .comments-content .comment: puse el borde (border) que se aplica al fondo de cada comentario, independientemente que sea repuesta o no.

.comments .avatar-image-container, puse la imagen que aparece debajo de cada avatar, si alguien usa imagen transparente en su avatar, se verá ésta como fondo, o bien cuando no haya ningún avatar, por ejemplo en comentarios de usuarios que comenten como anónimos.

Si prefieres el texto justificado en los comentarios, quita todo lo que resalté de azul: .comments .comments-content .comment-content{text-align:left;} esa regla ya la envía Blogger.

Si quieres agregar el icono de lápiz para destacar el comentario del autor, es decir el tuyo, sólo agrega a los estilos ateriores, esto:

.comments .comments-content .icon.blog-author {
background-repeat: no-repeat;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEgAACxIB0t1+/AAAAAd0SU1FB9sLFwMeCjjhcOMAAAD+SURBVDjLtZSvTgNBEIe/WRRnm3U8RC1neQdsm1zSBIU9VVF1FkUguQQsD9ITmD7ECZIJSE4OZo9stoVjC/zc7ky+zH9hXwVwDpTAWWLrgS3QAe8AZgaAJI5zYAmc8r0G4AHYHQKVwII8PZrZFsBFkeRCABYiMh9BRUhnSkPTNCtVXYXURi1FpBDgArj8QU1eVXUzfnjv7yP7kwu1mYrkWlU33vs1QNu2qU8pwN0UpKoqokjWwCztrMuBhEhmh8bD5UDqur75asbcX0BGUB9/HAMB+r32hznJgXy2v0sGLBcyAJ1EK3LFcbo1s91JeLwAbwGYu7TP/3ZGfnXYPgAVNngtqatUNgAAAABJRU5ErkJggg==);
}

Para cambiar los colores puedes usar esta tabla de colores.

Nota: Recuerda eliminar los estilos de los comentarios que trae la plantilla si es personalizada, que están antes de ]]></b:skin>, y sobre todo, antes de hacer cambios, guarda una copia de seguridad de tu plantilla.

*Actualización: Si sientes que están muy pegados los textos entre linea y linea, en: .comments .comments-content .comment-content, agregas:

line-height:18px;

Puedes editar el valor de 18px según lo desees.

Voy a dar un poco de tiempo, a que se defina bien esto, y luego crearé otros estilos interesantes para que puedas usarlos en tu blog ;)

Picnik cierra, y ofrece gratis características premium a todos

noreply@blogger.com (Karla Castañeda) — Tue, 24 Jan 2012 22:13:00 +0000

Todo lo bueno se acaba y Picnik no es la excepción, así es como empezaba el correo que recibía este sábado donde avisaban que Picnik, cerraría en abril 19 del presente año, y para consolarlos, ahora puedes disfrutar gratis, de todas las características que ofrecía en su paquete de pago premium.

Así es, ahora puedes usar gratis, todas las herramientas para editar tus fotografías que sólo estaban disponibles para los usuarios que tenían cuenta premium.

Por otro lado, para quienes tenían pagado el servicio Premium, se procesará el reembolso completo, según explican:

Reembolsos Premium
Para nuestros miembros especiales de Picnik Premium, comenzaremos a procesar un reembolso completo de tu cargo de suscripción actual en el plazo de una semana a partir de este anuncio. Cuando decimos “por completo”, queremos decir todo. Así es, esto significa que aunque te encuentres en el último día de una suscripción anual, te reembolsaremos la suma completa de $24.95. Esto es nuestra muestra de agradecimiento.

Enlace a la página: picnik

Destacar el Comentario del Autor del Blog fácilmente y con CSS

noreply@blogger.com (Karla Castañeda) — Tue, 24 Jan 2012 18:51:00 +0000

El nuevo sistema de comentarios nos permite personalizar los comentarios muy fácilmente, y una de las características interesantes es que podemos destacar el comentario del autor, de una manera sumamente sencilla, de hecho, en las nuevas plantillas del diseñador de plantillas ya funciona esto (aunque no verifiqué en todas).

Blogger, ya agrega las reglas de estilo para lograrlo y son estas:

.comments .comments-content .icon.blog-author {
background-repeat: no-repeat;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEgAACxIB0t1+/AAAAAd0SU1FB9sLFwMeCjjhcOMAAAD+SURBVDjLtZSvTgNBEIe/WRRnm3U8RC1neQdsm1zSBIU9VVF1FkUguQQsD9ITmD7ECZIJSE4OZo9stoVjC/zc7ky+zH9hXwVwDpTAWWLrgS3QAe8AZgaAJI5zYAmc8r0G4AHYHQKVwII8PZrZFsBFkeRCABYiMh9BRUhnSkPTNCtVXYXURi1FpBDgArj8QU1eVXUzfnjv7yP7kwu1mYrkWlU33vs1QNu2qU8pwN0UpKoqokjWwCztrMuBhEhmh8bD5UDqur75asbcX0BGUB9/HAMB+r32hznJgXy2v0sGLBcyAJ1EK3LFcbo1s91JeLwAbwGYu7TP/3ZGfnXYPgAVNngtqatUNgAAAABJRU5ErkJggg==);
}

Utiliza una imagen de base64, para evitar hacer la petición de HTTP, traducido en cristiano, quiere decir que no se aloja ninguna imagen y se supone que ayudaría a la carga del blog, ya que menos imágenes es igual a un blog más ligero, en términos de rendimiento.

Los comentarios ya están preparados para esto, es por eso que en las plantillas personalizadas, queda un "espacio grande" después del nombre del autor del blog en los comentarios, si lo habrás notado.

El icono que aparecerá será el de un lapicito en un circulito, después del nombre del autor. De ese modo fácilmente un lector o usuario sabrá que es un comentario del autor del blog, sin que se vea muy parchado...

Pero, siendo claros, ¿cómo hacer funcionar esto?

Simplemente pega el código que mencionaba al principio, yendo a Plantilla > Personalizar > Avanzado > Añadir CSS, o bien, en la edición de HTML de la plantilla antes de ]]></b:skin> y guardas los cambios, verificando en vista previa antes, si es que lo haces desde la edición de HTML de la plantilla.

El icono que se agregará será el que puedes ver en la siguiente imagen y ahora mismo en mi blog:

Próximamente voy a crear algunos estilos interesantes para que puedan personalizar los comentarios, que ahora si dan ganas de ponerse a trabajar en esto ;)

Por otro lado, espero que Blogger pronto arregle el problema de "dirigirte directamente a los comentarios" cuando se hace click en el enlace del título del post, en algunos navegadores como Firefox; esperemos...

Widget de Últimos Comentarios con Avatar del Comentarista

noreply@blogger.com (Karla Castañeda) — Sat, 21 Jan 2012 19:08:00 +0000

Este es un widget muy mono y de muy reciente creación, que encontré por casualidad en la página de Way2Blogging, que muestra los últimos comentarios y el avatar del comentarista, lo que lo hace ver más atractivo.

Lo más interesante es que es muy personalizable. El avatar puede lucir circular o no, gracias a una propiedad de CSS3, que ya funciona en Internet Explorer 9. Luce muy limpio, y puedes configurar las opciones desde su página, del mismo modo que lo puedes hacer si editas el CSS del código, una vez que lo hayas agregado.

Desde ayer lo estoy probando en el blog, y sí, ¡me gusta!; si lo quieres probar en tu blog, no lo pienses mas y llévatelo ;)

¡Espero que tengas buen fin de semana!

10 Claves para ser un Buen Bloguero

noreply@blogger.com (Karla Castañeda) — Thu, 19 Jan 2012 06:26:00 +0000

El bloguero y cocinero David de Jorge, quien recientemente fué galardonado por el Congreso de Periodismo Digital de Huesca por su blog Robin Food, responde de forma breve al periódico El País, cuáles son las 10 claves para ser un buen bloguero.

Cómo poner Botones en los Enlaces de Navegación sin usar Imágenes (estilo YouTube)

noreply@blogger.com (Karla Castañeda) — Tue, 17 Jan 2012 23:24:00 +0000

Seguramente ya habrás notado el estilo característico de los botones que actualmente usa Google en el diseño de sus servicios, como Blogger, YouTube, Google+, entre otros, aunque no son idénticos en todos los casos, sí son muy similares.

Pues hace apenas unos días, veía en CSS tricks un artículo en donde decían cómo crear el estilo de botones que usa YouTube al fondo de la página, usando algunas propiedades de CSS3 como esquinas redondeadas, sombras, etc, y me gustó para usarlos en los enlaces de navegación, y crear los efectos que puedes ver en la siguiente imagen:

Ya antes habíamos hecho algo parecido, usando una sola imagen con un botón en 3D. Ahora, verás cómo poner botones sin usar ninguna imagen ;)

Demostración

Si esto se adapta al diseño de tu blog y te gusta, entonces veamos cómo hacerlo:

Paso 1. Ve a Plantilla > Personalizar > Avanzado > Añadir CSS, y en el campo, agrega el siguiente CSS, y guarda los cambios en "Aplicar al Blog":

/*Botones en los enlaces de Navegación*/
a.home-link, a.blog-pager-newer-link, a.blog-pager-older-link {
display:inline-block;
border:1px solid #DDD;
border-radius:3px;
text-shadow:0 1px 1px #fff;
text-decoration:none;
font: bold 11px Sans-Serif;
padding:6px 10px;
white-space:nowrap;
vertical-align:middle;
color: #666;
background: #F1F1F1;
}
a.home-link:hover, a.blog-pager-newer-link:hover, a.blog-pager-older-link:hover, a.home-link:focus, a.blog-pager-newer-link:focus, a.blog-pager-older-link:focus {
border-color: #999;
background: -webkit-linear-gradient(top, white, #E0E0E0);
background: -moz-linear-gradient(top, white, #E0E0E0);
background: -ms-linear-gradient(top, white, #E0E0E0);
background: -o-linear-gradient(top, white, #E0E0E0);
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.25), inset 0 0 3px #fff;
-moz-box-shadow:0 1px 2px rgba(0,0,0,0.25), inset 0 0 3px #fff;
box-shadow: 0 1px 2px rgba(0,0,0,0.25), inset 0 0 3px #fff;
}
a.home-link:active, a.blog-pager-newer-link:active, a.blog-pager-older-link:active {
border: 1px solid #AAA;
border-bottom-color: #CCC;
border-top-color: #999;
-webkit-box-shadow: inset 0 1px 2px #aaa;
-moz-box-shadow:inset 0 1px 2px #aaa;
box-shadow:inset 0 1px 2px #aaa;
background:-webkit-linear-gradient(top, #E6E6E6, gainsboro);
background:-moz-linear-gradient(top, #E6E6E6, gainsboro);
background:-ms-linear-gradient(top, #E6E6E6, gainsboro);
background:-o-linear-gradient(top, #E6E6E6, gainsboro);
}

Nota: Recuerda dar enter después de una llave de cierre "}" por ejemplo, para que lo que agregaste sea interpretado, en caso de no haber sucedido al pegar el código.

Paso 2. Opcional. Ahora vamos a cambiar los textos de los enlaces, para que en lugar de "Entradas antiguas" diga "Anterior" y en lugar de "Entradas recientes" diga: "Siguiente", para ello, vas a la edición de HTML de la plantilla, marcas la casilla de expandir plantilla de artilugios y con la ayuda de ctrl F, buscas:

<b:includable id='nextprev'>   <div class='blog-pager' id='blog-pager'>
    <b:if cond='data:newerPageUrl'>
      <span id='blog-pager-newer-link'>
      <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
      </span>
    </b:if>
    <b:if cond='data:olderPageUrl'>
      <span id='blog-pager-older-link'>
      <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
      </span>
    </b:if>
    <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>

Luego cambias:

<data:newerPageTitle/> por: Siguiente.
<data:olderPageTitle/> por: Anterior.
<data:homeMsg/> por: Inicio (opcional), si no lo cambias el texto quedará igual:"Página Principal".

Nota: Si no deseas cambiar los textos de los enlaces, no lo hagas, igualmente funcionarán los botones ya que no tienen definido el ancho.

Paso 3. Verificas en vista previa y si todo luce bien, guardas los cambios.

Y ¡listo!, así de fácil y rápido.

Esto funciona bien en todos los navegadores modernos, en el caso de Internet Explorer 8 o versiones pasadas, (sí en IE9 excepto gradiente en el efecto hover) los efectos no se ven exactamente igual, ya que no soporta algunas propiedades de CSS3, sin embargo, si se ven los botones.

7 excelentes kits de elementos web, iconos y botones de Google+

noreply@blogger.com (Karla Castañeda) — Sat, 14 Jan 2012 00:44:00 +0000

Si estás pensando en darle un toque muy "plus" a tu blog, o quieres agregar un botón personalizado para tu página de Google+, estos elementos serán de gran ayuda, todos ellos son de alta resolución y algunos vienen en formato PSD para que puedas redimensionarlos al abrirlos en photoshop. Espero sean útiles ;)

Elementos web

Ver|Descargar

Botones e Iconos

Ver|Descargar

3 grandes beneficios que ofrecen los comentarios anidados y cómo habilitarlos en plantillas personalizadas

noreply@blogger.com (Karla Castañeda) — Fri, 13 Jan 2012 21:24:00 +0000

He leído algunos comentarios, en donde expresan su rechazo a la nueva característica que agregó Blogger a los comentarios, con la que es posible responder un comentario y la respuesta se agrega debajo de éste. A esto se le conoce como "comentarios anidados".

Si no estás seguro de que esta característica sea buena para tu blog, echa un vistazo a esto, tal vez lo vuelvas a considerar:

¿Por qué pueden ser buenos los comentarios anidados?

1. Fomentan la participación. Seguramente te ha pasado: -lees algún comentario con el que no estás de acuerdo, o por lo contrario, te gusta, y no comentas en respuesta a este, porque seguramente será muy difícil identificar que respondiste, si tu comentario aparece hasta abajo. Pues con este nuevo sistema, se acabó eso, ya que las respuestas aparecen debajo de un comentario específico.

Tú como administrador, permitirás a los usuarios de tu blog "que interactúen entre ellos" por medio de esta característica.

2. Pueden aumentar la posibilidad de que comenten más en tu blog. Seguramente habrá muchos más animados a responder comentarios, ya sea porque están inconformes con algún comentario, o porque les pareció interesante, y se sientan motivados a dialogar con quien lo hizo. Eso puede significar un mayor número de comentarios.

Este sistema, crean una atmósfera que propicia la discusión y el diálogo, y esto puede traducirse en un mayor número de comentarios.

3. Permiten reconocer fácilmente las respuestas a un comentario.Como las respuestas hechas a cierto comentario aparecen debajo de éste, visualmente podemos identificar la respuesta o respuestas de un comentario hecho en el blog.

Con los comentarios anidados, es más fácil identificar comentarios y sus reacciones.

Si ya estás convencido, y utilizas plantillas de terceros, seguramente no tendrás habilitada esta característica, pero, es fácil conseguirlo, sólo necesitas cambiar ciertas lieneas de código en la plantilla.

¿Cómo habilitar este sistema de comentarios anidados en las plantiilas personalizadas?

Antes de empezar, guarda una copia de seguridad de tu plantilla, usando la opción de "Crear copia de seguridad/Restablecer", guardándola en una carpeta de tu computadora. Esto lo haces estando en "Plantilla".

Paso 1. Ve a la edición de HTML de la plantilla, marca la casilla de expandir plantillas de artilugios, y busca las siguientes lineas de código, para no tener problemas, con la ayuda de ctrl F, busca la linea que resalté de rojo:

<b:if cond='data:blog.pageType == "static_page"'>
<b:include data='post' name='comments'/>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<b:include data='post' name='comments'/>
</b:if>

Todas esas lineas, las vas a encontrar dos veces en la plantilla, las vas a cambiar o sustituir en las dos partes por esto:

<b:if cond='data:blog.pageType == "static_page"'>
<b:if cond='data:post.showThreadedComments'>
<b:include data='post' name='threaded_comments'/>
<b:else/>
<b:include data='post' name='comments'/>
</b:if>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:post.showThreadedComments'>
<b:include data='post' name='threaded_comments'/>
<b:else/>
<b:include data='post' name='comments'/>
</b:if>
</b:if>

Paso 2. Verificas en vista previa y si todo luce bien, guarda los cambios.

Nota: Esto está basado en la muestra de una plantilla del diseñador de plantillas si alterar. De ahí el código nuevo.

Si no te gusta esta característica, y usas plantillas del diseñador de plantillas, puedes revertir esto si haces lo contrario a lo que se muestra en los pasos anteriores. ~~También sería buena idea quitar el CSS que envía blogger para este sistema, y el script.~~

Enlaces relacionados y más información:
Comentarios anidados en Blogger
Insertar respuestas en comentarios

Nueva función en los comentarios del blog (responder comentarios)

noreply@blogger.com (Karla Castañeda) — Fri, 13 Jan 2012 01:37:00 +0000

Hace un momento, leía en Blogger Buzz sobre una nueva característica en los comentarios, que permite dar reply o responder a un comentario publicado en el Blog.

Pues la noticia se esparció como pólvora, y en Oloblogger, Ciudad Blogger y Vagabundia ya han publicado sobre esto.

Tratando de ser breve, sólo quiero recalcar, que para usar esta característica en tu blog, sólo necesitas tener seleccionado "El feed completo" en la opción Permitir feed de blog , y para configurar esto, tienes que ir a Configuración > Otros, como se muestra en la imagen:

También, necesitas tener habilitados los comentarios debajo de la entrada, y para configurar esto, tienes que ir a Configuración > Entradas y comentarios, y en la opción de Ubicación de los comentarios, seleccionar Debajo de la entrada :

De ese modo, tanto en las plantillas del diseñador de plantillas, como en las vistas dinámicas, esto funcionará perfectamente.

Pero, ¿qué pasará con las plantillas personalizadas?, ¿funcionará o no?

Si utilizas plantillas personalizadas, o bien, has hecho cambios en el HTML de los comentarios, podría haber problemas, y no funcionar. En Oloblogger han publicado una solución para esto.

Según leía, parece que también hay problemas si utilizas Prototype+Scriptaculous, y en Vagabundia ya han publicado una solución.

La presentación de los comentarios, dependerá de los estilos que tenga la plantilla, es decir del CSS.

Bueno, por mi parte, iré a trastear el HTML de mi plantilla para habilitar esto, ya que parece ser que aquí no ha pasado nada :P

Por último, quiero resaltar que me alegra mucho que Blogger esté mejorando el sistema de comentarios, que como ya lo había dicho en un comentario, es una de las partes que necesitan mejoramientos. ¡Bien por Blogger!, yo le doy un +1.

Cómo crear un Menú muy Colorido

noreply@blogger.com (Karla Castañeda) — Wed, 11 Jan 2012 00:06:00 +0000

¡Hola, qué tal!, en esta ocasión, te mostraré como crear un menú muy colorido, tanto como lo quieras :)

En una siguiente entrada te diré cómo puedes ponerle iconos usando sólo una imagen (técnica sprite) ;)

Es muy fácil, y lo hacemos sólo con CSS, creamos bloques en los enlaces, de ese modo, toda "la cajita" funciona como enlace; también podrás agregar una descripción corta a cada enlace. En el ejemplo usaré colores de fondo. Funciona en todos los navegadores incluyendo IE6.

Ok, pues entonces, ¡veamos cómo hacerlo!.

Que el menú tenga diferentes colores de fondo

Paso 1. Primero tenemos que tener una sección (para agregar un gadget) y poner ahí el HTML del menú, y lo podemos conseguir de dos formas.

Las dos son muy sencillas, pero voy a explicar sólo una, que consiste en cambiar el número de elementos que se muestran en la cabecera del blog. Para ello, vas a la edición de HTML de la plantilla, y con la ayuda de ctrl F, buscas esta linea de código:

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

Luego, cambias 1 por 2 y no por yes.

Nota: En la entrada donde explico como poner un menú con pestañas, también menciono la forma de crear una sección nueva en la cabecera. Para las nuevas plantillas no usamos la del crosscol (donde generalmente está el menú con páginas estáticas), ya que hay ciertos estilos que pueden afectar los resultados de nuestro menú.

Ojo: Si quieres el menú arriba del título, entonces procura que el gadget quede arriba de éste, y si lo quieres debajo del título, entonces arrástralo cuidando de no ponerlo en la sección del crosscol, ya que esa sección está justo debajo .

Paso 2. Ve a: Plantilla > Personalizar > Avanzado > Añadir CSS, y pones el siguiente CSS, editando los valores según tus gustos y necesidades. Guíate con los comentarios que están entre /*...*/. Al finalizar puedes quitarlos, y/o también si quieres puedes comprimir el CSS.

Lo que hacemos para que cada enlace tenga diferente color, es crear una clase para cada uno, y ponemos el color de fondo.

Voy a poner en el CSS, los estilos para "cinco enlaces", tú puedes poner los que quieras, y cambiar el nombre de cada clase que resalté de rojo y si lo haces también lo harás en el HTML.

ul#menu {
width:890px;/*ancho del menú*/
height:50px; /*alto del menú*/
margin:0;
padding:0;
list-style:none;
clear:both;
}
/*los estilos de cada elemento*/
#menu li{
float:left;
padding:0;/*la separación de cada elemento*/
margin:0;
}
/*Los estilos que se aplican a todos los enlaces*/
#menu li a{
font-size:16px;
text-align:center;
color:#242424; /*color de fuente*/
white-space:nowrap;
display:block;
height:35px; /*la altura*/
border:1px solid #fff; /*color de borde, cambia el valor por 0 si no quieres borde y que se separe*/
font-weight:bold;
text-decoration:none;
}
/*Estilos de la descripción*/
#menu p{
font-size:11px;
padding:3px 0 0 0;
margin:0;
line-height:9px;
text-align: center;
font-weight: normal;
}
/*enlace 1*/
a.enlace1{
width:120px; /*ancho*/
padding:11px 5px 5px 7px;
margin:0;
background:#c3e6ee; /*color de fondo*/
}
/*enlace 2*/
a.enlace2{
width:135px; /*ancho*/
padding:7px 7px 5px 5px;
margin:0;
background:#edcc15; /*color de fondo*/
}
/*enlace 3*/
a.enlace3{
width:135px; /*ancho*/
padding:7px 5px 5px 7px;
margin:0;
background:#e3a1ea; /*color de fondo*/
}
/*enlace 4*/
a.enlace4{
width:145px; /*ancho*/
padding:7px 7px 5px 5px;
margin:0;
background:#c1ef85; /*color de fondo*/
}
/*enlace 5*/
a.enlace5{
width:125px; /*ancho*/
padding:7px 5px 5px 7px;
margin:0;
background:#dbecef; /*color de fondo*/
}
/*El efecto hover de los enlaces */
#menu a:hover{
background:#f54edb;/*color de fondo*/}

Luego, guarda lo que agregaste en "Aplicar al blog".

Notas:

Todo el CSS es totalmente válido.
Los valores del padding se leen: arriba, derecha, abajo, izquierda.
Agregamos la descripción usando la etiqueta "p".

Para cambiar los colores usa esta tabla de colores.

Paso 3. Finalmente, lo que nos falta es agregar el HTML, y para ello vas a diseño, y en la sección de la cabecera, agregas un gadget con la opción HTML/Javascript, y dentro pones esto:

<ul id="menu">

<li><a class="enlace1" href="#">ENLACE1<p>Lorum Ipsum</p></a></li>

<li><a class="enlace2" href="#">ENLACE2<p>Lorum Ipsum</p></a></li>

<li><a class="enlace3" href="#">ENLACE3<p>Lorum Ipsum</p></a></li>

<li><a class="enlace4" href="#">ENLACE4<p>Lorum Ipsum</p></a></li>

<li><a class="enlace5" href="#">ENLACE1<p>Lorum Ipsum</p></a></li></ul>

Sustituye la almohadilla (#), por la dirección web o de la página de tu blog, pones el texto de cada enlace (ENLACE1,2,3...) y donde dice: Lorum Ipsum, escribes la descripción de cada enlace. Separé cada linea del enlace para que la identifiques fácilmente. Al terminar de editarlos puedes quitar la separación.

Y listo ya tienes un menú muy colorido ;)

Variantes

Puedes, crear distintos efectos en el hover, por ejemplo agregar padding, para que se desplace cada enlace, y lo haces en #menu a:hover{, sólo pones:

padding-left:20px;/*padding a la izq.*/

padding-right:20px;/*padding a la derecha*/

Que el color diferente sólo se vea en el efecto hover

Puedes hacer que los enlaces del menú tengan un mismo color, y que el color diferente se vea al poner el puntero del ratón sobre el enlace (efecto hover). Para ello, tendrás que editar el CSS.

Primero, deberás especificar qué color tendrá el enlace, en esta parte:
#menu li a{
...
background: #CCC;
...

Luego, quitas el color de fondo de "cada enlace" (Enlace 1, 2, 3 etc...)

a.enlace1{
...
~~background:#c3e6ee;~~ /*lo eliminas*/
...
}

Después, defines el color de fondo en el hover, para cada enlace:

a.enlace1:hover{
...
background:#c3e6ee;
...
}
a.enlace2:hover{
...
background:#edcc15;
...
}
...

Finalmente, eliminas esta parte, ya que el efecto hover lo escribimos de forma separada para cada enlace, como te decía anteriormente:

/*El efecto hover de los enlaces */
#menu a:hover{
background:#f54edb;/*color de fondo*/}

De ese modo todos los enlaces se verán igual, y el color diferente se verá sólo al poner el puntero encima de la imagen ;)

¡Qué fácil verdad!, ¡a divertirse un rato!

4 tips y trucos útiles para quienes usan plantillas personalizadas

noreply@blogger.com (Karla Castañeda) — Thu, 05 Jan 2012 20:00:00 +0000

Si eres de los que usan plantillas personalizadas de terceros, una buena idea es probarla antes de ponerla de forma definitiva en tu blog, para verificar que todo funcione correctamente, y evitar sorpresas. Esto lo puedes hacer fácilmente en otro blog que crees para dicho propósito, ese que llamamos "blog de pruebas".

He aquí 4 tips y trucos útiles para quienes usan plantillas de terceros, también algunos pueden ser de utilidad, si eres de los que les gusta personalizar la plantilla ;)

1. Verificar que la plantilla sea compatible con los principales navegadores y sus versiones

Tal vez estés utilizando Firefox y al probar tu blog veas todo en orden, pero ¿te has preguntado como lucirá en Internet Explorer versión 7?, por ejemplo.

Generalmente no hay mucho de que preocuparse entre las mismas versiones de navegadores como Firefox y Google Chrome, caso contrario a Internet Explorer que suele causar problemas, hablando de sus versiones antiguas. Afortunadamente parece que ya no habrá que preocuparse por Internet Explorer 6, ya que habrá cierta actualización automática que pretende erradicar su uso, aunque todavía nos queda la versión 7.

Ver como luce tu blog en distintos navegadores

Browser shots, puede ayudar con esta tarea, haciendo capturas de pantalla de tu blog o página, en los distintos navegadores y versiones, según elijas.

Personalmente, compruebo la compatibilidad directamente en el Navegador, no es muy práctico, pero me gusta ver directamente que todo luzca bien, navegando por el sitio.

Probar el diseño en distintas versiones de Internet Explorer, en el mismo navegador

Si usas Internet Explorer, o por lo menos lo tienes instalado en tu computadora, desde su versión 8, puedes ver como luce tu blog en distintas versiones, si utilizas las herramientas de desarrollo. Lo ideal es que ya tuvieras la versión 9, para probarlo desde esa versión.

Para hacer la prueba, pulsas la tecla F12, luego en Browser Mode, seleccionas la versión que deseas probar (de las tres primeras), y al seleccionarla debería cambiar automáticamente a la misma versión en Document mode, de ese modo el navegador se compartará como si fuera la versión que has seleccionado.

Al terminar, no olvides cambiarlo a la versión 9, "Internet Explorer 9" y en Document mode debería estar "Internet explorer 9 standars", a menos que quieras navegar como si utilizaras una versión anterior...mmm, mejor no ¿vedad?.

Otras herramientas

Otra herramienta online que toma capturas de pantalla usando las distintas versiones de Internet Explorer es Netrender, e incluye Internet Explorer 6, aunque afortunadamente yo no tenemos que preocuparnos mucho por esa versión, (yo ya no lo hago). La limitación es que, como toda captura, no puedes comprobar su funcionamiento y sólo ves como luce la página.

2. Verificar que las páginas estáticas funcionen correctamente, cuando se utiliza resumen automático en las entradas

Algunas plantillas antiguas, que utilizan resumen automático en las entradas, tienen un problema en el que al dirigirte a la página estática, esta se muestra con "leer más", o el texto que se haya agregado.

Esto se soluciona editando la siguiente parte en el HTML de la plantilla, por ejemplo, este es el código para crear el resumen automático que habían explicado en Gem@Blog en el 2009, cuando todavía no existían las páginas estáticas de Blogger:

<div class='post-body entry-content'>
<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 id='showlink'><a expr:href='data:post.url'> Texto para expandir el post </a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
<div style='clear: both;'/> 
</div>

Habrá que agregar el código resaltado de verde al código anterior:

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

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

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

<div expr:id='"summary" + data:post.id'><data:post.body/></div>

<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>

<span id='showlink'><a expr:href='data:post.url'> Texto para expandir el post </a></span>

</b:if></b:if>

<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if><b:if cond='data:blog.pageType == "static_page"'><data:post.body/>

</b:if>

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

</div>

Lo que hacemos es condicionar lo que sucederá con las páginas estáticas, y lo anterior, puede traducirse como: -si estamos en la página principal, se crea el resumen automático, en las entradas y páginas, y si estamos en cada página individual o en una página estática, se muestra el contenido del post-.

3. Verificar la plantilla en distintas resoluciones de pantalla

Esto servirá para ver si la plantilla se adapta óptimamente a las distintas resoluciones de pantalla. Puedes tomar en cuenta las resoluciones de pantalla que más visitan tu blog, basándote en tus propias estadísticas, para decidir si la plantilla cumple satisfactoriamente con este punto.

Herramientas para verificar el blog en distintas resoluciones de pantalla

Si utilizas Chrome existe una extención que permite comprobar esto, o bien puedes usar Test size que es una herramienta online, que te ayudará a lograrlo.

4. Alojar las imágenes de la plantilla por tu propia cuenta

Algo muy recomendable que puede ayudar el tiempo de carga de tu blog. Además si guardas por ti mismo las imágenes de la plantilla, evitarás problemas futuros como la desaparición de una imagen de tu blog, si por ejemplo se borra accidentalmente, etc.

Cómo guardar imágenes de la plantilla

Paso 1. Copia todas las direcciones de las imágenes que encontrarás en la edición de HTML de tu plantilla, y lo haces fácilmente si utilizas ctrl F, escribiendo el comienzo de estas: http://...

Paso 2. Luego, pones la dirección de la imagen en la barra de navegación de tu navegador, descargas la imagen y la guardas en tu computadora.

Paso 3. Una vez que termines, subes las imágenes a un blog de pruebas que uses para tal propósito, o bien, a una página estática de tu blog que pudieras guardar como borrador u ocultar.

Paso 4. Desde el panel de edición de entradas, haz click en el botón de HTML enseguida de "Redactar", en la nueva interfaz, y copia la dirección de la imagen que está dentro de la etiqueta a que envuelve a la imagen.

Nota: Es esa la dirección que tiene la imagen con su tamaño original, por eso no tomas la que viene el código de la propia imagen.

Tip: Si eres muy novato, y si se te complica obtener el código de la imagen desde el HTML de la entrada, entonces, ya que subas todas las imágenes, publica la entrada, vas a la entrada, haz click sobre cada imagen, y copia la dirección que aparece en la barra de direcciones, esto pensando en que no está habilitado el lightbox de Blogger.

Conclusiones
Un buen diseño compatible con la mayoría de navegadores y funcionando correctamente, hará que tu blog luzca más profesional, dará una mejor impresión a tus usuarios, y sumado a tu contenido, seguramente hará que regresen y así captarás a una mayor audiencia ;)

Referencias y más información:

Comprobar el diseño en varios navegadores
Herramienta de desarrolladores de IE

Una forma muy peculiar de ganar dinero...

noreply@blogger.com (Karla Castañeda) — Thu, 05 Jan 2012 19:40:00 +0000

Ahora en vacaciones de Navidad, entre mis recorridos, me encontré con una idea para ganar dinero muy singular, no sé si llamarla original, extravagante, rara, bueno, mejor júzgalo tú.

La verdad es que nunca se me hubiera ocurrido, y aunque seguramente ya conocerás las máquinas traga monedas que arrojan algo, la forma en que lo aplicaron si que me sorprendió, vaya ingenio, habrá que investigar a cuanto hacienden las ganancias anuales y ver si le entramos :D

¿Una máquina traga monedas que arroja semillas para aves?...así es, las gallinas, las puedes ver ahí en la primera imagen, y si quieres darles de comer, pones la monedita, y recibes un puñito de semillas, ¿qué tal...? :P

La ausencia de comentarios: ¿un indicativo de fracaso?

noreply@blogger.com (Karla Castañeda) — Sun, 01 Jan 2012 22:52:00 +0000

Los comentarios en el blog, son un fuente de motivación para algunos administradores de blogs, de hecho, hay quienes tratan de conseguirlos de cualquier forma, por ejemplo, premiando a quienes los hagan. También, es muy común ver gráficos pegados en los blogs, que dicen: "Tus comentarios enriquecen este blog", "Qué esperas, comenta!", lo cual demuestra la importancia que algunos aún le dan.

Pero, ¿por qué ha disminuido considerablemente el número de comentarios en los blog de forma general?, pensando en que este tiene un número considerable de visitas.

En el siguiente tutorial en comic, se explican cómo los tiempos han cambiado, y muchos han optado por manifestar el agrado, aceptación u opinión de nuestros artículos, a través de las redes sociales:

Viendo esto, estarás pensando en poner botones para compartir las entradas , ya sea usando los botones que facilita Blogger, algunos personalizados, o bien los botones oficiales de cada red social. De ese modo facilitarías a los usuarios de tu blog, compartir tu contenido ;D

Tutorial en comic por: Proyecto Autodidacta

Los 6 grandes aciertos de Blogger + los "no tanto" en el 2011

noreply@blogger.com (Karla Castañeda) — Sun, 01 Jan 2012 21:54:00 +0000

El año 2011 fué testigo de muchos cambios y novedades en la plataforma de Blogger, y a juzgar de una servidora, hubo muchos aciertos, y alguna que otra metida de pata, voluntaria o no, que a más de uno le hizo pegar el grito en el cielo.

Hoy veremos los acontecimientos más relevantes de Blogger en el 2011, y destacaremos cuales fueron los cambios + acertados y convenientes, y aquellos que no precisamente fueron festejados con champagne, ~~chelas~~, o un buen helado de fresa o limón.

1. Blogger añade 35 fuentes nuevas al Diseñador de Plantillas. ¡Maravilloso! y creo que coincidimos, ¿cierto?, definitivamente aumenta las posibilidades de que nuestro blog luzca más guapetón, usando fuentes de diseñador que permitan darle un mayor atractivo al diseño. Yo le doy un +1

2. Blogger agrega un nuevo gadget de "Seguir por correo". Este gadget sin duda, vino a facilitar a los administradores del blog, ofrecer suscripciones de forma sencilla y rápida, y captar así una mayor audiencia, ¿sí ó sí?, entonces, también aquí está el +1

3. Blogger incorpora herramienta para subir videos de YouTube al panel de Edición de Entradas, ¡Qué bueno!, seguramente ya no tendrás ningún problema para insertar un video de YouTube en las entradas de tu blog ;). Entonces aquí esta el +1

4. Blogger cambia su interfaz No se tú, pero yo le doy +1

5. Vistas Dinámicas de Blogger. Sin duda uno de los cambio más interesantes e innovadores que ha hecho Blogger en lo que a sus plantillas se refiere. Con algunas limitaciones, pero seguramente luego podrás agregar gadgets y otras características. Definitivamente +1

6. Google facilita la conexión de Blogger con G+, ¡Bravo!, esto facilitará compartir las entradas más fácilmente en Google plus. Otro +1

Por otro lado, hubo algunos eventos que no fueron tan bien aceptados como los anteriores, y a más de uno les hizo derramar un poco de bilis, o por lo menos perder la paciencia...

7. Entradas y comentarios desaparecidos, al darle mantenimiento al servicio. Espero que no te haya sucedido, pero quizás fuiste de los que perdieron alguna entrada publicada cuando se daba mantenimiento al servicio, algunos cambios en la plantilla (me incluyo) o algunos comentarios. Trataron de arreglar la situación, aunque, no se a ti, pero a mi, nunca se me regresaron cierto artículo. ¡Ni hablar, ya ni llorar es bueno!. aunque no me voy a quedar con las ganas, y tendré que ponerle un -1

8. Blogger añadió el lightbox de manera sorpresiva y sin previo aviso. Otro tema que seguramente recordarás, y donde muchos expresaron abiertamente su inconformidad. Luego, blogger decide arreglar el asunto y permitir que cada usuario elija si lo agrega o no al blog. Anque a mi no me molesto, pensado en que fué rechazado por algunos, tendremos que darle un -1

Si ponemos en la balanza todo esto, definitivamente tenemos más cosas que festejar y agradecer a este servicio que nos permite expresarnos, compartir, y tener un espacio en este inmenso universo de Internet.

¿Difieres en algo?, déjanos saber tu opinión. ¡Ah!, por cierto, ya que hablamos de menos uno, si deseas poner -1 a publicaciones de Google+, lo puedes hacer si usas la extención para Chrome Minus one, también disponible para Firefox, con la limitación de que sólo quienes la usan, sabrán qué publicaciones tienen esa valoración.

Un Nuevo Año: una Nueva Oportunidad

noreply@blogger.com (Karla Castañeda) — Sun, 01 Jan 2012 03:37:00 +0000

Cada año tenemos la oportunidad de seguir luchando por conseguir nuestros sueños, de corregir nuestros errores y ser mejores personas, de vivir nuevas y emocionantes experiencias, de compartir con otros lo que tenemos, de volver a sentir que la vida está aquí y ahora, y que es el ahora lo que tenemos, y por lo que debemos vivir y dar siempre lo mejor.

Espero sinceramente que este año cumplan todos tus sueños, y que haya amor, paz, salud, esperanza, y prosperidad.

8 Tips y Trucos útiles para el Stream o Novedades de Google+

noreply@blogger.com (Karla Castañeda) — Sat, 31 Dec 2011 06:05:00 +0000

Si empiezas a usar Google+ querrás saber cómo sacar el máximo provecho de todas las características que ofrece este servicio. Google Plus es un servicio con un potencial enorme, y además, tenemos a nuestro alcance varias extensiones disponibles para algunos navegadores, que permiten agregar más características y dotarlo de más funcionalidades.

He aquí 8 tips y trucos útiles para aplicarlos a la sección de Novedades o Stream, para los que siempre quieren +.

1. Darle estilos a los textos. Si buscamos darle énfasis a los textos de nuestras publicaciones, podemos resaltarlos, con negrita, usar cursiva o ~~tachado~~.

Para resaltar un texto con negrita, sólo agregas un astedisco al principio y al final del texto, por ejemplo: *negrita*, si queremos el texto con cursiva, usas el guión bajo al principio y al final del texto, por ejemplo: _Cursiva_ y para ~~tachar~~ un texto, solo escribes un guión ortográfico antes y después del texto que quieras tachar, ejemplo: -tachado-.

2. Utilizar teclas de acceso rápido para movernos más rápido. Desde el Stream o Novedades, podemos desplazarnos de publicación a publicación de forma precisa, si pulsamos "j" iremos hacia abajo. Si queremos ir para arriba, entonces pulsamos la tecla "k", así de fácil.

3. Evitar que aparezca una publicación nuevamente en el stream. Cuando comentamos en una publicación o nos compartieron una, cada vez que se comente es esta, aparece nuevamente en el stream, y recibimos una notificación. Podemos evitar esto si silenciamos la publicación, y para ello solo necesitamos seleccionar la opción que dice: "Silenciar Publicación", desde el menú de opciones, situado a la derecha de cada publicación.

4. Hacer menciones a otros usuarios. Podemos mencionar a cualquier usuario, si antes del nombre de éste, escribimos @, o +, por ejemplo @compartídisimo, o bien +compartidísimo. Al empezar a escribir, te arrojará una lista perfiles, y puedes autocompletarlo con sólo seleccionarlo. Al mencionar a alguien, este recibe una notificación de la mención.

5. Compartir material exclusivo con tus círculos. Este para mi es un sueño hecho realidad, y se puede lograr si compartes una publicación sólo con determinado círculo, de ese modo, solo la verá dicho círculo.

Para cerrar con broche de oro, y cumplir el propósito, necesitaremos bloquear la publicación y esta no podrá ser compartida. Para bloquearla, solo seleccionamos la opción que dice "Bloquear publicación", al publicarla.

6. Compartir publicaciones de tu stream con otras redes sociales. Seguramente habrá publicaciones que deseas compartir en otras redes sociales que uses como Twitter y Facebook, para hacer la tarea más facil y rápida, podemos usar la extensión extended share para Chrome. Al instalarla, seleccionas las redes sociales que desees agregar, y luego aparecerán los iconos de estas al final de cada publicación, para que puedas compartirla fácilmente.

7. Cambiar la presentación del stream y agregar otras funcionalidades. Hay varias extensiones para Chrome que te permiten cambiar la presentación del stream, y agregar otras caracteristicas interesantes, entre ellas están Google+ for Google Plus con la que podrás plegar publicaciones y comentarios, entre otras cosas.

Otra extensión útil es G+ ultimate para Google Plus, con la que puedes cambiar la forma en que se muestran las publicaiones (una enseguida de la otra) entre otras características. Las dos son muy buenas, y además, de las más populares tomando en cuenta el número de usuarios, y por "mucho" lo es, pruébalas y elige, yo uso la primera ;)

8. Ampliar las imágenes de Novedades. Una de las cosas que es muy común que se comparta en G+, son las imágenes o fotografías, ¿cierto?, con la extención para Chrome +Photo Zoom, es posible ampliarlas y verlas del tamaño original, con tan sólo poner el puntero del ratón encima de la imagen, te dá una mejor experiencia al verlas, te la recomiendo.

Otra extención que amplía las imágenes de muchas otras páginas web (potencialmente en aquellas que tienen un enlace directo al archivo de la imagen) es Hover Zoom, y si ya tienes a esta instalada, no será necesario usar la primera. O bien, si solo quieres ampliar las imágenes del stream de Google+ , sólo usa la primera :)

¿Sabes de otro truco que pueda ser útil para dar más rendimiento al stream o Novedades de Google+?, no dudes en compartirlo.

Referencias y mas información:
Cinco cosas sobre el stream de G+
Cómo averiguar con quien se ha compartido una publicación
Más sobre las Novedades o Stream
Lo + Nuevo de Google+
Filtrar contenido
Tips & tricks for power users... (in english)

3 Fantásticas Extensiones de Google Chrome muy útiles para Blogueros

noreply@blogger.com (Karla Castañeda) — Tue, 27 Dec 2011 09:21:00 +0000

Espero que la estés pasando muy bien esta temporada de celebraciones, te envío un fuerte abrazo y buenos deseos :D

Me encontraba explorando extensiones para Google Chrome, provechosas para Google+, y terminé enfocándome en investigar las extensiones que pudieran resultar útiles para los que somos "blogueros" y ahora mismo te paso el dato:

1. Blog this. Como ya sabrás, Blogger dispone de una opción para que puedas compartir un artículo que te gusto, de cualquier blog, publicando una entrada a tu blog. Esta opción sólo funcionará si el administrador del blog la tiene habilitada de algún modo. Si no sabes de lo que te hablo, esta opción aparece en las nuevas plantillas, con los botones de compartir, y es el icono de Bloger.

Pues bien, esta extensión hace la tarea muy fácil, para que puedas compartir cualquier contenido que encuentres en la web, con un sólo click en tu blog, sin depender de que el administrador de un blog facilite hacerlo desde ahí, y de que use Blogger o no.

2. Vistas Dinámicas de Blogger. Con esta extensión, podrás ver cualquier blog de Blogger usando las vistas dinámicas, independientemente del diseño que use dicho blog. Así es!, puedes elegir cómo verás el blog de las 7 formas que dispone, con tan sólo elegirlo.

Simplemente instalas la extensión, y el icono de Blogger aparecerá al lado de la estrella de añadir a marcadores de la barra de navegación, cada vez que esta pueda actuar y ofrecerte esta posibilidad, entonces, despliegas las siete opciones de las vistas dinámicas, haciendo click sobre el icono y luego, eliges la que quieras. Fantástico ¿verdad?.

3. ScribeFire. Esta es una extensión que inicialmente estuvo disponible para Firefox, y te permite publicar y editar tus entradas de una manera sencilla, en otras palabras, es un editor que se integra al navegador. Está disponible en español, y también puede ser usado en otros servicios además de Blogger, como en TypePad, Windows Live Spaces, Tumblr, Posterous, Xanga, LiveJournal, entre otros.

Su interfaz es muy sencilla, y cuenta con todas las herramientas necesarias para que puedas crear tu publicación, o editar otras. Para empezar a usarla, después de la instalación, accedes al panel desde su icono que aparece en la barra de navegación, y agregas la URL de tu blog o los blogs, en donde dice: "Agregar un nuevo blog" y los demás datos que te pide.

Recientemente está integrado a Zamanta, que es un programa que pudiera ayudarte escribir artículos ricos en contenido, ya que reconoce el tema de tu post, y te sugeriere imágenes y enlaces relacionados, para que sirvan de referencia a tu artículo.

Otro dato interesante de este editor, es que desde su panel, te ofrece la opción para que monetices tu blog con adbull, que es un servicio de publicidad que paga por click como AdSense. Para ver mas información sobre este servicio, echa un vistazo a su página.

Felices fiestas!!

Introduciendo la Plantilla para Blogger Cocinando con Adela

noreply@blogger.com (Karla Castañeda) — Fri, 23 Dec 2011 19:19:00 +0000

Ya tengo lista la primer versión de la plantilla Cocinando con Adela que ya te había mencionado antes, es una plantilla pensada en blogs de cocina, puedes personalizar la imagen de la cabecera con tu logo, con una imagen propia, o bien no poner ninguna.

También es una plantilla versátil como la plantilla Versatile, ya que podrás cambiar los fondos de ciertos elementos, como el color de fondo del menú, fondo de la galería de imágenes miniaturas de tus entradas populares, etc, desde el Diseñador de Plantillas, de ese modo, la plantilla tendrá una apariencia diferente cada vez que lo quieras, y podrás darle tu toque personal fácilmente, sin ingresar a la edición de HTML de la plantilla, así que a divertirse ;)

Para Ingresar al Diseñador de Plantillas, necesitas ir a Plantilla > Personalizar > Avanzado y desde ahí hacer los cambios que desees.

Características

Plantilla de 2 columnas
Menú desplegable
Resumen automático en las entradas
Buscador Integrado en el header
Mucho espacio para colocar gadgets
Sección especial para agregar banner publicitario el el heaer de 468x60 pixeles
Secciones especiales para agregar banners de 125x125 pixeles (agregas gadget de imagen y pones el enlace)
Sección especial para mostrar tres gadgets de forma alterna
Sección especial para mostrar galería de imágenes en miniatura del gadget de Entradas populares
Tres columnas adicionales en el Footer

Demostración

Tendrás mucho espacio para colocar gadgets, como puedes ver en la imagen:

Como Personalizar la imagen de la cabecera o header

Lo puedes hacer de dos maneras, la primera, es colocar una imagen en el #outer-wrapper, en donde actualmente muestra esa imagen de los sartencitos que puse en la demostración, la ventaja de ponerla ahí, a diferencia de subirla desde Diseño en la sección de la cabecera, es que la imagen puedes ser tan grande "de alto" como desees, ya que no está limitada al alto del header. En cuanto al ancho, no debería superar los 990 pixeles que tiene definido. Te recomiendo usar como fondo la imagen del body (el pattern), en el editor que uses, o bien usar una imagen con fondo transparente.

La otra forma, es ir a Diseño y subir la imágen que quieras desde la sección de la cabecera, donde puedes elegir que se muestre en lugar del título y la descripción, debajo de estos etc. Puedes mover dicha imagen por medio del #header-inner.

Como editar el Menú de navegación

Esta es la estructura que tiene el menú desplegable, y que necesitas que editar, he resaltado de rojo lo que necesitas cambiar:

<div class='nav'>
<ul class='menu' id='menu'>
<li class='nodiv'><a class='nodiv' expr:href='data:blog.homepageUrl'>Inicio</a></li>
<li>
<a class='desplegable' href='#'>Entradas</a>
<ul>
<li><a href='#'>Ensaladas</a></li>
<li><a href='#'>Aderesos</a></li>
<li class='submenu'>
<a href='#'>Sopas »</a>
<ul>
<li class='noborder'><a href='#'>Sopas 1</a></li>
<li><a href='#'>Sopas 2</a></li>
<li><a href='#'>Sopas 3</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href='#'>Platillos</a>
<ul>
<li><a href='#'>Platillo 1</a></li>
<li><a href='#'>Platillo 2</a></li>
<li><a href='#'>Platillo 3</a></li>
<li class='submenu'>
<a href='#'>Guisos »</a>
<ul>
<li class='noborder'><a href='#'>Guiso 1</a></li>
<li><a href='#'>Guiso 2</a></li>
<li><a href='#'>Guiso 3</a></li>
<li><a href='#'>Guiso 4</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href='#'>Postres</a>
<ul>
<li><a href='#'>Panes</a></li>
<li><a href='#'>Pasteles</a></li>
<li><a href='#'>Helados</a></li>
<li><a href='#'>Galletas</a></li>
<li><a href='#'>Gelatinas</a></li>
</ul>
</li>
<li>
<a href='#'>Otras</a>
<ul>
<li><a href='#'>Otras 1</a></li>
<li><a href='#'>Otras 2</a></li>
<li><a href='#'>Otras 3</a></li>
</ul>
</li>
<li>
<a class='last' href='#'>Favoritos</a>
<ul>
<li><a href='#'>Favorito 1</a></li>
<li><a href='#'>Favorito 2</a></li>
<li><a href='#'>Favorito 3</a></li>
<li><a href='#'>Favorito 4</a></li>
</ul>
</li>
</ul>

Ya deje el menú con algunos textos para los enlaces que tendrás que editar, poniendo tus propios textos y la dirección web a donde quieres que se dirija al hacer click sobre este.

Simplemente sigue cada linea de código y dentro de la linea debe estar el texto y la dirección web.

Ejemplo:

<li><a href='#'>Favorito 1</a></li>

Donde esta la almohadilla '#' pones el enlace en sustitución a este, recuerda quitar la almohadilla de otro modo no funcionará, sólo debe estar el enlace.

Y donde dice Favorito 1, pones el texto del enlace.

Como configurar la fecha de los posts

Necesitas ir a Configuracion > Idioma y Formato (en la nueva interfaz) y en Formato hora, seleccionarla como se muestra en la imagen:

*Varía según la fecha actual.

Como agregar los banners publicitarios

Sólo necestitas agregar la imagen en el gadget de "Imagen" en las secciones correspondientes, y agregar el enlace para dicha imagen en la configuración.

Como agregar últimas entradas con miniatura

Desde diseño, haz click en el gadget de Lista de Blogs y agrega el siguiente enlace de forma repetitiva, cambiando el número marcado de rojo cada vez que agregues el enlace, (el primer enlace 1, luego 2, después 3...) cada enlace sirve para que se muestre una entrada, y vas a poner tantos enlaces como entradas quieras mostrar.

http://Nombreblog.blogspot.com/feeds/posts/default?start-index=1&max-results=1

Deberás configurarlo para que muestre el titulo y la imagen miniatura. Todas mostrarán el enlace a la entrada que dice: "Ver artículo".

Configurar el gadget de entradas populares (galería de miniaturas) para que muestre el tooltip

Necesitas configurar el gadget de entradas populares, para que muestre solamente la miniatura, no marques la casilla del fragmento, de ese modo se verá el tooltip con el título de la entrada.

Cómo mostrar la Evaluación de Estrellas

Para agregarlo, solo necesitas ir al Diseño de la plantilla y hacer click en la sección de la Entradas y marcar la casilla para que se muestre:

Este elemento estuvo por un tiempo en periodo de prueba desde Blogger in Draft, luego lo pasaron a Blogger, y después lo regresaron, ahora, según compruebo no necesitas ir a Blogger in Draft, si esto cambia otra vez, ya sabes donde encontrarlo ;)

Descargar

Ahora, lo que sigue es, compartir esas ricas recetas!!

Créditos:
Javascript del menú desarrollado por: scriptiny

100+ Backgrounds, Patters, Vectores e Iconos Navideños

noreply@blogger.com (Karla Castañeda) — Mon, 19 Dec 2011 00:19:00 +0000

Posiblemente esta temporada querrás usar algún fondo con motivo navideño, o bien, agregar algún elemento alusivo a la navidad en tu blog. Hoy te tengo una colección de backgrounds, patters, vectores e iconos gratuitos con motivos navideños, que puedes usar en cualquier proyecto digital, algunos permiten uso comercial.

Backgrounds

27 fondos con motivos navideños.

Ver/Descargar.

10 brillantes backgrounds navideños

Ver/Descargar

Patterns

40+ patterns estilo retro-vintage para photoshop.

Ver/Descargar.

Otra excelente colección de patterns sin costura para Photoshop

Ver/Descargar

Vectores (elementos)

Ver/Descargar

Iconos

Ver/Descargar

Así que si tienes en mente un proyecto para esta temporada, nos esperes mas, que la navidad ya casi se nos adelanta ;)

Felices Fiestas!!

7 formas efectivas de crear títulos atractivos para tu blog

noreply@blogger.com (Karla Castañeda) — Mon, 12 Dec 2011 23:05:00 +0000

Escribir los títulos de tus artículos usando ciertas palabras, de cierto modo*, pueden hacer la diferencia en que un usuario tome acción, y entre a leer un artículo o no, sobre todo en los casos en donde el título tiene mucho peso, por ejemplo en Twitter, ya que sólo se muestra este, y en el caso del contenido que se envía por correo electrónico a nuestros suscriptores, por lo tanto, títulos "impresionantes" pueden significar un mayor tráfico.

Además, pensar en un título atractivo, nos orienta para darle una "dirección" al contenido de nuestro artículo, al escribirlo.

Es algo que yo he estado puliendo, y aún sigo mejorando; pienso que no deberíamos dejar de prestar atención a los títulos que usamos, ya que estos puedes ser el primer flechazo para "despertar el interés" de un usuario.

En esencia, estas son unas de las formas que podemos crear títulos atractivos:

1. Un título que comprende una lista. Es decir aquel que enumera puntos, cosas o características, ya que supone que contienen ideas más claras y ordenadas. En lo personal pienso que son los mejores y que debería usarse siempre que sea posible.

Por ejemplo:
10 maneras de Ahorrar Dinero en tus Compras Navideñas

...que pudiera ser más impactante que:
Ahorra dinero en tus compras Navideñas

2. Aquellos títulos que refieren una cantidad. Aunque es similar al punto anterior, este se refiere a especificar un número de algo que se ofrece, y no habla de diferentes puntos "de algo" como el anterior. Decir cantidades puede resultar más atractivo.

Por ejemplo:
200 Plantillas para Blogger Gratuitas para Descargar.

...que sería mejor que:
Muchas Plantillas para Blogger para descargar, o Algunas Plantillas para Blogger libres para Descarga, o simplemente Plantillas para Blogger libres para Descargar.

3. Un título que te dice "como hacer algo", ya que puede ofrecer soluciones y/o propuestas para llevar a cabo ciertas cosas, es decir, ofrece un beneficio.

Ejemplo: Como hacer una Corona Navideña

...y todavía lo podemos mejorar si lleva algún adjetivo:

Como hacer una Original Corona Navideña

4. El título que te revela algún secreto, a todos nos gustan los secretos, he ahí el éxito de "Victoria Secret" ahaha...bueno, ese es otro rollo...

Aunque sabemos que al escribirlo por Internet ya no será "tan secreto", siempre la palabra que nos dice que "nos revelan algo" es muy atractiva ¿verdad?

Ejemplo: Descubre cómo fulanito logro una fortuna en sólo un año

...que sería mejor que:
Fulanito logra una fotuna en menos de un año

...o bien siendo más explicito, y qué también incluye una lista:
10 secretos para mantenerse delgado

Que sería más atractivo que:
Mantente delgado o en forma incluso, puede ser más atractivo que: Cómo mantenerse delgado

5. Un título que tiene una interrogante. Estos pueden resultar favorables en ciertos títulos que traen controversia.

Ejemplos:
La banca o el sistema, ¿quién fué el responsable de la crisis en Estados Unidos?

...que sería mejor que:
La banca y el sistema, fueron los responsables de la crisis en Estados Unidos

Otro ejemplo, que hace un momento veía en Twitter:
Dominio .XXX, ¿un fracaso anunciado?

6. Algo que se supone mejor que antes, o que supera los estándares. A todos nos gustan las cosas "mejores", o que nos ofrezcan algo "mejor" de lo que ya hemos visto o tenido.

Ejemplo: Pastel de tres leches mejor que nunca

...que sería mejor que:
Rico Pastel de tres leches

...otro ejemplo:
El mejor programa para editar imágenes

que sería mejor que:
Programa para editar imágenes

7. Título que ofrece sencillez o rapidez para lograr algo, crea expectativas, y ofrece un beneficio. A todos nos gustan las cosas simples y prácticas.

Ejemplo: Como pintar a la Mona Lisa en tres pasos
...otro ejemplo: Baja de peso en sólo 2 semanas
...otro ejemplo: Haz una fortuna invirtiendo sólo 1000 pesos

Según el tema del artículo, este puede ser candidato para usarse en varias de estas formas y puedes combinarlas para crear un título de mayor impacto:

Ejemplo:
20 increibles técnicas para ganar suscriptores en sólo 30 días

Si observamos el título, este contiene

Una lista
Ofrece rapidez para lograr algo y crea expectativas
Ofrece un beneficio

¿Conoces alguna otra forma de crear títulos atractivos?, ¿qué te dice tu experiencia? ¿de qué me estoy perdiendo?

Conclusiones:
Lo dice Alex Dey, autor de "La Biblia del Vendedor": -Vender es decir ciertas palabras, de cierto modo, al momento indicado-*, este principio puede aplicarse en cualquier cosa en la que alguien tenga que tomar una decisión, y ente caso, ese alguien, es aquel usuario que pueda estar expuesto a los títulos de nuestros artículos, así que no lo pienses mucho y véndele la idea en tu título.

Anímate e irradia energía para cautivar a una mayor audiencia ;)

Referencias:
Como generar títulos virales

Imagen la obtuve de: www.yomujer.com/el-atractivo-de-hugh-jackman
[Editado]

Introduciendo la Plantilla Exclusiva para Blogger: "Círculos"

noreply@blogger.com (Karla Castañeda) — Thu, 08 Dec 2011 19:35:00 +0000

Hola, ¿cómo estás?, como te lo había prometido, ya tengo lista la plantilla y de forma exclusiva podrás descargar desde Google Plus.

Es una plantilla perfecta para blogs que siempre muestren imágenes relevantes, es un diseño minimalista, con contrastes que la hacen ver muy elegante, y además es versátil, ya que podrás cambiar el color de elementos clave, como el color de fondo del menú y detalles del footer desde el Diseñador de Plantillas, para darle un toque único ;)

Características

Plantilla de dos columnas
Imagen principal del post que será mostrada en un círculo como se puede apreciar
Barra flotante en el top, que podrás cambiar si no quieres la posición fixed
Menú en el top que son los títulos de las páginas estáticas
Sección especial para agregar gadgets
Sección especial en sidebar para agregar banners de 125x125 pixeles
Gadget de entradas populares personalizado, que es la galería de imágenes horizontal
Iconos Sociales para que te sigan en el footer
3 columnas adicionales en el footer
Comentarios Personalizados
Imágenes optimizadas

Demostración

La plantilla solo usa 3 imágenes de las 12 que hubiera necesitado si las pusiera de forma separada, lo cual definitivamente le da más rendimiento al blog, en lo que al tiempo de carga se refiere. De cualquier modo te recomiendo almacenarlas por ti mismo en Blogger, para luego sustituir los enlaces respectivamente.

Cambiar la posición fija de la barra del menú

Si te decides por no tener posición fixed (que flote) en la barra del menú, simplemente elimina estas propiedades en #crosscol-wrapper

position: fixed;
top: 0;
left: 0;
z-index:20;

Configurar imagen en la página Principal
El resumén de entradas no utiliza Javascript, es solo con CSS, y te recomiendo que pongas el salto en linea de Blogger desde el editor entradas, si no lo haces se mostrará la última imagen del post, cuando uses más de dos imágenes. Te recomiendo mostrar entradas impares 3,5,7, para darle un look asimétrico, aunque tu decides.

Si no te gusta "Home" en los enlaces de navegación, solo cambia la posición de la imagen para que se muestre "Inicio":

a.home-link{
background-position: -187px -284px; /* -157px -329px; para Inicio*/

Es decir, en lugar de poner:
background-position: -187px -284px; pondrás:

background-position: -157px -329px;

Configurar el gadget de Entradas Populares
Sólo configura el gadget de "Entradas populares", para que muestre solamente la miniatura, de ese modo se verá el tooltip con el título de la entrada. También puedes hacer más grande la letra del título del gadget (Lo + Visto) cambiando el valor de font-size, en #Popularposts2 h2.

Configurar el gadget del Feed para que muestre últimas entradas (Lo + Nuevo)

Sólo agrega el siguiente enlace al gadget del Feed, sustituyendo el nombre de tu blog, resaltado de rojo:

http://Tu-blog.blogspot.com/feeds/posts/default

Agregar enlaces de Redes Sociales
Para agregar los enlaces de tus páginas, ve a la edición de HTML, y sustituye la almohadilla (#) por la dirección web, y si deseas, cambia el texto que está resaltado de rojo. Solo sigué linea por linea y guiate con las clases que llevan el nombre de la red respectivamente.

<ul id='m-social'>
<li><a class='twitter' href='#' rel='nofollow' target='_blank'><span> Sígueme en Twitter</span></a></li><li>
<a class='facebook' href='#' rel='nofollow' target='_blank'><span>Sígueme en Facebook</span></a></li>
<li><a class='rss' href='#' target='_blank'><span>Recibe Actualizaciones</span></a></li>
<li><a class='plus' href='#' target='_blank'><span>Llévame a un Círculo</span></a></li>
</ul>

Espero que te guste, y cualquier inquietud, etc, no dudes en comentarla, se aceptan críticas ;)

El link de descarga en unos minutitos más en la página de Google Plus. (solo para quienes estén en mis círculos), espera muchas más!.

Crédito de las imágenes en los posts de la demostración: nonsen sesociety

Estrenamos página en Google Plus, manténte en contacto y recibe material exclusivo!!

noreply@blogger.com (Karla Castañeda) — Tue, 06 Dec 2011 19:44:00 +0000

Nos vestimos de azul, verde, rojo y amarillo!, estrenamos página en Google Plus para estar en contacto contigo desde ahí, recibe publicaciones y plantillas exclusivas entre otras sorpresas. Esa será la forma de premiarte por estar conmigo ;)

Esta es la primer plantilla que compartiré con mis círculos :)

Sólo me faltan unos detalles, y muy pronto estará lista ;)

Por lo pronto llévame a tus círculos y regálame uno! ;)

Y por si acaso no se visualiza el gadget, (derrepente se ponen sus moños) este es el enlace:

Agrégame en G+

Compartidísimo está comprometido a ofrecerte cosas de calidad, esa es la meta y el propósito de este sitio, tu eres la razón que me motiva a seguir con esto. Estoy comprometida a brindarte un mejor contenido, y una mejor experiencia al navegar. Espera cambios en el diseño del blog próximamente.

Gracias por tu apoyo y estamos en contacto!.

*Actualización: La dinámica para compartir contenido "exclusivo" contigo será la siguiente:

Al agregarme a un círculo, yo te agregaré de vuelta a otro, de ese modo podré compartir el contenido exclusivo contigo. La publicación exclusiva que haga será bloqueada, por lo que no podrá ser compartida, solo la verás tú, aunque si podrás comentar.

También publicaré material para que lo vea todo el público además de las publicaciones del blog que también serán públicas.

5 Razones de peso para escribir las referencias en tus artículos

noreply@blogger.com (Karla Castañeda) — Sat, 03 Dec 2011 23:27:00 +0000

Estaba leyendo la política oficial de Wikipedia, y me inspiró a tomar el tema de las "referencias", un punto que a veces dejamos en el olvido al escribir un artículo en nuestro blog.

Cuando escribimos un artículo, generalmente surge motivado por "algo", en algunas ocasiones porque lo vimos escrito en alguna página web, porque surgió inspirado al ver otro artículo, o bien, simplemente porque se nos ocurrió.

Independientemente de la razón que nos haya motivado a escribirlo, una buena práctica y que no debemos menospreciar es el citar las referencias, o las fuentes del artículo, y estas son unas de las razones por las cuales no deberíamos olvidarlas:

Le dan verificabilidad al artículo, es decir, cualquier lector puede comprobar la exactitud y precisión de la información, por medio de las fuentes que tú ofrezcas, de ese modo lograrás el siguiente punto...
Le dan credibilidad a tu artículo. Un artículo con referencias que brinden información adicional o corraboren la información que tu estás dando, lo hacen creíble, ¿tus lectores creen lo que escribes?
Tus artículos lucen más profesionales. Un artículo sin referencias, puede suponerse falso o erróneo, escribir referencias te hacen ver más profesional en lo que haces y comprometido a dar información veraz y de calidad, además, te hacen ver como una persona "honesta".
Ganarás más lectores. Al ganar "confianza" por parte de tus usuarios, seguramente muchos más querrán suscribirse a tu blog :)
Les das a tus lectores recursos adicionales sobre el tema. Seguramente habrá algunos interesados en ahondar en el tema, y el escribir referencias, facilitará que tus lectores encuentren más información sobre este.

¿Acostumbras escribir referencias o citar las fuentes en tus artículos? recuerda que nunca es tarde para empezar a tener buenas prácticas ;)

Imagen de: personal.soton.ac.uk