Monday, January 30, 2012

Cupido volando por el blog

Pues ya empieza el mes del amor para algunos, digo para algunos porque para m? todos los meses son del amor... ?puaf? qu� cursi estuvo eso.

Bueno, el d?a de San Valent?n, d?a de los enamorados, d?a del amor y la amistad, o como le quieran llamar, est? pr?ximo, as? que una buena manera de decorar el blog en el mes del amor, es poner a volar a Cupido en el blog, con suerte y flecha a alguno de sus lectores o lectoras.

?Que c?mo se ve? En este blog de pruebas puedes ver a este peque?o personaje rondando por la p?gina.

El script funciona en todos los navegadores menos en Internet Explorer (para variar), as? que los usuarios de ese navegador no podr?n verlo.

Para poner este Cupido volando por el blog entra en la Edici?n HTML de tu plantilla, y antes de </head>  pega este script.

<script type='text/javascript'>
//<![CDATA[
/***********************************************
* Cupido volando por el blog
* Script original de Virtual_Max
* Adaptado por ciudadblogger.com
***********************************************/
var vmin=1;
var vmax=5;
var vr=2;
var timer1;

function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body}
function Chip(chipname,width,height){
this.named=chipname;
this.vx=vmin+vmax*Math.random();
this.vy=vmin+vmax*Math.random();
this.w=width+20;
this.h=height;
this.xx=0;
this.yy=0;
this.timer1=null;}

function movechip(chipname){
if (document.getElementById){
eval("chip="+chipname);
if (window.innerWidth || window.opera){
pageX=window.pageXOffset;
pageW=window.innerWidth-40;
pageY=window.pageYOffset;
pageH=window.innerHeight-20;}

chip.xx=chip.xx+chip.vx;
chip.yy=chip.yy+chip.vy;
chip.vx+=vr*(Math.random()-0.5);
chip.vy+=vr*(Math.random()-0.5);
if(chip.vx>(vmax+vmin)) chip.vx=(vmax+vmin)*2-chip.vx;
if(chip.vx<(-vmax-vmin)) chip.vx=(-vmax-vmin)*2-chip.vx;
if(chip.vy>(vmax+vmin)) chip.vy=(vmax+vmin)*2-chip.vy;
if(chip.vy<(-vmax-vmin)) chip.vy=(-vmax-vmin)*2-chip.vy;
if(chip.xx<=pageX){
chip.xx=pageX;
chip.vx=vmin+vmax*Math.random();}
if(chip.xx>=pageX+pageW-chip.w){
chip.xx=pageX+pageW-chip.w;
chip.vx=-vmin-vmax*Math.random();}
if(chip.yy<=pageY)
{chip.yy=pageY;
chip.vy=vmin+vmax*Math.random();}
if(chip.yy>=pageY+pageH-chip.h)
{chip.yy=pageY+pageH-chip.h;
chip.vy=-vmin-vmax*Math.random();}

document.getElementById(chip.named).style.left=chip.xx+"px";
document.getElementById(chip.named).style.top=chip.yy+"px";
chip.timer1=setTimeout("movechip('"+chip.named+"')",100);}}

function pagestart(){
CupidoVolando=new Chip("CupidoVolando",147,168);
movechip("CupidoVolando");}

if (window.addEventListener)
window.addEventListener("load", pagestart, false)
else if (window.attachEvent)
window.attachEvent("onload", pagestart)
else if (document.getElementById)
window.onload=pagestart
//]]>
</script>
Luego, antes de </body> agrega este c?digo.
<!-- Cupido volando -->
<div id='CupidoVolando' style='position:absolute; z-index:80; left: -500px;'>
<img border='0' src='URL de la imagen'/></div>
<!-- Cupido volando -->
En donde se indica pon la URL de la imagen del Cupido que m?s te guste. Aqu? hay seis im?genes de d?nde escoger.












Habiendo puesto la URL de la imagen guarda los cambios y listo, tendr?s el blog listo para recibir el d?a de San Valent?n.

Sunday, January 29, 2012

Ganadores de La Semana de los Dominios 2012


Despu�s de siete d?as de mucha competencia y participaci?n de muchos seguidores de este blog, termin? La Semana de los Dominios, una semana que ha dejado a siete bloggers con un dominio nuevo, pero adem?s fue una semana en la que muchos hicieron nuevos amigos, presentaron sus blogs a otros usuarios, intercambiaron enlaces y sobre todo pasamos un buen rato con los comentarios tan ingeniosos que tienen :)

Y ya que termin? el concurso, aqu? est?n los siete ganadores de la semana, cada uno de ellos se ha ganado un dominio por un a?o, y si no me equivoco ya la mayor?a lo est? estrenando.
Los ganadores de La Semana de los Dominios son:

  1. Sergio Molina gan? en Twitter mencionando el nombre de los co-fundadores de Blogger.
  2. Jordan Daniel Alvarez gan? en Facebook adivinando la frase de la imagen.
  3. Daniel Garc?a gan? en el blog identificando las diferencias de las im?genes.
  4. Salvador Mu?oz gan? en el blog respondiendo una pregunta de historia.
  5. Norberto Briones gan? en Facebook encontrando en el c?digo fuente una frase escondida.
  6. Israel Hernandez gan? en Facebook adivinando el sonido del video.
  7. David S. Mercado gan? en Twitter respondiendo una pregunta acerca de Google.


Felicidades a los ganadores y mil gracias de verdad por la respuesta siempre tan positiva y participativa de todos ustedes. Ojal? que no tengamos que esperar hasta el pr?ximo a?o para crear otra Semana de los Dominios m?s, as? que en cuanto la econom?a lo permita estaremos regalando m?s dominios para todos ustedes con el ?nico objetivo de echarles una peque?a ayudadita con el proyecto de su blog.

?Hasta la pr?xima!

Saturday, January 28, 2012

Mostrar las publicaciones de Google+ en el blog


Google+ Widget es un gadget que te permite mostrar la actividad m?s reciente de tus publicaciones de Google Plus, en el blog.
El gadget se obtiene y configura desde la p?gina de los desarrolladores, y aunque la p?gina est? en ingl�s es muy intuitiva.

