Cargando...
Menu Ver sumario
¿Te gustó lo que viste?
Recomiéndanos

Post aleatorio






Feliz 2011 ¡Oops! (transiciones)

31/12/2011
Actualización: Me hubiera gustado poner el código con el que hice esto, pero no sé por qué motivo, por más que lo he intentado, parte se interpreta y se va todo al carajo. Será otra vez... quizás el año que viene.
❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄

Pasa el puntero por encima para arreglar esto...



FELIZ




201
1
2



Solucionando los problemas con el botón +1

29/12/2011
Como es habitual, los misterios de Blogger (y por tanto Google) son a menudo insondables. En este caso estamos ante el gran misterio de los botones +1, esos que si uno quiere tener un buen posicionamiento en el gigante del buscador, parece que cada vez toman mayor importancia.

El botón no sale, sale pero no refleja los +1 que realmente lleva acumulados, cuando coinciden dos botones en la misma página lo mismo desaparece un botón que el otro sale a cero... En fin, diversos avatares que con lo sencilla que es la instalación del botón, parecen increíbles.

Servidor no había tenido nunca este problema hasta que hace unos días se puso a trastear la plantilla y tocó algo sin recordar qué. Eso provocó estos problemas que comento.

Pero afortunadamente, el Sr. Pizcos publicó ayer un artículo que me hizo recordar dónde estaba el quid de la cuestión. Y este no es otro que saber el lugar adecuado dónde colocar el código del script.


Hay que distinguir entre el propio código que captura y genera los datos del botón y el código que lo "pinta" en web.

El primero hay que situarlo antes de </body> ya que precisamente las pegas surgen cuando se coloca en el sitio que para nosotros debería ser el normal (<head>). Podéis usar el script normal o el asíncrono. Este último sirve para que la página cargue sin la interferencia del botón. Aquí están los dos y podéis usar el que prefiráis, siempre teniendo en cuenta situarlo antes de </body>:

Estándar
<!-- Boton +1 -->
<script type='text/javascript' src='https://apis.google.com/js/plusone.js'></script>

Asíncrono
<!-- Boton +1 -->
<script type='text/javascript'>
//<![CDATA[
window.___gcfg = {lang:"es"};

(function() {
var po = document.createElement("script"); po.type = "text/javascript"; po.async = true;
po.src = "https://apis.google.com/js/plusone.js";
var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(po, s);
})();
//]]>
</script>


Una vez metido esto en la plantilla, ahora sólo tenemos que poner el siguiente código dónde queramos que aparezca el botón (post-footer, post-header, etc.)

<g:plusone></g:plusone>


Pero si por cuestiones de diseño, el botón debe aparecer más de una vez por página, por ejemplo como ocurre en el Home cuando se ven varios posts de una tacada, a este código hay que añadirle la dirección de la entrada correspondiente para que no haya conflictos. En Blogger, esta dirección la conocemos por la variable data:post.url:

<g:plusone expr:href='data:post.url' ></g:plusone>


Y cómo ya comentamos en una entrada anterior, si además queremos poner un botón adicional para hacer +1 en nuestra dirección principal, directamente ponemos dicha dirección y listo:

<g:plusone href="http://www.oloblogger.com" ></g:plusone>



Como podéis comprobar, actualmente en esta misma entrada coexisten sin problemas ese botón de arriba que va sólo sobre la dirección principal, el de la barra lateral con el mismo destino, otro en la parte superior del post con referencia a la dirección de la entrada y otro en el pie del post con idéntico puntaje.

Y tampoco habrá ningún inconveniente si se utilizan simultáneamente los botones sociales que nos proporciona Blogger de serie.


Sólo necesitas 5 herramientas para escribir los mejores posts

28/12/2011
Crédito
Existen millares de artículos sobre los mejores trucos para crear un blog de éxito y seguro que alguna vez habéis leído artículos de esta guisa:

  • 12 consejos para tener éxito con un blog
  • Decálogo de errores de los malos blogueros
  • Crear un blog exitoso
  • Cómo tener un blog de éxito y tener un buen negocio en Internet
  • Las 3,1416 herramientas imprescindibles para los mejores sitios

Yo siempre me he preguntado cómo es posible que muchos de esos sitios que conocen tan bien los secretos del buen bloguero y que son capaces hasta de sintetizarlos en unos pocos puntos, tienen un lugar digamos discreto en el universo de La Red.

La respuesta es evidente y es que cualquiera sabe dar consejos. Otra cosa es que esas recomendaciones sean realmente útiles o que sean fáciles de aplicar y sobre todo, que sean acertadas. Tampoco olvidemos que no existen fórmulas universales y que lo que a unos les funciona, a otros no tiene por qué.