Para conseguir este gadget primero vamos a conseguir nuestro ID de Google+, para ello, entra a Google+ y haz click en el ?cono de tu Perfil.


En la barra de direcciones ver?s la URL de tu perfil, ah? encontrar?s una serie de n?meros, esa es tu ID. Si lo quieres para una p?gina de Google+ s?lo entra a tu p?gina y tambi�n ver?s en la URL el ID de tu p?gina.


Ahora necesitar?s conseguir una API de Google+, esto es porque la API de los desarrolladores est? saturada, as? que teniendo la tuya asegurar?s que el gadget no tenga problemas de tr?fico. Para conseguir tu API ingresa a Google Apis, da click en Create Project y luego en el men? izquierdo haz click en Services.
Busca donde diga Google+ API, cambia el bot?n off por on, y acepta los t�rminos y condiciones.
De nuevo en el men? izquierdo da click en Api Access, ah? obtendr?s una serie de caracteres como esta, esa es tu API key.


Teniendo ya tu ID de Google+ y tu API, entra a la p?gina de Google+ Widget, ah? te encontrar?s con estas dos primeras opciones:


En el primer recuadro verde debes poner tu ID de Google, y en el segundo tu API que acabas de conseguir.
Abajo ver?s las opciones para personalizarlo.


El primero es el n?mero de publicaciones que se mostrar?n; en la primera columna encontrar?s los colores para el fondo, el borde, enlaces, el texto, as? como si se mostrar? la cabecera o no.
En la segunda columna est? la distancia entre el contenido y el borde, si se usar? borde redondeado (border radius), el ancho, si mostrar? favicones, footer, y si se trata de una p?gina de Google+.

Una vez que lo has personalizado, da click en Show you widget, y podr?s ver c?mo ha quedado tu gadget, y debajo el c?digo para ponerlo en tu blog. S?lo pega ese c?digo en un elemento HTML/Javascript y listo.





En el caso de que lo hayas configurado para mostrar las publicaciones de tu p?gina de Google+ entonces el c?digo estar? en dos partes, la primera es algo como esto:
<link href="https://plus.google.com/XXXXXXXXXXXXXXXXXX" rel="publisher"/>
Ese va despu�s de <head>, y el resto del c?digo va dentro del gadget HTML/Javascript.

As? de f?cil y r?pido puedes tener tu gadget de ?ltimas publicaciones de Google Plus personalizado y bastante pr?ctico, para que tus lectores sepan qu� publicas en la red social de Google, y tambi�n puedan a?adirte a sus c?rculos.

Thursday, January 26, 2012

Pregunta Ganadora: La Semana de los Dominios

Es el cuarto d?a de La Semana de los Dominios y aqu? encontrar?s la pregunta que te har? ganar el dominio de hoy. S?, ?hoy t? puedes ser el cuarto ganador!

Dicen que una cosa lleva a la otra, y si esto es cierto, sabr?s dar con la respuesta a la pregunta de hoy.

A los 49 a?os, el creador del HTML fue investido con una orden de caballer?a. El fundador de esa orden ten?a un gran parecido a un primo suyo. ?Cu?l es el nombre de su primo y a qu� dinast?a pertenec?a?

?Esta pregunta ya tiene ganador!

A los 49 a?os, Tim Berners-Lee fue investido como Caballero Comendador de la Excelent?sima Orden del Imperio Brit?nico. Esta orden fue fundada por el rey Jorge V de Windsor, quien ten?a un primo con el que ten?a gran parecido f?sico, Nicolas II, el ?ltimo de la dinast?a Romanov.

RECUERDA:
  • S?lo pueden participar los que tengan habilitado su perfil de Blogger y que en �l muestren al menos un blog. No importa que el perfil est� enlazado al de Google+ siempre y cuando muestren al menos un blog en ese perfil.
  • Para responder debes hacer un nuevo comentario. NO uses el enlace de Responder, pues s?lo ser?n v?lidos los comentarios cuyo n?mero sea de color naranja.
  • S?lo ser? tomada en cuenta la primera respuesta de cada participante, aun cuando el comentario haya sido eliminado.

Wednesday, January 25, 2012

Pregunta Ganadora: La Semana de los Dominios

S?, seguimos en La Semana de los Dominios, y esta es la pregunta de hoy que te puede hacer ganar un dominio por un a?o.

Dicen que recordar es vivir, y tambi�n dicen que el 7 es el n?mero de la suerte, veamos si es cierto.
En la siguiente imagen ver?s c?mo se ve?a Ciudad Blogger en marzo de 2009 (no se burlen del logotipo por favor).
?Cu?les son las 7 diferencias que hay entre ambas im?genes?
El primero en responder correctamente ser? el ganador del d?a de hoy.

Click en la imagen para agrandar

Esta pregunta ya tiene ganador, esta es la imagen con las repuestas acertadas.




RECUERDA:
  • S?lo pueden participar los que tengan habilitado su perfil de Blogger y que en �l muestren al menos un blog.
  • Para responder debes hacer un nuevo comentario. NO uses el enlace de Responder, pues s?lo ser?n v?lidos los comentarios cuyo n?mero sea de color naranja.
  • Las respuestas deben ser por escrito, no se admiten respuestas con enlaces a im?genes.

Saturday, January 21, 2012

Botones para compartir estilo Taringa

Hace ya algo de tiempo que Taringa sac? esta forma de mostrar los botones para compartir el post, y desde que salieron muchos preguntaron c?mo poner de esta misma manera, los botones de compartir en el blog.

En esta entrada vamos a ver c?mo poner los botones para compartir estilo Taringa, que incluye los botones de Facebook, Taringa, +1, y Twitter.


Para colocar estos botones entra en la Edici?n HTML de la plantilla, marca la casilla Expandir plantillas de artilugios y agrega antes de ]]></b:skin> los estilos:
.taringa-post-share li {
float: right;
margin-left: 5px;
list-style:none;
}
.taringa-post-share {
padding: 5px 35px 10px 1px;
margin-bottom: 10px;
margin-right: 0px;
background: url(URL de la imagen) no-repeat bottom right;
}
.clearfix:after {content:"0020";display:block;height:0;clear:both;visibility:hidden;overflow:hidden;}
Luego busca esta l?nea:
<div class='post-footer'>
Arriba de ella pega este c?digo:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<ul class='taringa-post-share clearfix'>
<li><a class='twitter-share-button' data-count='vertical' data-lang='es' href='https://twitter.com/share'>Tweet</a><script src='//platform.twitter.com/widgets.js' type='text/javascript'/></li>

<li><script src='http://apis.google.com/js/plusone.js' type='text/javascript'/><g:plusone expr:href='data:post.url' size='tall'/></li>

<li class='t-big'><script type='text/javascript'>(function(){var x=document.createElement(&#39;script&#39;), s=document.getElementsByTagName(&#39;script&#39;)[0];x.async=true;x.src=&#39;http://widgets.itaringa.net/share.js&#39;;s.parentNode.insertBefore(x,s)})()</script>
<t:sharer data-layout='big'/></li>

<li><iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url+ &quot;&amp;layout=box_count&amp;show_faces=false&amp;width=73&amp;height=63&amp;action=like&amp;font=tahoma&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:73px; height:63px;'/></li>

</ul>
</b:if>
Ahora, como la imagen del list?n no se ajusta al ancho de las entradas, y como todos tienen un ancho distinto, he hecho tres im?genes, una de 500px de ancho, otra de 600px y otra m?s de 700px, as? que donde se indica en el primer c?digo pon la URL de la imagen que se ajuste m?s a tu blog.
Aqu? abajo est?n las URLs de las im?genes en sus tres medidas.


IMAGEN DE 500px

IMAGEN DE 600px

IMAGEN DE 700px


Habiendo puesto la imagen ya estar? todo listo. Los botones no se ver?n en la portada, as? que debes ingresar a una entrada individual para poder verlos.

En caso de que no se vieran, busca la l?nea del segundo paso, y revisa si la tienes dos veces, si as? fuera pega el c?digo en la otra repetida.

El list?n se ver? inclinado hacia la derecha, si quisieras centrarlo habr? que aplicar un margen derecho, as? que cambia donde dice margin-right: 0px; por un valor m?s alto, por ejemplo:
margin-right: 30px;
Eso har? que se desplacen a la izquierda.

Como puedes ver los botones lucir?n muy bien, y seguro sera una forma muy llamativa de invitar a tus lectores a compartir las entradas de tu blog.

Thursday, January 19, 2012

Mostrar mayor n?mero de comentarios al "Cargar m?s..."


En el anterior sistema de comentarios Blogger paginaba los comentarios, agrup?ndolos de 200 en 200. Este valor no se pod?a ni se puede cambiar, y para acceder a ellos hab?a que hacer click en los enlaces de paginaci?n para que cargara de nuevo la entrada con otros 200 comentarios.

En el nuevo sistema de comentarios anidados los comentarios cargan en la misma p?gina, y cuando tenemos m?s de 200 comentarios en una entrada entonces debemos hacer click en "Cargar m?s..." para que se muestren m?s comentarios.

El inconveniente es que carga los comentarios de 50 en 50, as? que quienes tienen entradas con much?simos comentarios pierden algo m?s de tiempo en poder ver el ?ltimo comentario publicado.

Por suerte, como este nuevo sistema de comentarios usa Javascript, y est? insertado en nuestra plantilla, podemos modificar ese valor, de modo que podamos elegir cu?ntos comentarios mostrar? en cada carga.

S?lo tenemos que entrar en la Edici?n HTML de la plantilla, marcar la casilla Expandir plantillas de artilugios y buscar esta l?nea:
var url = config.feed + '?alt=json&v=2&orderby=published&reverse=false&max-results=50';
Ese 50 en color rojo es el n?mero de entradas que se mostrar?n en cada carga, as? que puedes cambiarlo por otro valor, por ejemplo 200
De esa forma, cuando quieras ver el resto de los comentarios, te aparecer?n de 200 en 200 (suponiendo que lo hayas puesto en 200) en lugar de 50 en 50, con lo que ahorrar?s algunos clicks y algo de tiempo.

Tuesday, January 17, 2012

La Semana de los Dominios



Ya se viene el 3er. Aniversario de Ciudad Blogger, y hab?a que celebrarlo de alguna forma, y qu� mejor manera de hacerlo que empezar el a?o estrenando dominio nuevo. S?, ya sabes que nos gusta apapachar a nuestros lectores, as? que habr? dominios gratis :)

Esta vez ser? 1 dominio pero... diario. S?, regalaremos 1 dominio todos los d?as durante La Semana de los Dominios. As? que est?te pendiente, porque en la semana del 23 al 29 de enero estaremos regalando 1 dominio todos los d?as!!!

?Qu� tienes que hacer?
S?lo debes estar atento(a) a la p?gina de Ciudad Blogger, como en la de Facebook y Twitter, porque en cualquiera de estos tres sitios estaremos regalando 1 dominio todos los d?as.
Se har? una pregunta por cualquiera de estos lugares, y la primera persona en responder correctamente ser? la persona ganadora del dominio. ?As? de f?cil!

Cada premio que se entregue ser? 1 dominio por 1 a?o, con manejo absoluto de DNS, y con cualquiera de estas extensiones a escoger:
.com, .net, .org, .info, .me, .us, .im, .ws

Las reglas son las de siempre:
  • En cada pregunta s?lo se permite una respuesta por participante.
  • Quien resulte ganador de uno de los dominios ya no puede participar en otro.
  • S?lo se permite una cuenta por participante, as? que si tienes varias cuentas de Facebook s?lo puedes participar con una, lo mismo si tienes varias cuentas de Twitter o Blogger.
  • Para conocer las bases completas del concurso lee los T�rminos y Condiciones.

Recuerda, durante La Semana de los Dominios debes estar al pendiente, porque no avisaremos qu� d?a se regalar? en determinado sitio ni en qu� horario. Las preguntas ser?n variadas, y la mec?nica de cada una tambi�n podr? ser distinta.

As? que, no pierdas de vista ninguno de los sitios oficiales de Ciudad Blogger porque uno de los dominios puede ser tuyo. ?Mucha suerte!

Monday, January 16, 2012

Men? vertical desplegable de pesta?as con jQuery

Este es un men? vertical desplegable que aparece en la parte izquierda del blog, de forma flotante, y que tiene un efecto deslizante al pasar el cursor por cada una se sus pesta?as.
Es id?neo para agregar enlaces a las redes sociales o para las p?ginas del blog, aunque en realidad puede usarse para enlazar a cualquier sitio que queramos.
El ejemplo puede verse en esta misma entrada, en la parte izquierda del navegador, si pasas el cursor sobre �l ver?s c?mo se asoma cada pesta?a.

Para colocar este men? vertical deslizante en el blog, vamos a usar jQuery, as? que recuerda eliminar las versiones repetidas y usar s?lo la ?ltima versi?n de jQuery (salvo algunos casos), esto es para evitar que quienes ya usen jQuery no les funcione el men? o cualquier otro gadget que ya use esta librer?a.

Bien, para empezar entra en la Edici?n HTML de la plantilla y antes de </head> pega el script:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
<script>
//<![CDATA[
// Men? vertical desplegable de pesta?as
jQuery.noConflict();
jQuery(function() {
jQuery('#navigatione a').stop().animate({'marginLeft':'-85px'},1000);
jQuery('#navigatione > li').hover(
function () {
jQuery('a',jQuery(this)).stop().animate({'marginLeft':'-2px'},200);
},
function () {
jQuery('a',jQuery(this)).stop().animate({'marginLeft':'-85px'},200);
}
);
});
//]]>
</script>
Ahora antes de ]]></b:skin> pega los estilos del men?:
/* Men? vertical desplegable de pesta?as
----------------------------------------------- */
ul#navigatione {
position: fixed;
margin: 0px;
padding: 0px;
top: 150px; /* Distancia de las pesta?as desde arriba */
left: 0px;
list-style: none;
z-index:9;
}
ul#navigatione li {
width: 100px; /* Ancho de las pesta?as */
}
ul#navigatione li a {
display: block;
margin-left: 0px;
width: 100px; /* Ancho de las pesta?as */
height: 70px; /* Alto de las pesta?as */
background-color:#d8d8d8; /* Color de fondo de las pesta?as*/
background-repeat:no-repeat;
background-position:center center;
border:1px solid #afafaf; /* Color del borde */
-moz-border-radius:0px 10px 10px 0px;
-webkit-border-bottom-right-radius: 12px;
-webkit-border-top-right-radius: 12px;
-khtml-border-bottom-right-radius: 10px;
-khtml-border-top-right-radius: 10px;
opacity: 0.9;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60);
}