Así es como excuso que yo nunca haya realizado ninguna entrada de este estilo hasta ahora, pero como alguna vez hay que empezar, hoy voy a romper esa dinámica.

Me ha llevado mucho tiempo y trabajo llegar a esta conclusión, pero estas sí que son sin lugar a dudas, las 5 herramientas imprescindibles para escribir los mejores posts. Espero que os sean útiles.


Un teclado... que funcione

Conocimientos del lenguaje. Al menos los básicos, por favor.

Café, aunque según el tipo de artículo, puede ser sustituido por alcohol en cantidades industriales

Emoticonos para transmitir tus sentimientos cuando no tienes la habilidad de hacerlo con palabras

Y sobre todo... cerebro

Feliz 28 de Diciembre


Text-shadow y el brillo de la Navidad

24/12/2011
El protocolo navideño es una cosa que todavía no tengo muy bien desarrollada. Comidas, felicitaciones, espumosos, espirituosos, compras, regalos, árbol, adornos, pesebre... Mucho ajetreo para mí. Pero hoy toca lo que toca y aquí no podemos dejar que penséis que somos ajenos al buen rollo que circula entre todos por estas fechas. Todos tenemos nuestro corazoncito aunque no lo parezca.

Así que hoy vamos a hacer un dos en uno y vamos a cumplir con la tradición sin dejar de hacer lo que por aquí acostumbramos, aprender cosillas de código y en esta ocasión, a costa de la propiedad text-shadow. También usaremos un poquito de posicionamiento.

Las sombras con CSS3 se pueden acumular, esto es, situar distintas sombras a distintas distancias del objeto principal, cada una con un color distinto. Si a eso le añadimos un desenfoque (blur), podemos conseguir un efecto halo, neón, brillo o cómo prefiráis llamarlo.

Un ejemplo sería el siguiente:

text-shadow: -1px -1px 0px #ffffff, 1px 1px 0px #00000;

El primer dígito es el desplazamiento vertical, el segundo el horizontal, el tercero la imprecisión o amplitud del desenfoque y el último el color a utilizar (arriba-izquierda, preciso, color blanco). Con una coma es como se pueden ir añadiendo más sombras. En el ejemplo, la segunda sombra se ha proyectado abajo-derecha, sin blur y con color negro.

Ahora bien, si todas las sombras las fijamos en 0,0 -bajo el caracter- y lo que vamos cambiando es el color y la amplitud del desenfoque, podemos obtener cosas como las que hemos hecho con estas letras -que no dibujos- superpuestas sobre una imagen.



FELIZ

NAVIDAD