/* Aqu? van las URLs de las im?genes de cada pesta?a */
ul#navigatione .imagen1 a{
background-image: url(URL de la imagen UNO);
}
ul#navigatione .imagen2 a {
background-image: url(URL de la imagen DOS);
}
ul#navigatione .imagen3 a {
background-image: url(URL de la imagen TRES);
}
ul#navigatione .imagen4 a {
background-image: url(URL de la imagen CUATRO);
}
ul#navigatione .imagen5 a {
background-image: url(URL de la imagen CINCO);
}
Por ?ltimo entra en Dise?o | Elementos de la p?gina | A?adir un gadget | HTML/Javascript, o si usas la nueva interfaz entra en Dise?o | A?adir un gadget | HTML/Javascript. Ah? pega este c?digo:
<ul id='navigatione'>
<li class='imagen1'><a href='URL del enlace'/></li>
<li class='imagen2'><a href='URL del enlace'/></li>
<li class='imagen3'><a href='URL del enlace'/></li>
<li class='imagen4'><a href='URL del enlace'/></li>
<li class='imagen5'><a href='URL del enlace'/></li>
</ul>
Este ?ltimo es la estructura del men?, as? que ah? debes colocar las URLs de los enlaces de cada pesta?a donde se indica.
En el segundo c?digo ver?s en color verde algunas ?reas que se pueden personalizar como el color de las pesta?as y tama?o. En esa misma ?rea ver?s que se debe colocar las URLs de las im?genes, esos son los ?conos que lleva cada pesta?a dentro.
Ah? no he puesto una imagen predeterminada para todos pues cada uno deber? elegir el tipo de ?cono que quiera usar. Los del ejemplo los he tomado de Iconfinder, pero eso ya es a elecci?n.

Por defecto ser?n cinco pesta?as, pues no es recomendable usar tantas, ya que los usuarios que ingresen al blog con un monitor de peque?a resoluci?n no alcanzar?n a ver el resto de las pesta?as.
Pero si aun as? quisieras agregar m?s, entonces en el segundo c?digo agrega este fragmento por cada pesta?a extra:
ul#navigatione .imagen6 a {
background-image: url(URL de la imagen SEIS);
}
Y en el tercer c?digo esta l?nea antes de </ul>, tambi�n por cada pesta?a extra:
<li class='imagen6'><a href='URL del enlace'/></li>
Si te fijas, ver?s que en ambos c?digos extras dice imagen6
Si a?ades otra m?s deber?s cambiarlo por imagen7 y as? sucesivamente.

El script ya est? modificado para que sea compatible con Scriptaculous, as? que al menos con esa librer?a no deber? haber problemas. Que lo disfruten :)

Thursday, January 12, 2012

Los comentarios anidados en Blogger (Responder comentarios)



Ayer les mencionaba por Facebook y Twitter sobre la nueva funci?n que Blogger ha presentado en los comentarios. Se trata de los comentarios anidados, es decir, la opci?n de responder directamente a un comentario.

Esta opci?n est? disponible de forma nativa para las plantillas de Vistas Din?micas y plantillas del Dise?ador de Plantillas de Blogger, y no hay que hacer nada para activarlos, pero s? es necesario que tengas los comentarios debajo de las entradas, y que el feed de los comentarios est� en Completo (M?s informaci?n)

Los que usamos plantillas personalizadas debemos hacer algunos cambios, en Oloblogger explican qu� hay que cambiar para que esta nueva opci?n aparezca, y si usas Scriptaculous te dar?s cuenta que �ste sistema no funciona, pero en Vagabundia dicen c?mo modificar el script de Scriptaculous para solventar esto.

Como los comentarios ahora aparecen en bloques entrecomillados es posible que se vean bastante distintos a como los ten?as, ah? mismo en Oloblogger resuelven esta situaci?n si aplicamos los estilos de los bloques entrecomillados s?lo para las entradas.

Pero adem?s de esto, hay otras situaciones que se han venido con esta modalidad en los comentarios, por ejemplo, los emoticones en los comentarios no funcionar?n*, la caja de comentarios de Facebook no se ver?*, la numeraci?n en los comentarios con script tampoco funcionar?*, los bordes en los comentarios no se ver?n*, y al menos en mi caso, la paginaci?n en los comentarios tampoco funciona*, aun cuando no he habilitado esta funci?n (ni lo har�).

As? que supongo que en los pr?ximos d?as tendremos que ir resolviendo uno a uno todas estas situaciones. Claro, para los que usen esta opci?n de responder, para los que nos quedemos con el formato de siempre no tendremos esos problemas, excepto el de la paginaci?n de los comentarios, que parece que por ahora, tengamos esta opci?n o no, esos enlaces no funcionan.


*ACTUALIZACI?N:
La entrada de la caja de comentarios de Facebook se ha actualizado para que �sta aparezca.
La entrada de los comentarios enmarcados ha sido actualizada para que funcione en este tipo de comentarios (s?lo las dos primeras modalidades).

Tuesday, January 10, 2012

A?adir dos columnas de gadgets arriba y/o debajo de las entradas

Para agregar un gadget arriba o debajo de las entradas basta con arrastrar el gadget hasta esa posici?n y tendremos colocado el gadget en ese lugar. Pero qu� tal si quieres agregar dos gadgets y que ambos est�n en columnas, pues en ese caso habremos de a?adir una secci?n de gadgets en esa ?rea de modo que se creen dos columnas de gadgets arriba o debajo de las entradas.


Puedes tener s?lo las columnas de arriba, o s?lo las de abajo, o ambas, eso depender? del gusto y necesidades de cada uno.

Para agregar estas columnas de gadgets entra en la Edici?n HTML de la plantilla, y SIN los artilugios expandidos busca esta parte:
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='false' title='Entradas del blog' type='Blog'/>
</b:section>

Si quieres las columnas de gadgets arriba de las entradas, entonces agrega arriba de lo anterior esto:
<div id='BlogGadget1' style='width: 48%; float: left; margin:0; padding: 5px;'>
<b:section class='sidebar' id='gadget-1' preferred='yes' style='float:left;'/>
</div>
<div id='BlogGadget2' style='width: 48%; float: right; margin:0; padding: 5px;'>
<b:section class='sidebar' id='gadget-2' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>

Si tambi�n quieres dos columnas de gadgets debajo de las entradas, entonces agrega debajo del primer c?digo esto:
<div id='BlogGadget3' style='width: 48%; float: left; margin:0; padding: 5px;'>
<b:section class='sidebar' id='gadget-3' preferred='yes' style='float:left;'/>
</div>
<div id='BlogGadget4' style='width: 48%; float: right; margin:0; padding: 5px;'>
<b:section class='sidebar' id='gadget-4' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>
Los valores en color azul es el ancho de cada uno de los contenedores, si por alguna raz?n los gadgets de la segunda columna se bajaran entonces reduce esos valores hasta que los gadgets se acomoden en su lugar.

As? se sencillo tendr?s dos columnas de gadgets en esa ?rea del blog.
Vaya, qu� r?pida se me ha hecho esta entrada

Monday, January 9, 2012

?Problemas con el feed de tu blog?

Algunos de los gadgets que usamos necesitan del feed para poder encontrar datos y mostrarlos, y muchas veces no nos damos cuenta que el feed del blog no funciona hasta que tratamos de probar uno de estos gadgets y es cuando nos damos cuenta que algo anda mal.

As? que vamos a ver en esta entrada los problemas m?s comunes que se dan con el feed del blog y c?mo solucionarlos.

Al tratar de ver el feed dice que la p?gina no existe o URL del feed no v?lida

Antes de pensar en las posibles causas del porqu� no funcione el feed hay que asegurarnos que �ste est� habilitado, pues quiz? ni siquiera est? habilitado y esa puede ser la causa de todos los males.
Para ello ingresa en Configuraci?n | Feed del sitio | Permitir feeds del blog y ponlo en Completo.
Si usas la nueva interfaz entra en Configuraci?n | Otros | Permitir feed de blog, y ponlo en Completo.

El feed redirecciona al blog o a otra p?gina

Esto es bastante pero bastante com?n. Muchos me dicen que el feed no muestra las entradas del blog sino que abre una p?gina distinta a la del feed.
En la configuraci?n del blog hay una opci?n que se llama "Publicar URL redireccionada del feed", �sta se usa cuando usamos un gestor de feeds como Feedburner, es decir, que cuando creamos un feed en Feedburner debemos colocar ah? la URL del feed de Feedburner.


Interfaz antigua




Interfaz nueva


Pero si no usas Feedburner o alg?n otro gestor, no pongas nada ah?, nada, ni la URL de tu blog, ni la de tu perfil ni ninguna otra, nada. De lo contrario el feed abrir? otra p?gina que no es precisamente el feed del blog, y por consecuente ni el feed se mostrar? ni los gadgets que requieran uso del feed funcionar?n.


Tengo un blog privado y algunos gadgets no funcionan

Si el gadget es privado significa que s?lo quienes est�n autorizados pueden ver el contenido del blog, incluyendo el feed. As? que si tu blog s?lo admite lectores invitados o si s?lo t? puedes ver el blog, entonces los gadgets que usen el feed del blog no funcionar?n, porque los scripts no tienen acceso al blog y por lo tanto no pueden ingresar a recopilar la informaci?n que necesitan.
Por lo tanto, para que estos gadgets funcionen el blog deber? ser completamente p?blico.