<style type="text/css">
.capa {position:relative;margin:0px auto;border:2px solid #000000;width:500px;height:440px;background:url(http://2.bp.blogspot.com/-Jtatmjd-hFA/TvYBCVAwrCI/AAAAAAAABY8/DYojnCQPusg/s500/arboldenavidad.jpg);}
.feliz {position:absolute;top:30px;left:30px;}
.navidad {position:absolute;bottom:30px;right:30px;}
.letra {
color:#ffffff;
font-family:arial;
font-size:60px;
letter-spacing: 5px;
text-shadow: 0 0 2px #fff, 0 0 4px #fff, 0 0 6px #fff, 0 0 8px #6898ED, 0 0 10px #6898ED, 0 0 15px #152C8A, 0 0 20px #eeeeee, 0 0 25px #ffffff;
}
</style>

<div class="capa">
<div class="feliz">
<span class="letra">FELIZ</span>
</div>
<div class="navidad">
<span class="letra">NAVIDAD</span>
</div>
</div>



Para vosotros,
con mis mejores deseos.


Botones CSS con rollover sencillo

23/12/2011
Este trata sobre cómo construir botones similares a los que antes hacíamos con imágenes, pero que desde que existe el CSS3, podemos hacer simplemente desde la hoja de estilo.

El que se puedan hacer así tiene varias ventajas. Por un lado serán visibles para las arañas de los navegadores (las imágenes no lo son tanto), pero quizás las más importantes son la facilidad para cambiar el diseño o la redimensión automática.

Como hablamos de CSS sólo tendremos que crear una clase, darle propiedades y por último añadírsela al enlace que queremos convertir en botón. Nuestra clase se llamará boton -somos así de originales- y para que se entienda le iremos añadiendo propiedades poco a poco.

Un enlace básico sería así:

<a class="boton" href="URL_DESTINO1">Destino 1</a>



Como la clase boton todavía no existe, el enlace se verá con las propiedades por defecto que tengamos en nuestra plantilla. Lo primero que le incorporamos es un borde, un margen interno (padding), colores para fondo, texto y tamaño de este último. Por si los enlaces aparecen con un subrayado, también forzamos la eliminación de este detalle para que el aspecto sea más limpio.

.boton {
border: 1px solid #cccccc;
padding: 10px;
color: #ffffff;
background: #999999;
font-size: 28px;
line-height: 30px;
text-decoration: none;
}




Ahora le añadimos un efecto redondeado en las esquinas. Si todos los navegadores trabajaran igual nos bastaría con la primera propiedad. Las otras dos son para aumentar la compatibilidad:

.boton {
border: 1px solid #cccccc;
padding: 10px;
color: #ffffff;
background: #999999;
font-size: 28px;
line-height: 30px;
text-decoration: none;

border-radius: 16px;
-webkit-border-radius: 16px;
-moz-border-radius: 16px;
}




Ya va tomando forma la cosa. Ahora es el momento de incorporar unas sombras que le den realismo y "altura". Al igual que con los bordes redondeados, las sombras hay que declararlas de tres maneras para que se puedan interpretar en más navegadores distintos. Y ya que estamos, también añadimos una sombra al texto con text-shadow.

.boton {
border: 1px solid #cccccc;
padding: 10px;
color: #ffffff;
background: #999999;
font-size: 28px;
line-height: 30px;
text-decoration: none;


border-radius: 16px;
-webkit-border-radius: 16px;
-moz-border-radius: 16px;

box-shadow: 1px 1px 2px rgba(0,0,0,.5);
-webkit-box-shadow: 1px 1px 2px rgba(0,0,0,.5);
-moz-box-shadow: 1px 1px 2px rgba(0,0,0,.5);

text-shadow: #000000 0px 1px 1px;
}




Nos falta un último toque que será el degradado del fondo.

.boton {
border: 1px solid #cccccc;
padding: 10px;
color: #ffffff;
background: #999999;
font-size: 28px;
line-height: 30px;
text-decoration: none;


border-radius: 16px;
-webkit-border-radius: 16px;
-moz-border-radius: 16px;


box-shadow: 1px 1px 2px rgba(0,0,0,.5);
-webkit-box-shadow: 1px 1px 2px rgba(0,0,0,.5);
-moz-box-shadow: 1px 1px 2px rgba(0,0,0,.5);

text-shadow: #000000 0px 1px 1px;

background: -webkit-gradient(linear, left top, left bottom, from(#eeeeee), to(#999999));
background: -moz-linear-gradient(top, #eeeeee, #999999);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#999999');
}




Mola ¿verdad? Pues ya el último detalle es que el botón sea "pulsable". Esto es, que cuando pinchemos haga algo. Para eso eliminaremos las sombras y desplazaremos 1 píxel abajo-derecha. La pseudoclase active es lo que nos permite hacer esto, ya que es la que detecta esa pulsación.


.boton {
border: 1px solid #cccccc;
padding: 10px;
color: #ffffff;
background: #999999;
font-size: 28px;
line-height: 30px;
text-decoration: none;

border-radius: 16px;
-webkit-border-radius: 16px;
-moz-border-radius: 16px;

box-shadow: 1px 1px 2px rgba(0,0,0,.5);
-webkit-box-shadow: 1px 1px 2px rgba(0,0,0,.5);
-moz-box-shadow: 1px 1px 2px rgba(0,0,0,.5);

text-shadow: #000000 0px 1px 1px;

background: -webkit-gradient(linear, left top, left bottom, from(#eeeeee), to(#999999));
background: -moz-linear-gradient(top, #eeeeee, #999999);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#999999');
}

.boton:active {
box-shadow: 0px 0px 0px rgba(0,0,0,.5);
-webkit-box-shadow: 0px 0px 0px rgba(0,0,0,.5);
-moz-box-shadow: 0px 0px 0px rgba(0,0,0,.5);
position: relative;
top: 1px;
left: 1px;
}





En este último podéis pinchar y ver el efecto.

A partir de aquí vuestra imaginación es la que os permitirá cambiar la apariencia normal y la activa, así como también incorporar otra pseudoclase hover para cuando simplemente se pase el puntero por encima. Estos tres tienen tres estados: normal, hover y active. A probar...





Feliz Navidad Blogger. Iconos.

21/12/2011
Como con esto de las fiestas navideñas ando muy pero que muy perezoso; ingánico que creo que diría una felina que conozco. Sin embargo he encontrado por casualidad unos bonitos iconos navideños con el logo de Blogger y me he dicho ¿y por qué no le pongo hoy a mis parroquianos esos y algunos más por si todavía andan buscando para decorar su bog?

Pues dicho y hecho. Aquí están. Espero que a alguien les sean de utilidad.

Tayzar44

Spiral Pixels

Icon Archive

Pehaa Blog

PSD-Dude

Extreme John

Cheth Studios

Free vector clip art


Diseña la portada de tu nuevo timeline de Facebook

16/12/2011
Pues sí, ya todo el mundo tiene acceso a lo que en español se denomina Biografía de Facebook y como siempre ocurre, no faltarán los que quieren personalizar ese espacio, no muy flexible, pero que la creatividad de cada uno puede convertir en un punto original de su perfil.


En primer lugar, para el que todavía no se haya enterado, el nuevo perfil se consigue accediendo a esta página de presentación, pinchando en el botón inferior que reza .

Una vez en marcha, una advertencia en la cabecera os indica que de momento sólo vosotros podéis ver este nuevo diseño y que en siete días se producirá el cambio automáticamente. Esto es para que comprobéis qué cosas son visibles ahora, por si quisierais ocultar o completar, alguna de las que aparecen en primera plana antes de que se haga público.

El enlace Hacer el recorrido del nuevo diseño, os permitirá ver a modo de visita guiada, cuáles son las nuevas funciones. Si está todo correcto no tenéis que agotar el plazo el plazo de siete días, pues pinchando en , el cambio se hará instantáneamente.

Y ahora viene lo del diseño. Además de la clásica foto de perfil, ahora se puede poner una imagen bastante grande a modo de cabecera para vuestro timeline. La incorporación es muy fácil pues encima del espacio destinado para ella, hay otro botón (esto parece una camisería con tantos) que con el texto Agrega una portada, nos los indica.


Facebook dice que la imagen debe tener al menos 399px de ancho, pero eso es porque la amplia hasta ajustarla al ancho disponible (851px) y si es de mucho menos ancho, entonces quedará muy distorsionada. Lo recomendable es un mínimo de 720px.

Por contra, si la imagen es más alta o ancha que el hueco, Facebook presentará sólo la parte que quepa, permitiéndonos moverla para centrarla dónde gustemos.

En cualquier caso, podéis subir una imagen desde el disco duro o añadir algunas de las existentes en vuestros álbumes.


Las dimensiones exactas del espacio para la portada por si alguno quiere hacer alguna virguería son de 851x315px y las de la foto de perfil, 125x125px. Este es el esquema y os puede servir de plantilla si la descargáis en su tamaño real. Advierto que el borde de 5px de la foto de perfil, es imborrable.



Si eres mañoso con el Photoshop, tienes también esta otra plantilla, mucho más completa y muy bien maquetada que encontré en Hongkiat.


Por medios que no quede, pero si lo que te falta es inspiración, aquí tienes unos cuantos ejemplos creativos. Puedes ver más en el anterior enlace de Hongkiat, que es de dónde hemos obtenido estas.












Error bX-l4u1mh (Diciembre 2011)

15/12/2011

Muchos usuarios de Blogger están estamos teniendo problemas desde hace dos o tres días, con este error que se produce normalmente al acceder a la sección Diseño. Al parecer es indiferente que se use la nueva o la antigua interfaz

Es algo de lo que ya tiene conocimiento el equipo de Blogger, por lo que será cuestión de tiempo que lo resuelvan. En Known Issues for Blogger puedes ver la nota.

El aviso es para que no os volváis locos pensando que habéis estropeado algo en vuestra plantilla y que no toquéis nada por ese motivo.

Mientras llega la solución, puedes probar muy poquitas cosas pero he leído que en ocasiones a algunos se les ha solucionado el problema:

1. Borrar cookies
2. Borrar caché
3. Utilizar otro navegador
4. Repetir 1 y 2 con ese nuevo navegador
5. Acceder a la interfaz desde Draft

Suerte y paciencia.


Comentarios desplegables en Blogger

Si a veces comprimimos las entradas (sumarios) y otras los resultados de una búsqueda de entradas por categoría ¿por qué no puede ser útil hacer lo mismo con los comentarios?

tiny frogComo es habitual, esto no será de interés para todos, pero algunos blogs por su temática, reciben frecuentes comentarios de mucha extensión y el propietario del sitio puede tener la necesidad o el gusto, de hacerlos más homogéneos en cuanto a longitud. Para ellos va este truco.

El inconveniente es que supone un añadido más al código del sitio y, en contra de lo que pueda parecer, se tienen que leer y ejecutar más cosas y por tanto se demora algo más la carga.


Con este sistema lo que se consiguen son dos cosas. Por un lado que esa parte de la entrada (comentarios) tenga un aspecto más uniforme, como si estuviera en una tabla, ya que todos los comentarios ocuparán aproximadamente el mismo alto. Por otro, la longitud de la página se reducirá, lo que puede ser también una ventaja para los afortunados blogs que reciben multitud de participaciones de sus lectores.


Lo que haremos será tomar uno por uno todos los comentarios, crear una copia reducida con un máximo de caracteres determinado por nosotros y añadirle un enlace que esconderá este y mostrará el comentario original. El contenido original lo dejaremos tal cual añadiéndole también un enlace para hacer lo contrario.

Para que esto funcione como queremos y que no se vean ambos comentarios a la vez (original y copia reducida), sino alternativamente, usaremos la ya conocida función JavaScript para plegar y desplegar cosas; aquella que usaba las clases visible e invisible. Si no la tenéis de otros trucos similares, la añadís ahora antes de </head>:

<style type='text/css'>
.visible {display:block;}
.invisible {display:none;}
</style>

<script type='text/JavaScript'>
function plegardesplegar(identificacion){
var elemento = document.getElementById(identificacion);
if(elemento.className == &quot;visible&quot;){
elemento.className = &quot;invisible&quot;;
}
else{
elemento.className = &quot;visible&quot;;
}
}
</script>


El siguiente paso será meter en nuestra plantilla el script que hará toda la faena. Lo hemos metido todo dentro de una función, de manera que para usarla sólo será necesario llamarla desde dónde la necesitamos, pasándole los parámetros oportunos. En este caso, aprovechamos que todos los comentarios tienen una ID única que será la que utilizaremos.

Como antes, esto hay que insertarlo antes del </head>:

<style type='text/css'>
.desplegarcomentarios{}
.desplegarcomentarios a {text-decoration: none;}
.desplegarcomentarios a:hover {letter-spacing:2px;text-decoration: none; font-weight: bold;}
</style>

<script type='text/javascript'>
//<![CDATA[
function crearSumarioComentario(cID){

var numcar = 100;

var contenido = document.getElementById(cID);
var strx = contenido.innerHTML;
var original = strx;

if(strx.length>numcar) {
numcar = (numcar < strx.length-1) ? numcar : strx.length-2;
while(strx.charAt(numcar-1)!=' ' && strx.indexOf(' ',numcar)!=-1) numcar++;
strx = strx.substring(0,numcar-1);

strx = '<div class="visible" id="' +cID+ 'uno">' + strx + '... (<span class="desplegarcomentarios"><a href="javascript:plegardesplegar("' +cID+ 'uno");javascript:plegardesplegar("' +cID+ 'dos");" alt="Ver comentario" title="Ver comentario">▼Leer más</a></span>)</div>';

strx = strx+ '<div class="invisible" id="'+cID+'dos">' +original+ '<span class="desplegarcomentarios"><a href="javascript:plegardesplegar("' +cID+ 'uno");javascript:plegardesplegar("' +cID+ 'dos");" alt="Plegar comentario" title="Plegar comentario">◄◄</a></span></div>';
}
contenido.innerHTML = strx;
}
//]]>
</script>

La primera parte simplemente es el estilo de los enlaces para plegar/desplegar y usamos en este caso la clase desplegarcomentarios que se puede modificar al gusto.

La otra parte fácilmente configurable es el contenido de la variable numcar (100 en el ejemplo), justo al comenzar la función del script, que indicará el número de caracteres máximos que admitiremos para no cortar el comentario.


Y para subir nota, explico un poco lo que hace todo ese código. La función crearSumarioComentario recibirá un dato que será la ID del comentario a tratar. Las primeras líneas asignan contenidos a las variables que vamos a necesitar:

  • numcar: la longitud máxima del comentario a partir de la cual lo cortaremos
  • contenido: obtiene el contenido íntregro del comentario mediante getElementById
  • strx: extrae ese contenido y lo guarda
  • original: como vamos a ir modificando strx, reservamos aquí el contenido original para utilizarlo más adelante

A continuación viene todo el meollo dentro de un condicional que discrimina los comentarios que son más largos de lo deseado, de los que son más cortos que nuestro límite. Estos últimos no entraran en el condicional y simplemente serán devueltos íntegros.

Dentro del if comenzamos con una rutina que recorta el texto (strx) hasta dejarlo en una cantidad de caracteres igual a numcar. Luego añadimos a esa cadena recortada algo de código HTML para incorporar la clase visible, un ID igual al que tenía pero con el sufijo uno y un enlace con la llamada a la función plegardesplegar (la que comentamos al principio), que servirá para mostrar u ocultar cada uno de los comentarios.

Luego añadimos otro comentario con la misma estructura, pero esta vez con la clase invisible y el contenido original.

Por último tomamos el nuevo contenido creado (o el original si saltamos la condición) y lo reubicamos en el mismo sitio del que lo extrajimos.


Se ha explicado brevemente al principio, pero con todo esto lo que hacemos es sustituir el comentario original por dos comentarios nuevos, uno recortado y otro completo. Ambos llevan respectivamente la clase visible e invisible, por lo que en primera instancia el primero se ve y el otro no. Los enlaces que llevan cada uno de ellos lo que harán será intercambiar esas clases por lo que el visible no se verá y a la inversa. El efecto será más o menos este:

Quiere la boca exhausta vid, kiwi, piña y fugaz jamón. Fabio... ▼Leer más
Quiere la boca exhausta vid, kiwi, piña y fugaz jamón. Fabio me exige, sin tapujos, que añada cerveza al whisky. Jovencillo emponzoñado de whisky, ¡qué figurota exhibes! La cigüeña tocaba cada vez mejor el saxofón y el búho pedía kiwi y queso. ◄◄


Ya esta todo preparado pero si guardamos veremos que no ocurre nada. Todavía nos falta ejecutar desde algún sitio la función y pasarle la ID de todos los comentarios a la función. Para ello buscamos este trozo e insertamos lo que está en negrita, justo antes del cierre del párrafo:

<p>
<div expr:id='data:comment.id'>
<data:comment.body/>
</div>
<script type='text/javascript'>crearSumarioComentario(&quot;<data:comment.id/>&quot;);</script>
</p>


Personalizando los botones sociales de AddThis

13/12/2011
AddThis es una antigua pero muy buena opción para agregar de una tacada varios botones sociales. Con ellos vuestros lectores podrán enviar fácilmente las entradas que les gusten a las más conocidas redes.

También podrán utilizar directamente otros servicios adicionales como enviar el post por correo, añadir a Google Reader o imprimir la página. Este proveedor facilita además un botón adicional desplegable que con sólo pasar el puntero por encima de él, conduce a más de 300 destinos distintos.



La forma de conseguir el artilugio es bastante sencilla pues sólo hay que seleccionar uno de los tres estilos que se ven en su portada, pinchar en GET CODE y copiar el código que aparece.

Hay una pantalla intermedia para registrarte que puedes cerrar sin problemas si no deseas ser fichado, ya que esto sólo sería necesario si además de los botones, quieres poder consultar posteriormente ciertos datos analíticos -por otra parte interesantes- sobre su utilización.



El resultado en cualquier caso será algo cómo esto, dónde ya podéis comprobar cómo funcionan los botones y sobre todo el de fondo rojo que lleva un signo +. Desde ese se puede acceder a los 10 que hayamos marcado como favoritos y que incluye una última opción para acceder al resto: más...(334).


El código por defecto será este y lo vemos para entender las modificaciones que a continuación vamos a realizar:

<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style ">
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_preferred_3"></a>
<a class="addthis_button_preferred_4"></a>
<a class="addthis_button_compact"></a>
<a class="addthis_counter addthis_bubble_style"></a>
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4ee1153f3c5aa1d6"></script>
<!-- AddThis Button END -->

He marcado unas cuantas cosas en verde porque son las que vamos a ver cómo cambiar.

En primer lugar nos fijamos en la parte de abajo, que es dónde aparece el código de seguimiento para el análisis posterior de los botones. Es el dato que viene tras #pubid y que en el ejemplo es el xa-4ee1153f3c5aa1d6. Aunque creo que si no necesitáis análisis os da igual cual poner, lo comento por si estáis en el caso contrario y tenéis que usar el vuestro propio, el que os asigne AddThis.


Lo siguiente a destacar es que las líneas <a class="addthis_button_preferred_1"></a> las podéis intercambiar de sitio entre ellas para que los botones se muestren el el orden que vosotros queráis.



El siguiente cambio que podemos hacer directamente desde el código es el estilo de los botones. Para ello sólo tenemos que modificar la clase bajo la que va todo el artilugio, con las siguientes opciones:
  • class="addthis_toolbox addthis_default_style"
    ➽ Botones por defecto de 16x16 px
  • class="addthis_toolbox addthis_default_style addthis_32x32_style"
    ➽ Botones de 32x32px



Y para el final la parte que me parece más interesante: la forma de incluir los botones concretos de los servicios que nosotros queramos. Para esto lo que habría que cambiar sería la última parte de addthis_button_preferred_1. En esa última parte (en verde) tendremos que sustituir la expresión preferred_X por el nombre del botón que deseamos.


<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style addthis_32x32_style ">
<a class="addthis_button_twitter"></a>
<a class="addthis_button_facebook"></a>
<a class="addthis_button_linkedin"></a>
<a class="addthis_button_tumblr"></a>
<a class="addthis_button_googlebuzz"></a>
<a class="addthis_button_meneame"></a>
</div>
<script src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4ee1153f3c5aa1d6" type="text/javascript">
</script>
<!-- AddThis Button END -->

Algunos son tan fáciles cómo poner el nombre del servicio, pero otros vienen un poco modificados por existir servicios con nombres similares o varias opciones para el mismo servicio. Para salir de dudas, lo mejor es comprobar la denominación exacta en este listado que nos ofrece AddThis. Con esa guía podremos montar una batería de botones tan larga como queramos.

✚
✚
✚
✚

Como veis se pueden incluir algunos servicios que no se corresponden con redes sociales y que también pueden resultar interesantes, como el acortador bit.ly o el traductor de Google.

Faltan los botones que permiten contadores, pero esos tienen algunos parámetros que varían según el tipo de botón y no he encontrado un listado como el anterior. Hay que tener en cuenta que Google Plus siempre se muestra con contador, así que no se puede poner de otra manera. De todas formas, para los siguientes servicios y un ancho de 16px, he encontrado los más usuales: Facebook Like, Twitter, Google Plus y el propio de AddThis:


<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style "><a class="addthis_button_facebook_like" fb:like:layout="button_count"></a>
<a class="addthis_button_tweet"></a><a class="addthis_button_google_plusone" g:plusone:size="medium"></a>
<a class="addthis_counter addthis_pill_style"></a>
</div>
<!-- AddThis Button END -->


Y casi se me olvida... El sitio dónde insertar este código, sea el que sea el que utilicéis es libre. Por ejemplo lo podéis copiar dentro de un gadget en la barra lateral, que parece la opción más fácil, pero quizás el sitio más adecuado es dentro del pie del post (post-footer) en algunos de los post-footer-line post-footer-line-X que casi todas las plantillas Blogger suelen llevar.


Cinco trucos para poner nieve en tu blog ❄❄

08/12/2011
Snowflake 2
jbalint1
Esta vez veremos diversos sistemas para simular nieve cayendo en una web. Todos los códigos han sido probados y funcionan bien actualmente. Para instalarlos en vuestro sitio, sólo tenéis que seguir las instrucciones del sitio que ofrece el código.

Alguno puede que no funcione si tenéis una plantilla muy modificada, pero es cuestión de probar y quedaros con el que lo haga y más os guste.

Hay que tener en cuenta que este tipo de códigos ralentizan bastante la carga del blog, así que haced pruebas antes de quedaros con el definitivo. Algunos se pueden combinar para que aparezca doble cantidad de copos simultaneando los efectos de ambos scripts. Si tras probar uno lo descartáis, no olvidéis borrar del todo lo que insertasteis nuevo. Doble demora en la carga en este último caso.

❄❄ Felices fiestas ❄❄


► Nieve en tu blog. Fácil. En un Gadget. Blog de lujo.

6 estilos distintos de copos (grandes) y código que se inserta en un gadget tipo HTML/JavaScript (con posibilidad de hacerlo en la plantilla). Recomendable que sea en un gadget de la zona de la cabecera para que la nieve cope todo el ancho de página... y perdón por el chiste fácil. Llamada simple a script alojado por el editor del blog (tres líneas de código).


► Nieve en el blog que se acumula al final de la página. Ciudad Blogger.

Puntos blancos que caen con bastante velocidad y cierta sensación de profundidad. Se detienen en la parte baja del blog dónde se "derriten" suavemente. Velocidad y color configurable. El movimiento del cursor simula viento y hace que los copos caigan en diagonal hacía el lado del puntero. Se inserta mediante código completo en un gadget HTML/JavaScript.


► Nieve en el blog. El escaparate de Rosa.

Sin JavaScript, lo que lo hace algo más rápido. Este truco está basado en la propiedad marquee y lo que hace es pasar una imagen en una marquesina en vertical. Repitiendo el código y cambiando algunos parámetros, el dibujo cae por toda la página si se inserta en un gadget de la zona de la cabecera. Podéis encontrar la explicación y el código ya repetido sólo para copiar y pegar. Dadas las circunstancias espero que sepáis disculpar el aspecto de este blog, pero tenía ganas de poner algo de allí. In memorian.


► Efecto nieve que cae - Java Script Navideño. Tutoriales para Blogspot.

Clásicos copos redondos de diversos tamaños (siempre prequeños) y código a incorporar en la plantilla mediante una llamada a script alojado por el editor. También disponible el código completo para insertarlo directamente en la plantilla o alojarlo nosotros.


► Nieve en tu blog. Oloblogger.

Un código que publicamos hace un tiempo y que hace que a medida que se mueva el puntero, se generen asteriscos blancos que caen poco a poco. Configurable en cuánto a color y número de copos, el código debe ser insertado en la plantilla.


Plantilla para tienda online: Blogger Store

06/12/2011
Esta plantilla está indicada para usuarios de Blogger que deseen convertir su blog en una tienda online. El desarrollo se lo debemos a JavaTemplates y el resultado es muy bueno.

La plantilla incorpora un JavaScript llamado SimpleCart que gestiona el carro de compra y el pago mediante PayPal o Google Checkout y que ya hemos visto aquí anteriormente en su versión original y con algunas propuestas de modificación para incorporar el pago por e-mail (1) (2).

En esas entradas podéis ver qué etiquetas llevan los nombres de los productos, las miniaturas, los precios y las descripciones para que el sistema funcione correctamente.



Pinchando en la imagen de arriba podéis acceder a la página de descarga, demo y características y en este otro enlace tenéis las instrucciones para configurar las variables de SimpleCart, crear productos, ajustar los menús, etc.

Todo está en inglés, pero eso no es nada que el traductor de Google no pueda solucionar.


Aviso automático en Twitter de nuevas entradas Blogger

01/12/2011
Otras plataformas de blogs tienen sistemas para sincronizar la publicación de posts en redes sociales o sitios de microblogging como Twitter. Sin embargo, Blogger carece de ellos y hay que apañárselas con aplicaciones "externas". Lo del entrecomillado tiene su razón y es que la que vamos a ver con más detalle precisamente es propiedad del mismo que Blogger, es decir, Google.

Lo que pretendemos con estos servicios es que cuando publiquemos una entrada nueva, no tengamos que entrar en Twitter a comunicarlo mediante un tweet manual. Ese trabajo lo harán las máquinas que para eso están, para realizar tareas rutinarias repetitivas.


Y bien, el sistema que os propongo es Feedburner, la utilidad de gestión de fuentes (feed, RSS) que vimos hace como un año.

Supongamos que ya habéis visto esa entrada, habéis sido buenos alumnos y que tenéis ya dado de alta vuestro feed en Feedburner. Lo que hay que hacer ahora es ir a Mis Feeds y pinchar en el que os interesa exportar. Si tenéis sólo uno, pues en ese.


Accedemos a la pestaña PUBLICIZE y en el menú de la izquierda, pinchamos en SOCIALIZE. Esto es lo que veremos:



Aquí pinchamos en y se nos redirigirá a una pantalla de autorización de Twitter (/oauth/authorize), dónde tendremos que introducir el usuario y password del servicio del pajarito azul si no estábamos previamente logueados. Allí debemos Autorizar la aplicación y volveremos a la anterior página de Feedburner.

En el siguiente pantallazo están explicados y marcados los puntos que en la mayoría de los casos serán los óptimos para que los tweets salgan adecuadamente.


Por si queréis modificar algo más, están son las opciones más útiles:

  • Hashtags: No mostrar ninguno (recomendado) / Usar etiquetas del post como hashtags
  • Additional text: Por ejemplo "Nuevo post publicado", el nombre del blog o "Recién salido del horno ➽". Hay que tener en cuenta que este texto consumirá parte de los 140 caracteres disponibles, así que no debe ser muy largo si los títulos de nuestras entradas lo son o si decidimos incluir hashtags.
  • Keyword filter: Aquí podemos poner una palabra asociada a las etiquetas (category), al título o al contenido de la entrada, para que sólo se publiquen en Twitter los posts que cumplan esa condición.


Según vayáis haciendo cambios, debajo de este recuadro aparecerá una vista previa de qué entradas se publicarían (caso de aplicar un filtro) y que aspecto tendrían.

Una vez a nuestro gusto, no se nos puede olvidar pinchar en . Volviendo en cualquier momento a este mismo apartado, podremos desactivar el envío automático de entradas cuando queramos, pinchando en ese mismo botón.


Para hacer lo mismo pero con Facebook, ya vimos RSS Graffitti que publicaba en nuestro muro personal y/o en nuestras páginas las entradas del blog. Y antes de que preguntéis, de momento no hay nada para mandar cosas a Google Plus.


Y por si este sistema no es del todo de vuestro agrado o queréis tener una sola aplicación tanto para Facebook como para Twitter, podéis usar en lugar de los dos antes mencionados (no dupliquéis servicios a menos que queráis parecer una ametralladora de tweets) Twitterfeed, un servicio específico para publicar en esas dos redes desde un blog y que además ofrece adicionalmente un pequeño sistema de estadísticas. También es gratuito, claro.



Actualización: @fedeterzaghi nos pasa enlace a este otro sistema similar a Twitterfeed, dlvr.it. Gracias.

Suscribirse a: Entradas (Atom)
Recibe por correo las últimas publicaciones.
Teclea tu dirección.


No rights reserved
NINGUN DERECHO RESERVADO
...aunque se agradece un enlace. Si crees que algo aquí vulnera los derechos de otro, mándanos un correo.

El botón que
no hace nada El botón que no hace nada

Ir Arriba