El feed ya no muestra las ?ltimas entradas

Si el feed de tu blog parece que se ha detenido y ya no hace nada, cerci?rate que el tama?o del feed no se haya excedido. Si el feed es mayor a 512K entonces dejar? de mostrar las actualizaciones del blog, as? que en esos casos deber?s reducir el tama?o del feed. Ese mismo procedimiento aplica si por primera vez vas a crear un feed en Feedburner y te aparece el mensaje:
"Your feed filesize is larger than 512K. You need to reduce its size in order for FeedBurner to process it. Tips for controlling feed file size with Blogger can be found in Tech Tips on FeedBurner Forums, our support site."

El feed tarda mucho en enviar los correos con las actualizaciones

Si usas Feedburner y tienes habilitada la suscripci?n por correo seguro notar?s que no siempre llegan las actualizaciones inmediatamente que has publicado una nueva entrada. En esos casos hay que hacer ping y modificar una opci?n de Feedburner para acelerar el tiempo de actualizaci?n del feed.

Tomando en cuenta las anteriores situaciones y sus soluciones podr?s resolver la mayor?a de los problemas frecuentes que se dan con el feed del blog, que por suerte la mayor?a, se solucionan en un 2 x 3.

Wednesday, January 4, 2012

Crear un intro para el blog con jQuery y cookies


Cuando publiqu� la entrada sobre crear un intro para el blog, una de las primeras inquietudes que se ten?an era c?mo hacer para que el Intro s?lo se mostrara una vez pues podr?a resultar molesto regresar al inicio y ver siempre la pantalla de bienvenida.

En esta entrada vamos a ver c?mo crear un intro para el blog con jQuery, el cual har? que cuando �ste desaparezca tenga un efecto de desvanecimiento.
Podr? elegirse si se muestra siempre o cada ciertos d?as, ya que usa cookies, y tiene un temporizador, el cual permite que si en determinado tiempo el lector no hizo click en el bot?n de Entrar entonces el Intro podr? quitarse autom?ticamente.

El script es una creaci?n de Meerkat y la instalaci?n no es nada complicada.
Puedes ver un demo en este blog de pruebas, si no haces click en el bot?n entonces el Intro se quitar? por s? solo en 15 segundos.

Para poner este Intro en tu blog, entra en la Edici?n HTML de la plantilla, y pega despu�s de <head> el siguiente script:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
// Intro para el blog
eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('4.1Y.1k({8:5(1E){9 1r={v:\'g\',E:m,k:\'1n\',y:\'w%\',h:\'1u\',U:\'.U\',13:\'#1P-u\',1s:T,18:\'g\',R:m,P:\'Z\',x:\'Z\',K:\'1J\',Q:0,1a:\'.1a\',f:0,1I:5(){},l:m};9 3=4.1k(1r,1E);7(4.1U.1S){3.P=3.P;3.x=3.x}p{3.P=\'Z\';3.x=\'Z\'}7(3.R===m){3.R=3.18}3.f=3.f*1c;7(3.l!=m){3.l=3.l*1c}5 I(F,1D,1d){7(1d){9 12=1M 1N();12.1O(12.1Q()+(1d*24*1w*1w*1c));9 10="; 10="+12.1L()}p{9 10=""}q.1m=F+"="+1D+10+"; 1R=/"}5 1v(F){9 19=F+"=";9 1b=q.1m.1K(\';\');1X(9 i=0;i<1b.S;i++){9 c=1b[i];1W(c.1V(0)===\' \')c=c.1q(1,c.S);7(c.1T(19)===0)t c.1q(19.S,c.S)}t m}5 1o(F){I(F,"",-1)}4(3.1a).D(5(){1o(\'8\')});t e.23(5(){9 16=4(e);7(1v(\'8\')!="X"){3.1I.2l(e);5 O(11,H){9 j=4(\'#8-d\');7(H==="B"){7(3.h==="1e"||3.h==="1f"){9 14=\'y\'}p{9 14=\'k\'}}p{9 14="E"}9 A={};A[14]=11;7(11==="u"){7(H!=="g"){7(3.f>0){4(j).a().f(3.f).W(A,3.K,3.P)}p{4(j).a().W(A,3.K,3.P)}}p 7((H==="g")&&(3.f>0)){4(j).a().f(3.f).u(0)}p{4(j).u()}4(16).u(0)}7(11==="a"){7(H!=="g"){7(3.l!==m){4(j).f(3.l).W(A,3.K,3.x,5(){4(e).o();7(3.1s===2k){I(\'8\',\'X\',3.Q)}})}4(3.U).D(5(){4(j).1t().W(A,3.K,3.x,5(){4(e).o()});t T});4(3.13).D(5(){4(j).1t().W(A,3.K,3.x,5(){4(e).o()});I(\'8\',\'X\',3.Q);t T})}p 7((H==="g")&&(3.l!==m)){4(j).f(3.l).a(0).N(5(){4(e).o()})}p{4(3.U).D(5(){4(j).a().N(5(){4(e).o()});t T});4(3.13).D(5(){4(j).a().N(5(){4(e).o()});I(\'8\',\'X\',3.Q);t T})}}}4(\'1y, n\').b({\'2h\':\'0\',\'k\':\'w%\'});4(16).d(\'<s 15="8-d"><s 15="8-r"></s></s>\');4(\'#8-d\').b({\'h\':\'2i\',\'z-17\':\'2n\',\'y\':3.y,\'k\':3.k}).b(3.h,"0");4(\'#8-r\').b({\'v\':3.v,\'k\':3.k});7(3.h==="1e"||3.h==="1f"){4(\'#8-d\').b("1i",0)}7(3.E!=m){4("#8-d").2o(\'<s 2s="E-1j"></s>\');4(\'#8-r\').b({\'v\':\'2q\',\'z-17\':\'2\',\'h\':\'2t\'});4(".E-1j").b({\'h\':\'1g\',\'1i\':\'0\',\'k\':\'w%\',\'y\':\'w%\',\'v\':3.v,"E":3.E})}7(4.1l.2g&&4.1l.2f<=6){4(\'#8-d\').b({\'h\':\'1g\',\'1u\':\'-26\',\'z-17\':\'0\'});7(4(\'#V-Y-r\').S==0){4(\'n\').22().20(5(17){t 4(e).1Z(\'15\')!=\'8-d\'}).21(\'<s 15="V-Y-r"></s>\');4(\'1y, n\').b({\'k\':\'w%\',\'y\':\'w%\',\'1z\':\'28\'});4(\'#V-Y-r\').b({\'1z\':\'1n\',\'y\':\'w%\',\'k\':\'w%\',\'h\':\'1g\'});9 C=q.n.G.2d+" ";C+=q.n.G.2e+" ";C+=q.n.G.2c+" ";C+=q.n.G.2b+" ";C+=q.n.G.29+" ";C+=q.n.G.2a;4("n").b({\'v\':\'g\'});4("#V-Y-r").b({\'v\':C})}9 1h=q.2r(\'V-Y-r\');7((1h.27<1h.25)&&(3.h!=\'1e\')){4(\'#8-d\').b({\'1f\':\'2p\'})}}1H(3.18){M"B":O("u","B");J;M"L":O("u","L");J;M"g":O("u","g");J;1x:1B(\'1C 18 1p 1A 1G "B", "L", 1F "g"\')}1H(3.R){M"B":O("a","B");J;M"L":O("a","L");J;M"g":7(3.l!=m){4(\'#8-d\').f(3.l).a(0).N(5(){4(e).o()})}4(3.U).D(5(){4(\'#8-d\').a().N(5(){4(e).o()})});4(3.13).D(5(){4(\'#8-d\').a().N(5(){4(e).o()});I(\'8\',\'X\',3.Q)});J;1x:1B(\'1C R 1p 1A 1G "B", "L", 1F "g"\')}}p{4(16).a()}})},o:5(){4(\'#8-d\').2j(4(\'#8-r\').2m().a())}});',62,154,'|||settings|jQuery|function||if|meerkat|var|hide|css||wrap|this|delay|none|position||meerkatWrap|height|timer|null|body|destroyMeerkat|else|document|container|div|return|show|background|100|easingOut|width||animationProperty|slide|bgProperties|click|opacity|name|currentStyle|fadeOrSlide|createCookie|break|animationSpeed|fade|case|queue|animateMeerkat|easingIn|cookieExpires|animationOut|length|false|close|ie6|animate|dontshow|content|swing|expires|showOrHide|date|dontShowAgain|animationType|id|element|index|animationIn|nameEQ|removeCookie|ca|1000|days|left|right|absolute|ie6ContentContainer|top|layer|extend|browser|cookie|auto|eraseCookie|option|substring|defaults|dontShowAgainAuto|stop|bottom|readCookie|60|default|html|overflow|only|alert|The|value|options|or|accepts|switch|onMeerkatShow|normal|split|toGMTString|new|Date|setTime|dont|getTime|path|def|indexOf|easing|charAt|while|for|fn|attr|filter|wrapAll|children|each||scrollHeight|1px|clientHeight|hidden|backgroundPositionX|backgroundPositionY|backgroundAttachment|backgroundRepeat|backgroundColor|backgroundImage|version|msie|margin|fixed|replaceWith|true|call|contents|10000|prepend|17px|transparent|getElementById|class|relative'.split('|'),0,{})) //]]>
</script>

<script type='text/javascript'>
//<![CDATA[
jQuery.noConflict();
jQuery(function(){
jQuery('.meerkat').meerkat({
height: '100%',
width: '100%',
position: 'left',
dontShowAgain: '#enter',
close: '#close',
animationIn: 'none',
animationOut: 'fade',
animationSpeed: 500,
background: '#000 ',
timer: 15,
dontShowAgainAuto: false,
cookieExpires: 2,
removeCookie: '.reset'
});
});
//]]>
</script>

Luego antes de </body> pega este c?digo:
<center>
<div class='meerkat'>
<div id='splash-content'>
<!-- Inicio del contenido que se mostrar? en el intro -->
<img id='enter' src='URL de la imagen de bienvenida'/>

<!-- Fin del contenido que se mostrar? en el intro -->
</div>
<div id='close'> Entrar </div>
</div>
</center>
Este ?ltimo c?digo es el Intro en s?, ah? es donde podremos agregar una imagen de bienvenida, alg?n texto, etc. Todo lo que quieras que se vea en el intro deber? ir en el ?rea marcada en color rojo.
Si quieres que en lugar de un texto el bot?n de entrar sea una imagen s?lo cambia ese texto (el de Entrar) por el c?digo de una imagen:
<img src="URL de la imagen" />

Por ?ltimo agrega antes de ]]></b:skin> estos estilos:
#enter{margin-top:150px;} /* Distancia de los elementos del Intro desde arriba */
#close{
cursor:pointer;
font-size:17px; /* Tama?o del texto ENTRAR */
color:#FFF; /* Color del texto ENTRAR */
}
Esos son estilos muy b?sicos, pero pueden agregarse muchos m?s, ya depender? de qu� tipo de dise?o quieras para tu pantalla de presentaci?n.

En el primer c?digo que hemos a?adido veremos estos comandos:
background: '#000 ',
timer: 15,
dontShowAgainAuto: false,
cookieExpires: 2,
background es el color de fondo del Intro, es decir, de toda la pantalla, y tambi�n puedes a?adir una imagen de fondo, si as? fuera quedar?a as?:
background: '#000 url(URL de la imagen)',

timer es el tiempo en segundos que durar? el intro en caso de que el usuario no d� click para entrar.
dontShowAgainAuto indica si el intro se mostrar? siempre o no, false indica que siempre se mostrar?, c?mbialo a true si quieres s?lo se muestre una vez cada cierto tiempo.
cookieExpires indican los d?as que tardar? el intro en volver a mostrarse en caso de que lo hayas cambiado por true.

Como puedes ver el script tiene muchas opciones y me parece que es mucho m?s completo y atractivo que el que hab?amos visto primeramente.
El intro se mostrar? en cualquier p?gina del blog, pero si quisieras que s?lo se muestre en la portada entonces deber?s encerrar el c?digo que va antes de </body> en una condicional para que s?lo se muestre en la portada del blog.

Consideraciones finales:
  • El script ya est? modificado para que sea compatible con Scriptaculous.
  • Si activas la opci?n de que no se vea en cierto tiempo entonces tampoco t? lo ver?s hasta que haya transcurrido el tiempo que configuraste. Para verlo antes de ese tiempo deber?s borrar las cookies de tu navegador.
  • No se recomienda poner videos o m?sica en el Intro, pues �stos se ejecutar?an aun despu�s de quitarse el Intro.
  • Si tuvieras en el blog un video o un archivo en flash deber?s aplicarle una transparencia para que no se sobreponga en el Intro.
  • Si ya usas jQuery aseg?rate de tener s?lo la ?ltima versi?n y eliminar las versiones repetidas o antiguas.
  • Recuerda que se ver? en todas las p?ginas del blog, as? que si quieres que sea visible s?lo en la portada deber?s encerrar el c?digo en una condicional como se ha se?alado.


Sunday, January 1, 2012

Botones flotantes para recomendar el blog (Facebook, Twitter, PlusOne)

Una de las primeras cosas que me preguntaron cuando cambi� de plantilla fue c?mo poner el bot?n que aparece al final y que al presionarlo aparecen los botones para compartir el blog.
Ya saben que no me guardo nada y todo se los comparto, as? que en esta entrada vamos a ver c?mo poner esos botones para promocionar el blog.

Se trata de un bot?n flotante que al presionarlo aparecer? un contenedor con un efecto de desvanecimiento y en �l, los botones de Facebook, Twitter y +1.
Con ellos podremos compartir la portada del blog, pues no s?lo hay que promocionar las entradas sino tambi�n el blog en general.


El efecto de desvanecimiento lo lograremos con Scriptaculous y Prototype, as? que quien use jQuery tendr? que hacer unos cambios para que ambas librer?as puedan funcionar al mismo tiempo.

La instalaci?n de estos botones es bastante sencilla, primero entra en la Edici?n HTML de la plantilla y antes de ]]></b:skin> agrega estos estilos:
#botones-like {
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0px 0px 4px #696969;
-moz-box-shadow: 0px 0px 4px #696969;
box-shadow: 0px 0px 4px #696969;
background-color: #eee; /* Color de fondo del bot?n */
padding: 5px;
font-family: "Gill Sans", "Gill Sans MT", Calibri, sans-serif;
font-size: 10pt; /* Tama?o del texto */
color: #999999; /* Color del texto */
text-align: center;
position:fixed;
bottom:5px;
right:30px;
}
#expandirBotones{
background:#eee; /* Color de fondo del contenedor */
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0px 0px 6px #696969;
-moz-box-shadow: 0px 0px 6px #696969;
box-shadow: 0px 0px 6px #696969;
position:fixed;
bottom:40px;
right:30px;
}
Ahora antes de </head> pega este c?digo; si ya lo tuvieras no hace falta ponerlo otra vez:
<script src='http://www.google.com/jsapi'></script>
<script>
google.load("prototype","1.7.0.0");
google.load("scriptaculous", "1.9.0");
</script>
Luego pega antes de </body> lo siguiente:
<a href='javascript:Void(0)' onclick='Effect.toggle(&apos;expandirBotones&apos;,&apos;appear&apos;); return false' style='text-decoration:none;'><div id='botones-like'>&#161;Recomienda este blog!</div></a>
<table border='0' id='expandirBotones' style='display:none'>
<tr>
<td>&lt;iframe allowTransparency=&#39;true&#39; frameborder=&#39;0&#39; scrolling=&#39;no&#39; src=&#39;http://www.facebook.com/plugins/like.php?href=http://nombre-de-mi-blog.blogspot.com&amp;layout=box_count&amp;show_faces=false&amp;width=72&amp;height=63&amp;action=like&amp;font=tahoma&amp;colorscheme=light&#39; style=&#39;border:none; overflow:hidden; width:72px; height:63px&#39;&gt;&lt;/iframe&gt;</td>
<td><g:plusone href='http://nombre-de-mi-blog.blogspot.com' size='tall'/><script type='text/javascript'>
window.___gcfg = {lang: &#39;es&#39;};
(function() {
var po = document.createElement(&#39;script&#39;); po.type = &#39;text/javascript&#39;; po.async = true;
po.src = &#39;https://apis.google.com/js/plusone.js&#39;;
var s = document.getElementsByTagName(&#39;script&#39;)[0]; s.parentNode.insertBefore(po, s);
})();
</script></td>
<td><a class='twitter-share-button' data-count='vertical' data-lang='es' data-text='Me ha gustado este blog, seguro a ti tambi�n te gustar?:' data-url='http://nombre-de-mi-blog.blogspot.com' href='http://twitter.com/share'>Tweet</a><script src='http://platform.twitter.com/widgets.js' type='text/javascript'/></td>
</tr>
</table>
Cambia la direcci?n de tu blog donde se indica, as? como el mensaje que aparecer? en Twitter y listo.
En color verde puedes cambiar algunos aspectos del dise?o, b?sicamente ser? el color de fondo y de texto.

El bot?n para compartir el blog aparecer? en todas las entradas, si deseas que aparezca s?lo en la portada tendr?s que encerrar el ?ltimo c?digo con la condicional que le corresponde.
Recuerda que no compartir? las entradas del blog, sino el blog en general. Si buscas botones para compartir las entradas puedes ver algunas opciones en la secci?n de Facebook.

Si ya estuvieras usando el bot?n +1 de Google entonces no har? falta repetir el c?digo del script, as? que busca esta l?nea todas las veces que la tengas y elim?nala:
<script src='http://apis.google.com/js/plusone.js' type='text/javascript'/>
S?lo dejaremos el script que hemos puesto en este c?digo, excepto si has decido poner los botones s?lo en la portada, si as? fuera entonces no har? falta quitar esa l?nea salvo algunas excepciones.

ACTUALIZACI?N: En Internet Explorer el bot?n de Facebook no se ve bien cuando se agrega de esta forma.